diff --git a/CHANGELOG.md b/CHANGELOG.md index 28430ba8b8a..f77e0e4c581 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,36 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [8.2.0-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.1-dev.0...v8.2.0-dev.0) (2024-07-15) + + +### Features + +* **chart-wizard:** add chart wizard component styles ([fb94657](https://github.com/telerik/kendo-themes/commit/fb9465737f7f7e64a20baefb715be976b0ab5fb6)) +* **chat:** add focus styles on quick replies ([c427ea1](https://github.com/telerik/kendo-themes/commit/c427ea1d65e0d53dd81142d09f54b4632d353833)) +* **html:** add chart wizard component spec and tests ([d05210d](https://github.com/telerik/kendo-themes/commit/d05210d29e383aa4d89318df50a0e4b8ab43c7fb)) +* **html:** create chat quick reply component spec ([870d4d4](https://github.com/telerik/kendo-themes/commit/870d4d42df4cd1cb580d3462f9dab3cd653a3c8b)) + + + + + +## [8.1.1-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.0...v8.1.1-dev.0) (2024-07-08) + +**Note:** Version bump only for package kendo-themes.repo + + + + + +# [8.1.0](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.2...v8.1.0) (2024-07-03) + +**Note:** Version bump only for package kendo-themes.repo + + + + + # [8.1.0-dev.2](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.1...v8.1.0-dev.2) (2024-07-01) diff --git a/lerna.json b/lerna.json index 2afe0c469d8..091aa5d030d 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "$schema": "node_modules/lerna/schemas/lerna-schema.json", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "packages": [ "packages/*" ], diff --git a/package-lock.json b/package-lock.json index aeee9270874..93ab138b6ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,8 +25,8 @@ "@progress/kendo-e2e": "^2.1.1", "@progress/kendo-theme-tasks": "^1.17.6", "@types/node": "^20.2.5", - "@typescript-eslint/eslint-plugin": "^7.0.1", - "@typescript-eslint/parser": "^7.0.1", + "@typescript-eslint/eslint-plugin": "^8.0.0-alpha.41", + "@typescript-eslint/parser": "^8.0.0-alpha.41", "chokidar": "^3.5.3", "esbuild": "^0.20.0", "eslint": "^8.17.0", @@ -1109,9 +1109,9 @@ } }, "node_modules/@eslint-community/regexpp": { - "version": "4.8.0", - "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.8.0.tgz", - "integrity": "sha512-JylOEEzDiOryeUnFbQz+oViCXS0KsvR1mvHkoMiu5+UiBvy+RYX7tzlIIIEstF/gVa2tj9AQXk3dgnxv6KxhFg==", + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz", + "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==", "dev": true, "engines": { "node": "^12.0.0 || ^14.0.0 || >=16.0.0" @@ -3567,12 +3567,6 @@ "@types/node": "*" } }, - "node_modules/@types/json-schema": { - "version": "7.0.15", - "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", - "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", - "dev": true - }, "node_modules/@types/minimatch": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", @@ -3625,12 +3619,6 @@ "@types/ws": "*" } }, - "node_modules/@types/semver": { - "version": "7.5.8", - "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz", - "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==", - "dev": true - }, "node_modules/@types/ws": { "version": "8.5.10", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz", @@ -3641,33 +3629,31 @@ } }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.4.0.tgz", - "integrity": "sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==", + "version": "8.0.0-alpha.41", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.0.0-alpha.41.tgz", + "integrity": "sha512-WePtbzWMaQO4qtGAXp3zzEN8yYZCEuAHVCERCUXgoSUTQ80F5UB7T5lYyA9ySpFDB7rqJ2ev98DtnbS4U3Ms+w==", "dev": true, "dependencies": { - "@eslint-community/regexpp": "^4.5.1", - "@typescript-eslint/scope-manager": "7.4.0", - "@typescript-eslint/type-utils": "7.4.0", - "@typescript-eslint/utils": "7.4.0", - "@typescript-eslint/visitor-keys": "7.4.0", - "debug": "^4.3.4", + "@eslint-community/regexpp": "^4.10.0", + "@typescript-eslint/scope-manager": "8.0.0-alpha.41", + "@typescript-eslint/type-utils": "8.0.0-alpha.41", + "@typescript-eslint/utils": "8.0.0-alpha.41", + "@typescript-eslint/visitor-keys": "8.0.0-alpha.41", "graphemer": "^1.4.0", - "ignore": "^5.2.4", + "ignore": "^5.3.1", "natural-compare": "^1.4.0", - "semver": "^7.5.4", - "ts-api-utils": "^1.0.1" + "ts-api-utils": "^1.3.0" }, "engines": { - "node": "^18.18.0 || >=20.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "@typescript-eslint/parser": "^7.0.0", - "eslint": "^8.56.0" + "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", + "eslint": "^8.57.0 || ^9.0.0" }, "peerDependenciesMeta": { "typescript": { @@ -3676,26 +3662,26 @@ } }, "node_modules/@typescript-eslint/parser": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.4.0.tgz", - "integrity": "sha512-ZvKHxHLusweEUVwrGRXXUVzFgnWhigo4JurEj0dGF1tbcGh6buL+ejDdjxOQxv6ytcY1uhun1p2sm8iWStlgLQ==", + "version": "8.0.0-alpha.41", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.0.0-alpha.41.tgz", + "integrity": "sha512-7HMXwy/q/59ZASBXz2FtdIsR7LgABrR8j2dTKq9GMR8OkjjdO4klxWSY/uOBozVt4UxlMRYsBdBDhEq4/tHRiw==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "7.4.0", - "@typescript-eslint/types": "7.4.0", - "@typescript-eslint/typescript-estree": "7.4.0", - "@typescript-eslint/visitor-keys": "7.4.0", + "@typescript-eslint/scope-manager": "8.0.0-alpha.41", + "@typescript-eslint/types": "8.0.0-alpha.41", + "@typescript-eslint/typescript-estree": "8.0.0-alpha.41", + "@typescript-eslint/visitor-keys": "8.0.0-alpha.41", "debug": "^4.3.4" }, "engines": { - "node": "^18.18.0 || >=20.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "eslint": "^8.56.0" + "eslint": "^8.57.0 || ^9.0.0" }, "peerDependenciesMeta": { "typescript": { @@ -3704,16 +3690,16 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.4.0.tgz", - "integrity": "sha512-68VqENG5HK27ypafqLVs8qO+RkNc7TezCduYrx8YJpXq2QGZ30vmNZGJJJC48+MVn4G2dCV8m5ZTVnzRexTVtw==", + "version": "8.0.0-alpha.41", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.0.0-alpha.41.tgz", + "integrity": "sha512-iNxuQ0TMVfFiMJ2al4bGd/mY9+aLtBxnHfo7B2xoVzR6cRFgUdBLlMa//MSIjSmVRpCEqNLQnkxpJb96tFG+xw==", "dev": true, "dependencies": { - "@typescript-eslint/types": "7.4.0", - "@typescript-eslint/visitor-keys": "7.4.0" + "@typescript-eslint/types": "8.0.0-alpha.41", + "@typescript-eslint/visitor-keys": "8.0.0-alpha.41" }, "engines": { - "node": "^18.18.0 || >=20.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "type": "opencollective", @@ -3721,26 +3707,23 @@ } }, "node_modules/@typescript-eslint/type-utils": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.4.0.tgz", - "integrity": "sha512-247ETeHgr9WTRMqHbbQdzwzhuyaJ8dPTuyuUEMANqzMRB1rj/9qFIuIXK7l0FX9i9FXbHeBQl/4uz6mYuCE7Aw==", + "version": "8.0.0-alpha.41", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.0.0-alpha.41.tgz", + "integrity": "sha512-+QIA1z/jrox6bbvqlyqBQjotpevieLTycfiuoKuqGcKoskFZV5Rma51BV8LCJacnOafwJtSi+7b8zDo8OsXUvA==", "dev": true, "dependencies": { - "@typescript-eslint/typescript-estree": "7.4.0", - "@typescript-eslint/utils": "7.4.0", + "@typescript-eslint/typescript-estree": "8.0.0-alpha.41", + "@typescript-eslint/utils": "8.0.0-alpha.41", "debug": "^4.3.4", - "ts-api-utils": "^1.0.1" + "ts-api-utils": "^1.3.0" }, "engines": { - "node": "^18.18.0 || >=20.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/typescript-eslint" }, - "peerDependencies": { - "eslint": "^8.56.0" - }, "peerDependenciesMeta": { "typescript": { "optional": true @@ -3748,12 +3731,12 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.4.0.tgz", - "integrity": "sha512-mjQopsbffzJskos5B4HmbsadSJQWaRK0UxqQ7GuNA9Ga4bEKeiO6b2DnB6cM6bpc8lemaPseh0H9B/wyg+J7rw==", + "version": "8.0.0-alpha.41", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.0.0-alpha.41.tgz", + "integrity": "sha512-n0P2FP3YC3pD3yoiCf4lHqbUP45xlnOk8HkjB+LtKSUZZWLLJ8k1ZXZtQj7MEX22tytCMj//Bmq403xFuCwfIg==", "dev": true, "engines": { - "node": "^18.18.0 || >=20.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "type": "opencollective", @@ -3761,22 +3744,22 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.4.0.tgz", - "integrity": "sha512-A99j5AYoME/UBQ1ucEbbMEmGkN7SE0BvZFreSnTd1luq7yulcHdyGamZKizU7canpGDWGJ+Q6ZA9SyQobipePg==", + "version": "8.0.0-alpha.41", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.0.0-alpha.41.tgz", + "integrity": "sha512-adCr+vbLYTFhwhIwjIjjMxTdUYiPA2Jlyuhnbj092IzgLHtT79bvuwcgPWeTyLbFb/13SMKmOEka00xHiqLpig==", "dev": true, "dependencies": { - "@typescript-eslint/types": "7.4.0", - "@typescript-eslint/visitor-keys": "7.4.0", + "@typescript-eslint/types": "8.0.0-alpha.41", + "@typescript-eslint/visitor-keys": "8.0.0-alpha.41", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", - "minimatch": "9.0.3", - "semver": "^7.5.4", - "ts-api-utils": "^1.0.1" + "minimatch": "^9.0.4", + "semver": "^7.6.0", + "ts-api-utils": "^1.3.0" }, "engines": { - "node": "^18.18.0 || >=20.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "type": "opencollective", @@ -3798,9 +3781,9 @@ } }, "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", - "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", "dev": true, "dependencies": { "brace-expansion": "^2.0.1" @@ -3813,41 +3796,38 @@ } }, "node_modules/@typescript-eslint/utils": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.4.0.tgz", - "integrity": "sha512-NQt9QLM4Tt8qrlBVY9lkMYzfYtNz8/6qwZg8pI3cMGlPnj6mOpRxxAm7BMJN9K0AiY+1BwJ5lVC650YJqYOuNg==", + "version": "8.0.0-alpha.41", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.0.0-alpha.41.tgz", + "integrity": "sha512-DTxc9VdERS6iloiw1P5tgRDqRArmp/sIuvgdHBvGh2SiltEFc3VjLGnHHGSTr6GfH7tjFWvcCnCtxx+pjWfp5Q==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", - "@types/json-schema": "^7.0.12", - "@types/semver": "^7.5.0", - "@typescript-eslint/scope-manager": "7.4.0", - "@typescript-eslint/types": "7.4.0", - "@typescript-eslint/typescript-estree": "7.4.0", - "semver": "^7.5.4" + "@typescript-eslint/scope-manager": "8.0.0-alpha.41", + "@typescript-eslint/types": "8.0.0-alpha.41", + "@typescript-eslint/typescript-estree": "8.0.0-alpha.41" }, "engines": { - "node": "^18.18.0 || >=20.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "eslint": "^8.56.0" + "eslint": "^8.57.0 || ^9.0.0" } }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.4.0.tgz", - "integrity": "sha512-0zkC7YM0iX5Y41homUUeW1CHtZR01K3ybjM1l6QczoMuay0XKtrb93kv95AxUGwdjGr64nNqnOCwmEl616N8CA==", + "version": "8.0.0-alpha.41", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.0.0-alpha.41.tgz", + "integrity": "sha512-uetCAUBVC+YarBdZnWzDDgX11PpAEGV8Cw31I3d1xNrhx6/bJGThKX+holEmd3amMdnr4w/XUKH/4YuQOgtjDA==", "dev": true, "dependencies": { - "@typescript-eslint/types": "7.4.0", - "eslint-visitor-keys": "^3.4.1" + "@typescript-eslint/types": "8.0.0-alpha.41", + "eslint-visitor-keys": "^3.4.3" }, "engines": { - "node": "^18.18.0 || >=20.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "type": "opencollective", @@ -19905,12 +19885,12 @@ "dev": true }, "node_modules/ts-api-utils": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.2.tgz", - "integrity": "sha512-Cbu4nIqnEdd+THNEsBdkolnOXhg0I8XteoHaEKgvsxpsbWda4IsUut2c187HxywQCvveojow0Dgw/amxtSKVkQ==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", + "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==", "dev": true, "engines": { - "node": ">=16.13.0" + "node": ">=16" }, "peerDependencies": { "typescript": ">=4.2.0" @@ -21634,55 +21614,55 @@ }, "packages/bootstrap": { "name": "@progress/kendo-theme-bootstrap", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "license": "Apache-2.0", "dependencies": { "@progress/kendo-svg-icons": "3.0.0", - "@progress/kendo-theme-core": "8.1.0-dev.2", - "@progress/kendo-theme-default": "8.1.0-dev.2", - "@progress/kendo-theme-utils": "8.1.0-dev.2", + "@progress/kendo-theme-core": "8.2.0-dev.0", + "@progress/kendo-theme-default": "8.2.0-dev.0", + "@progress/kendo-theme-utils": "8.2.0-dev.0", "bootstrap": "5.2.1" } }, "packages/classic": { "name": "@progress/kendo-theme-classic", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "license": "Apache-2.0", "dependencies": { "@progress/kendo-svg-icons": "3.0.0", - "@progress/kendo-theme-core": "8.1.0-dev.2", - "@progress/kendo-theme-default": "8.1.0-dev.2", - "@progress/kendo-theme-utils": "8.1.0-dev.2" + "@progress/kendo-theme-core": "8.2.0-dev.0", + "@progress/kendo-theme-default": "8.2.0-dev.0", + "@progress/kendo-theme-utils": "8.2.0-dev.0" } }, "packages/core": { "name": "@progress/kendo-theme-core", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "license": "Apache-2.0" }, "packages/default": { "name": "@progress/kendo-theme-default", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "license": "Apache-2.0", "dependencies": { "@progress/kendo-svg-icons": "3.0.0", - "@progress/kendo-theme-core": "8.1.0-dev.2", - "@progress/kendo-theme-utils": "8.1.0-dev.2" + "@progress/kendo-theme-core": "8.2.0-dev.0", + "@progress/kendo-theme-utils": "8.2.0-dev.0" } }, "packages/fluent": { "name": "@progress/kendo-theme-fluent", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "license": "Apache-2.0", "dependencies": { "@progress/kendo-svg-icons": "3.0.0", - "@progress/kendo-theme-core": "8.1.0-dev.2", - "@progress/kendo-theme-utils": "8.1.0-dev.2" + "@progress/kendo-theme-core": "8.2.0-dev.0", + "@progress/kendo-theme-utils": "8.2.0-dev.0" } }, "packages/html": { "name": "@progress/kendo-themes-html", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "license": "Apache-2.0", "dependencies": { "@progress/kendo-svg-icons": "3.0.0", @@ -21695,31 +21675,31 @@ }, "packages/material": { "name": "@progress/kendo-theme-material", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "license": "Apache-2.0", "dependencies": { "@progress/kendo-svg-icons": "3.0.0", - "@progress/kendo-theme-core": "8.1.0-dev.2", - "@progress/kendo-theme-default": "8.1.0-dev.2", - "@progress/kendo-theme-utils": "8.1.0-dev.2" + "@progress/kendo-theme-core": "8.2.0-dev.0", + "@progress/kendo-theme-default": "8.2.0-dev.0", + "@progress/kendo-theme-utils": "8.2.0-dev.0" } }, "packages/nouvelle": { "name": "@progress/kendo-theme-nouvelle", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "license": "Apache-2.0", "dependencies": { "@progress/kendo-svg-icons": "3.0.0", - "@progress/kendo-theme-core": "8.1.0-dev.2", - "@progress/kendo-theme-utils": "8.1.0-dev.2" + "@progress/kendo-theme-core": "8.2.0-dev.0", + "@progress/kendo-theme-utils": "8.2.0-dev.0" } }, "packages/utils": { "name": "@progress/kendo-theme-utils", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "license": "Apache-2.0", "dependencies": { - "@progress/kendo-theme-core": "8.1.0-dev.2" + "@progress/kendo-theme-core": "8.2.0-dev.0" } } } diff --git a/package.json b/package.json index eadd3aaef51..8e15c3d4f3b 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,8 @@ "@progress/kendo-e2e": "^2.1.1", "@progress/kendo-theme-tasks": "^1.17.6", "@types/node": "^20.2.5", - "@typescript-eslint/eslint-plugin": "^7.0.1", - "@typescript-eslint/parser": "^7.0.1", + "@typescript-eslint/eslint-plugin": "^8.0.0-alpha.41", + "@typescript-eslint/parser": "^8.0.0-alpha.41", "chokidar": "^3.5.3", "esbuild": "^0.20.0", "eslint": "^8.17.0", diff --git a/packages/bootstrap/CHANGELOG.md b/packages/bootstrap/CHANGELOG.md index a4f1e1098d7..9abe1437dc9 100644 --- a/packages/bootstrap/CHANGELOG.md +++ b/packages/bootstrap/CHANGELOG.md @@ -3,6 +3,34 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [8.2.0-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.1-dev.0...v8.2.0-dev.0) (2024-07-15) + + +### Features + +* **chart-wizard:** add chart wizard component styles ([fb94657](https://github.com/telerik/kendo-themes/commit/fb9465737f7f7e64a20baefb715be976b0ab5fb6)) +* **chat:** add focus styles on quick replies ([c427ea1](https://github.com/telerik/kendo-themes/commit/c427ea1d65e0d53dd81142d09f54b4632d353833)) + + + + + +## [8.1.1-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.0...v8.1.1-dev.0) (2024-07-08) + +**Note:** Version bump only for package @progress/kendo-theme-bootstrap + + + + + +# [8.1.0](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.2...v8.1.0) (2024-07-03) + +**Note:** Version bump only for package @progress/kendo-theme-bootstrap + + + + + # [8.1.0-dev.2](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.1...v8.1.0-dev.2) (2024-07-01) diff --git a/packages/bootstrap/docs/customization-chart-wizard.md b/packages/bootstrap/docs/customization-chart-wizard.md new file mode 100644 index 00000000000..ad953acc476 --- /dev/null +++ b/packages/bootstrap/docs/customization-chart-wizard.md @@ -0,0 +1,148 @@ +--- +title: Customizing ChartWizard +description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization." +slug: variables_kendothemebootstrap_chart-wizard +position: 9 +--- + +# Customizing ChartWizard + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chart-wizard-icon-area-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #0d6efd)
Description
The color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-bgStringif($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)var(--kendo-color-primary-subtle, #cfe2ff)
Description
The background color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-border-radiusStringk-border-radius(sm)var(--kendo-border-radius-sm, 0.25rem)
Description
The border radius of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-focus-shadowListinset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)inset 0 0 0 1px var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4))
Description
The box shadow of the focused area around the chart type icon.
+
$kendo-chart-wizard-icon-area-selected-shadowListinset 0 0 0 1px $kendo-chart-wizard-icon-area-colorinset 0 0 0 1px var(--kendo-color-primary, #0d6efd)
Description
The box shadow of the selected area around the chart type icon.
+
$kendo-chart-wizard-chart-type-selected-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #0d6efd)
Description
The color of the selected chart type items in the Property panel.
+
$kendo-chart-wizard-preview-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the preview pane.
+
$kendo-chart-wizard-property-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the property pane.
+
$kendo-chart-wizard-chart-type-spacingStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The gap between the chart type items in the Property panel.
+
$kendo-chart-wizard-icon-text-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The gap between the icon area and its text.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/bootstrap/docs/customization-chat.md b/packages/bootstrap/docs/customization-chat.md index 79d7830123b..348296481ed 100644 --- a/packages/bootstrap/docs/customization-chat.md +++ b/packages/bootstrap/docs/customization-chat.md @@ -637,6 +637,36 @@ The following table lists the available variables for customization.
Description
The border color of the hovered Chat quick reply.
+ + $kendo-chat-quick-reply-shadow-blur + Number + 0px + 0px + + +
Description
The shadow blur of the focused Chat quick reply.
+ + + + $kendo-chat-quick-reply-shadow-spread + Number + .25rem + 0.25rem + + +
Description
The shadow spread of the focused Chat quick reply.
+ + + + $kendo-chat-quick-reply-shadow-opacity + Number + .5 + 0.5 + + +
Description
The shadow opacity of the focused Chat quick reply.
+ + diff --git a/packages/bootstrap/docs/customization-map.md b/packages/bootstrap/docs/customization-map.md new file mode 100644 index 00000000000..116a5d1fd65 --- /dev/null +++ b/packages/bootstrap/docs/customization-map.md @@ -0,0 +1,238 @@ +--- +title: Customizing Map +description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization." +slug: variables_kendothemebootstrap_map +position: 9 +--- + +# Customizing Map + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-map-border-widthNumber0px0px
Description
The border width of the Map.
+
$kendo-map-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Map.
+
$kendo-map-line-heightStringvar( --kendo-line-height, normal )!defaultvar(--kendo-line-height, normal)
Description
The line height of the Map.
+
$kendo-map-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Map.
+
$kendo-map-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Map.
+
$kendo-map-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the Map.
+
$kendo-map-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the Map.
+
$kendo-map-navigator-marginStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The margin of the Map navigator.
+
$kendo-map-navigator-paddingStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The padding of the Map navigator.
+
$kendo-map-navigator-widthCalculationcalc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) )calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The width of the Map navigator.
+
$kendo-map-navigator-heightCalculation$kendo-map-navigator-widthcalc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The height of the Map navigator.
+
$kendo-map-navigator-border-widthNumber1px1px
Description
The border width of the Map navigator.
+
$kendo-map-zoom-control-marginStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The margin of the Map zoom control.
+
$kendo-map-zoom-control-button-padding-xNumber$kendo-button-padding-y0.375rem
Description
The horizontal padding of the Map zoom control.
+
$kendo-map-zoom-control-button-padding-yNumber$kendo-map-zoom-control-button-padding-x0.375rem
Description
The vertical padding of the Map zoom control.
+
$kendo-map-attribution-padding-xString$kendo-padding-sm-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Map attribution.
+
$kendo-map-attribution-padding-yString$kendo-padding-sm-yvar(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Map attribution.
+
$kendo-map-attribution-font-sizeCalculationcalc( #{$kendo-map-font-size} * .75 )calc(var(--kendo-font-size, inherit) * 0.75)
Description
The font size of the Map attribution.
+
$kendo-map-attribution-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 ))color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent)
Description
The background color of the Map attribution.
+
$kendo-map-marker-fillString$kendo-color-primaryvar(--kendo-color-primary, #0d6efd)
Description
The fill color of the Map marker.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/bootstrap/docs/customization-mediaplayer.md b/packages/bootstrap/docs/customization-mediaplayer.md new file mode 100644 index 00000000000..6ae07f81d9f --- /dev/null +++ b/packages/bootstrap/docs/customization-mediaplayer.md @@ -0,0 +1,168 @@ +--- +title: Customizing Mediaplayer +description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization." +slug: variables_kendothemebootstrap_mediaplayer +position: 9 +--- + +# Customizing Mediaplayer + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-media-player-border-widthNumber1px1px
Description
The border width of the MediaPlayer.
+
$kendo-media-player-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the MediaPlayer.
+
$kendo-media-player-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the MediaPlayer.
+
$kendo-media-player-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the MediaPlayer.
+
$kendo-media-player-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the MediaPlayer.
+
$kendo-media-player-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the MediaPlayer.
+
$kendo-media-player-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the MediaPlayer.
+
$kendo-media-player-titlebar-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the MediaPlayer title.
+
$kendo-media-player-titlebar-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the MediaPlayer title.
+
$kendo-media-player-titlebar-bgNullnullnull
Description
The background color of the MediaPlayer title.
+
$kendo-media-player-titlebar-textString$kendo-media-player-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The text color of the MediaPlayer title.
+
$kendo-media-player-titlebar-borderNullnullnull
Description
The border color of the MediaPlayer title.
+
$kendo-media-player-titlebar-gradientListif($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 0%, transparent)
Description
The gradient of the MediaPlayer title.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/bootstrap/docs/customization-pivotgrid.md b/packages/bootstrap/docs/customization-pivotgrid.md new file mode 100644 index 00000000000..7bba1f7f332 --- /dev/null +++ b/packages/bootstrap/docs/customization-pivotgrid.md @@ -0,0 +1,748 @@ +--- +title: Customizing Pivotgrid +description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization." +slug: variables_kendothemebootstrap_pivotgrid +position: 9 +--- + +# Customizing Pivotgrid + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-pivotgrid-spacerStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacer of the PivotGrid.
+
$kendo-pivotgrid-padding-xNullnullnull
Description
The horizontal padding of the PivotGrid.
+
$kendo-pivotgrid-padding-yNullnullnull
Description
The vertical of the PivotGrid.
+
$kendo-pivotgrid-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the PivotGrid.
+
$kendo-pivotgrid-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the PivotGrid.
+
$kendo-pivotgrid-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the PivotGrid.
+
$kendo-pivotgrid-border-widthNumber1px1px
Description
The border width of the PivotGrid.
+
$kendo-pivotgrid-icon-spacingStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The icon spacing of the PivotGrid.
+
$kendo-pivotgrid-row-header-widthNumber300px300px
Description
The default width of the PivotGrid row header.
+
$kendo-pivotgrid-column-header-heightNumber75px75px
Description
The default height of the PivotGrid column header.
+
$kendo-pivotgrid-cell-padding-xNumber$kendo-table-md-cell-padding-x0.5rem
Description
The horizontal padding of the PivotGrid cell.
+
$kendo-pivotgrid-cell-padding-yNumber$kendo-table-md-cell-padding-y0.5rem
Description
The vertical padding of the PivotGrid cell.
+
$kendo-pivotgrid-cell-border-widthNumber1px1px
Description
The border width of the PivotGrid cell.
+
$kendo-pivotgrid-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PivotGrid.
+
$kendo-pivotgrid-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the PivotGrid.
+
$kendo-pivotgrid-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the PivotGrid.
+
$kendo-pivotgrid-alt-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 ))var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2))
Description
The alt border color of the PivotGrid.
+
$kendo-pivotgrid-headers-bgString$kendo-component-header-bgvar(--kendo-color-surface, #f8f9fa)
Description
The background color of the PivotGrid header.
+
$kendo-pivotgrid-headers-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the PivotGrid header.
+
$kendo-pivotgrid-headers-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the PivotGrid header.
+
$kendo-pivotgrid-total-bgStringif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 ))var(--kendo-color-base-subtle, #e9ecef)
Description
The background color of the PivotGrid total cells.
+
$kendo-pivotgrid-total-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the PivotGrid total cells.
+
$kendo-pivotgrid-total-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the PivotGrid total cells.
+
$kendo-pivotgrid-hover-bgStringif($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% ))var(--kendo-color-base-subtle-hover, #dee2e6)
Description
The hover background color of the PivotGrid.
+
$kendo-pivotgrid-hover-textNullnullnull
Description
The hover text color of the PivotGrid.
+
$kendo-pivotgrid-hover-borderNullnullnull
Description
The hover border color of the PivotGrid.
+
$kendo-pivotgrid-selected-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 ))color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent)
Description
The selected background color of the PivotGrid.
+
$kendo-pivotgrid-selected-textNullnullnull
Description
The selected text color of the PivotGrid.
+
$kendo-pivotgrid-selected-borderNullnullnull
Description
The selected border color of the PivotGrid.
+
$kendo-pivotgrid-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent)
Description
The focus shadow of the PivotGrid.
+
$kendo-pivotgrid-configurator-padding-xNullnullnull
Description
The horizontal padding of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-padding-yNullnullnull
Description
The vertical padding of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-border-widthNumber1px1px
Description
The border width of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-header-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-padding-yCalculationcalc( #{$kendo-pivotgrid-spacer} * .75 )calc(var(--kendo-spacing-4, 1rem) * 0.75)
Description
The vertical padding of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-font-sizeNumber18px18px
Description
The font size of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-font-weightNumber500500
Description
The font weight of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-content-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid configurator content.
+
$kendo-pivotgrid-configurator-content-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the PivotGrid configurator content.
+
$kendo-pivotgrid-configurator-fields-margin-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal margin of the PivotGrid configurator fields.
+
$kendo-pivotgrid-configurator-fields-margin-yCalculationcalc( #{$kendo-pivotgrid-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The vertical margin of the PivotGrid configurator fields.
+
$kendo-pivotgrid-configurator-vertical-widthNumber320px320px
Description
The default width of the PivotGrid vertical configurator.
+
$kendo-pivotgrid-configurator-horizontal-heightNumber420px420px
Description
The default height of the PivotGrid horizontal configurator.
+
$kendo-pivotgrid-configurator-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-header-bgNullnullnull
Description
The background color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-borderNullnullnull
Description
The border color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-shadowStringk-elevation(3)var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-end-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The end shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-start-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The start shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-top-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The top shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-bottom-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The bottom shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-button-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the PivotGrid configurator button.
+
$kendo-pivotgrid-configurator-button-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the PivotGrid configurator button.
+
$kendo-pivotgrid-configurator-button-border-widthNumber1px1px
Description
The border width of the PivotGrid configurator button.
+
$kendo-pivotgrid-configurator-button-sizeCalculationcalc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) )calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
Description
The size of the PivotGrid configurator button.
+
$kendo-pivotgrid-calculated-field-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-padding-yString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-border-widthNumber1px1px
Description
The border width of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.375rem)
Description
The border radius of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-gapString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The spacing of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-header-bgNullnullnull
Description
The background color of the PivotGrid calculated field header.
+
$kendo-pivotgrid-calculated-field-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the PivotGrid calculated field header.
+
$kendo-pivotgrid-calculated-field-header-borderNullnullnull
Description
The border color of the PivotGrid calculated field header.
+
$kendo-pivotgrid-treeview-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the PivotGrid treeview.
+
$kendo-pivotgrid-treeview-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the PivotGrid treeview.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/bootstrap/docs/customization-prompt.md b/packages/bootstrap/docs/customization-prompt.md index cc74b16b1d1..a50ff36deae 100644 --- a/packages/bootstrap/docs/customization-prompt.md +++ b/packages/bootstrap/docs/customization-prompt.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #212529) -
Description
The text color of the Prompt.
+
Description
The text color of the AIPrompt.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. var(--kendo-color-surface-alt, #ffffff) -
Description
The background color of the Prompt.
+
Description
The background color of the AIPrompt.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, rgba(33, 37, 41, 0.13)) -
Description
The border color of the Prompt.
+
Description
The border color of the AIPrompt.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #212529) -
Description
The text color of the Prompt header.
+
Description
The text color of the AIPrompt header.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. var(--kendo-color-surface-alt, #ffffff) -
Description
The background color of the Prompt header.
+
Description
The background color of the AIPrompt header.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, rgba(33, 37, 41, 0.13)) -
Description
The border color of the Prompt header.
+
Description
The border color of the AIPrompt header.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The vertical padding of the Prompt content.
+
Description
The vertical padding of the AIPrompt content.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The horizontal padding of the Prompt content.
+
Description
The horizontal padding of the AIPrompt content.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The spacing between the items of the Prompt content.
+
Description
The spacing between the items of the AIPrompt content.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #212529) -
Description
The text color of the Prompt content.
+
Description
The text color of the AIPrompt content.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. var(--kendo-color-surface, #f8f9fa) -
Description
The background color of the Prompt content.
+
Description
The background color of the AIPrompt content.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, rgba(33, 37, 41, 0.13)) -
Description
The text border of the Prompt content.
+
Description
The text border of the AIPrompt content.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The spacing between the items of the Prompt content expander.
+
Description
The spacing between the items of the AIPrompt content expander.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The vertical padding of the Prompt suggestion container.
+
Description
The vertical padding of the AIPrompt suggestion container.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The horizontal padding of the AIPrompt suggestion container.
@@ -184,7 +184,7 @@ The following table lists the available variables for customization. var(--kendo-border-radius-md, 0.375rem) -
Description
The border radius of the Prompt suggestion container.
+
Description
The border radius of the AIPrompt suggestion container.
@@ -194,7 +194,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #212529) -
Description
The text color of the Prompt suggestion container.
+
Description
The text color of the AIPrompt suggestion container.
@@ -204,7 +204,7 @@ The following table lists the available variables for customization. var(--kendo-color-app-surface, #ffffff) -
Description
The background color of the Prompt suggestion container.
+
Description
The background color of the AIPrompt suggestion container.
@@ -214,7 +214,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, rgba(33, 37, 41, 0.13)) -
Description
The border color of the Prompt suggestion container.
+
Description
The border color of the AIPrompt suggestion container.
@@ -224,7 +224,7 @@ The following table lists the available variables for customization. var(--kendo-elevation-1, 0px 1px 2px rgba(0, 0, 0, 0.038)) -
Description
The elevation of the Prompt suggestion container.
+
Description
The elevation of the AIPrompt suggestion container.
diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md index d6f45cb7e3f..7321e2a55c9 100644 --- a/packages/bootstrap/docs/customization.md +++ b/packages/bootstrap/docs/customization.md @@ -4198,6 +4198,136 @@ The following table lists the available variables for customizing the Bootstrap +### ChartWizard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chart-wizard-icon-area-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #0d6efd)
Description
The color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-bgStringif($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)var(--kendo-color-primary-subtle, #cfe2ff)
Description
The background color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-border-radiusStringk-border-radius(sm)var(--kendo-border-radius-sm, 0.25rem)
Description
The border radius of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-focus-shadowListinset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)inset 0 0 0 1px var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4))
Description
The box shadow of the focused area around the chart type icon.
+
$kendo-chart-wizard-icon-area-selected-shadowListinset 0 0 0 1px $kendo-chart-wizard-icon-area-colorinset 0 0 0 1px var(--kendo-color-primary, #0d6efd)
Description
The box shadow of the selected area around the chart type icon.
+
$kendo-chart-wizard-chart-type-selected-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #0d6efd)
Description
The color of the selected chart type items in the Property panel.
+
$kendo-chart-wizard-preview-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the preview pane.
+
$kendo-chart-wizard-property-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the property pane.
+
$kendo-chart-wizard-chart-type-spacingStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The gap between the chart type items in the Property panel.
+
$kendo-chart-wizard-icon-text-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The gap between the icon area and its text.
+
+ ### Charts @@ -4935,6 +5065,36 @@ The following table lists the available variables for customizing the Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + +
Description
The border color of the hovered Chat quick reply.
$kendo-chat-quick-reply-shadow-blurNumber0px0px
Description
The shadow blur of the focused Chat quick reply.
+
$kendo-chat-quick-reply-shadow-spreadNumber.25rem0.25rem
Description
The shadow spread of the focused Chat quick reply.
+
$kendo-chat-quick-reply-shadow-opacityNumber.50.5
Description
The shadow opacity of the focused Chat quick reply.
+
@@ -14463,7 +14623,7 @@ The following table lists the available variables for customizing the Bootstrap -### Menu +### Map @@ -14481,319 +14641,209 @@ The following table lists the available variables for customizing the Bootstrap - - - - - - - - - - - - - - - - - - - + - - + + - - + - - + - + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - - - - - - - - - - - - - - - - + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
$kendo-menu-popup-padding-xNullnullnull
Description
Horizontal padding of the menu popup.
-
$kendo-menu-popup-padding-yNullnullnull
Description
Vertical padding of the menu popup.
-
$kendo-menu-popup-border-width$kendo-map-border-width Number$kendo-popup-border-width1px0px0px
Description
Width of the border around the menu popup.
+
Description
The border width of the Map.
$kendo-menu-popup-font-size$kendo-map-font-size String var( --kendo-font-size, inherit ) var(--kendo-font-size, inherit)
Description
Font sizes of the menu popup.
+
Description
The font size of the Map.
$kendo-menu-popup-line-height$kendo-map-line-height Stringvar( --kendo-line-height, normal )var( --kendo-line-height, normal )!default var(--kendo-line-height, normal)
Description
Line heights used along with $kendo-font-size.
+
Description
The line height of the Map.
$kendo-menu-popup-bg$kendo-map-font-family String$kendo-popup-bgvar(--kendo-color-surface-alt, #ffffff)var( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The background of the menu popup.
+
Description
The font family of the Map.
$kendo-menu-popup-text$kendo-map-bg String$kendo-popup-textvar(--kendo-color-on-app-surface, #212529)$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The text color of the menu popup.
+
Description
The background color of the Map.
$kendo-menu-popup-border$kendo-map-text String$kendo-popup-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The border color of the menu popup.
+
Description
The text color of the Map.
$kendo-menu-popup-gradientNullnullnull$kendo-map-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The background gradient of the menu popup.
+
Description
The border color of the Map.
$kendo-menu-popup-item-padding-x$kendo-map-navigator-margin String k-spacing(4) var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of the menu item in popup.
+
Description
The margin of the Map navigator.
$kendo-menu-popup-item-padding-y$kendo-map-navigator-padding Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)k-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
Vertical padding of the menu item in popup.
+
Description
The padding of the Map navigator.
$kendo-menu-popup-item-padding-end$kendo-map-navigator-width Calculationcalc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )calc(var(--kendo-spacing-4, 1rem) * 2 + 16px)calc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) )calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The end padding of the menu item in popup.
+
Description
The width of the Map navigator.
$kendo-menu-popup-sm-item-icon-margin-startString$kendo-menu-popup-sm-item-padding-xvar(--kendo-spacing-4, 1rem)$kendo-map-navigator-heightCalculation$kendo-map-navigator-widthcalc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The start margin of the menu item expand icon.
+
Description
The height of the Map navigator.
$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(var(--kendo-spacing-4, 1rem) * 2 + 16px) - var(--kendo-spacing-4, 1rem)/2))$kendo-map-navigator-border-widthNumber1px1px
Description
The end margin of the menu item expand icon.
+
Description
The border width of the Map navigator.
$kendo-menu-popup-item-spacing$kendo-map-zoom-control-margin Stringk-spacing(0)var(--kendo-spacing-0, 0px)k-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacing between the menu items in popup.
+
Description
The margin of the Map zoom control.
$kendo-menu-popup-item-bgNullnullnull$kendo-map-zoom-control-button-padding-xNumber$kendo-button-padding-y0.375rem
Description
The background of the menu item in popup.
+
Description
The horizontal padding of the Map zoom control.
$kendo-menu-popup-item-textNullnullnull$kendo-map-zoom-control-button-padding-yNumber$kendo-map-zoom-control-button-padding-x0.375rem
Description
The text color of the menu item in popup.
+
Description
The vertical padding of the Map zoom control.
$kendo-menu-popup-item-borderNullnullnull$kendo-map-attribution-padding-xString$kendo-padding-sm-xvar(--kendo-spacing-2, 0.5rem)
Description
The border color of the menu item in popup.
+
Description
The horizontal padding of the Map attribution.
$kendo-menu-popup-item-gradientNullnullnull$kendo-map-attribution-padding-yString$kendo-padding-sm-yvar(--kendo-spacing-1, 0.25rem)
Description
The background gradient of the menu item in popup.
+
Description
The vertical padding of the Map attribution.
$kendo-menu-popup-item-hover-bgString$kendo-list-item-hover-bgvar(--kendo-color-base-subtle-hover, #dee2e6)$kendo-map-attribution-font-sizeCalculationcalc( #{$kendo-map-font-size} * .75 )calc(var(--kendo-font-size, inherit) * 0.75)
Description
The background of hovered menu item in popup.
+
Description
The font size of the Map attribution.
$kendo-menu-popup-item-hover-text$kendo-map-attribution-bg String$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #212529)if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 ))color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent)
Description
The text color of hovered menu item in popup.
+
Description
The background color of the Map attribution.
$kendo-menu-popup-item-hover-borderNullnullnull
Description
The border color of hovered menu item in popup.
-
$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The background gradient of hovered menu item in popup.
-
$kendo-menu-popup-item-expanded-bg$kendo-map-marker-fill String$kendo-list-item-selected-bg$kendo-color-primary var(--kendo-color-primary, #0d6efd)
Description
The background of expanded menu item in popup.
-
$kendo-menu-popup-item-expanded-textString$kendo-list-item-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of expanded menu item in popup.
-
$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The border color of expanded menu item in popup.
-
$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The background gradient of expanded menu item in popup.
-
$kendo-menu-popup-item-focus-shadowList$kendo-menu-item-focus-shadowinset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent)
Description
The base shadow of focused menu item in popup.
-
- -### MenuButton - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xNumber$kendo-button-padding-y0.375rem
Description
The horizontal padding of the button arrow in the Menu Button.
+
Description
The fill color of the Map marker.
-### Notification +### Mediaplayer @@ -14811,159 +14861,139 @@ The following table lists the available variables for customizing the Bootstrap - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + - - - - - - - - - - - + - - + - - + + - - + - - + - - + - - + - - + - - + + - - + - + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + +
$kendo-notification-group-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The row-gap between the elements in the Notification group.
-
$kendo-notification-padding-xNumber$alert-padding-x1rem
Description
The horizontal padding of the Notification.
-
$kendo-notification-padding-yNumber$alert-padding-y1rem
Description
The vertical padding of the Notification.
-
$kendo-notification-border-width$kendo-media-player-border-width Number$alert-border-width1px 1px
Description
The width of the border around the Notification.
-
$kendo-notification-border-radiusNumber$alert-border-radius0.375rem
Description
The border radius of the Notification.
+
Description
The border width of the MediaPlayer.
$kendo-notification-font-family$kendo-media-player-font-family String var( --kendo-font-family, inherit ) var(--kendo-font-family, inherit)
Description
The font family of the Notification.
+
Description
The font family of the MediaPlayer.
$kendo-notification-font-size$kendo-media-player-font-size Stringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)var( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Notification.
+
Description
The font size of the MediaPlayer.
$kendo-notification-line-height$kendo-media-player-line-height String var( --kendo-line-height, normal ) var(--kendo-line-height, normal)
Description
The line height of the Notification.
+
Description
The line height of the MediaPlayer.
$kendo-notification-bg$kendo-media-player-bg String $kendo-component-bg var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Notification.
+
Description
The background color of the MediaPlayer.
$kendo-notification-text$kendo-media-player-text String $kendo-component-text var(--kendo-color-on-app-surface, #212529)
Description
The text color of the Notification.
+
Description
The text color of the MediaPlayer.
$kendo-notification-border$kendo-media-player-border String $kendo-component-border var(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the Notification.
+
Description
The border color of the MediaPlayer.
$kendo-notification-shadow$kendo-media-player-titlebar-padding-x String$kendo-popup-shadowvar(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125))k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The box shadow of the Notification.
+
Description
The horizontal padding of the MediaPlayer title.
$kendo-notification-icon-spacing$kendo-media-player-titlebar-padding-y String$kendo-icon-spacingk-spacing(2) var(--kendo-spacing-2, 0.5rem)
Description
The horizontal spacing of the Notification icon.
+
Description
The vertical padding of the MediaPlayer title.
$kendo-notification-theme-colorsMap$kendo-theme-colors
  • primary: var(--kendo-color-primary, #0d6efd)
  • secondary: var(--kendo-color-secondary, #6c757d)
  • tertiary: var(--kendo-color-tertiary, #6f42c1)
  • info: var(--kendo-color-info, #0dcaf0)
  • success: var(--kendo-color-success, #198754)
  • warning: var(--kendo-color-warning, #ffc107)
  • error: var(--kendo-color-error, #dc3545)
  • dark: var(--kendo-color-dark, #212529)
  • light: var(--kendo-color-light, #f8f9fa)
  • inverse: var(--kendo-color-dark, #212529)
$kendo-media-player-titlebar-bgNullnullnull
Description
The theme colors map for the Notification.
+
Description
The background color of the MediaPlayer title.
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )
  • inverse: "color":"var(--kendo-color-inverse-on-subtle, #ffffff)","background-color":"var(--kendo-color-inverse-subtle, #495057)","border":"var(--kendo-color-inverse-emphasis, rgba(33, 37, 41, 0.4))"
  • light: "color":"var(--kendo-color-light-on-subtle, #495057)","background-color":"var(--kendo-color-light-subtle, #ffffff)","border":"var(--kendo-color-light-emphasis, rgba(33, 37, 41, 0.1))"
  • dark: "color":"var(--kendo-color-dark-on-subtle, #ffffff)","background-color":"var(--kendo-color-dark-subtle, #495057)","border":"var(--kendo-color-dark-emphasis, rgba(33, 37, 41, 0.4))"
  • error: "color":"var(--kendo-color-error-on-subtle, #58151c)","background-color":"var(--kendo-color-error-subtle, #f8d7da)","border":"var(--kendo-color-error-emphasis, rgba(220, 53, 69, 0.4))"
  • warning: "color":"var(--kendo-color-warning-on-subtle, #664d03)","background-color":"var(--kendo-color-warning-subtle, #fff3cd)","border":"var(--kendo-color-warning-emphasis, rgba(255, 193, 7, 0.4))"
  • success: "color":"var(--kendo-color-success-on-subtle, #0A3622)","background-color":"var(--kendo-color-success-subtle, #d1e7dd)","border":"var(--kendo-color-success-emphasis, rgba(25, 135, 84, 0.4))"
  • info: "color":"var(--kendo-color-info-on-subtle, #055160)","background-color":"var(--kendo-color-info-subtle, #cff4fc)","border":"var(--kendo-color-info-emphasis, rgba(13, 202, 240, 0.4))"
  • tertiary: "color":"var(--kendo-color-tertiary-on-subtle, #432874)","background-color":"var(--kendo-color-tertiary-subtle, #e2d9f3)","border":"var(--kendo-color-tertiary-emphasis, rgba(111, 66, 193, 0.4))"
  • secondary: "color":"var(--kendo-color-secondary-on-subtle, #2B2F32)","background-color":"var(--kendo-color-secondary-subtle, #dee2e6)","border":"var(--kendo-color-secondary-emphasis, rgba(108, 117, 125, 0.4))"
  • primary: "color":"var(--kendo-color-primary-on-subtle, #052c65)","background-color":"var(--kendo-color-primary-subtle, #cfe2ff)","border":"var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4))"
$kendo-media-player-titlebar-textString$kendo-media-player-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The generated theme colors map for the Notification.
+
Description
The text color of the MediaPlayer title.
+
$kendo-media-player-titlebar-borderNullnullnull
Description
The border color of the MediaPlayer title.
+
$kendo-media-player-titlebar-gradientListif($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 0%, transparent)
Description
The gradient of the MediaPlayer title.
-### Orgchart +### Menu @@ -14981,449 +15011,489 @@ The following table lists the available variables for customizing the Bootstrap - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - + - - + - + - - + - + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - + +
$kendo-orgchart-spacerStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The spacing index of the OrgChart.
-
$kendo-orgchart-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-padding-xNullnullnull
Description
The vertical padding of the OrgChart.
+
Description
Horizontal padding of the menu popup.
$kendo-orgchart-padding-xString$kendo-orgchart-padding-yvar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-padding-yNullnullnull
Description
The horizontal padding of the OrgChart.
+
Description
Vertical padding of the menu popup.
$kendo-orgchart-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)$kendo-menu-popup-border-widthNumber$kendo-popup-border-width1px
Description
The font family of the OrgChart.
+
Description
Width of the border around the menu popup.
$kendo-orgchart-font-size$kendo-menu-popup-font-size String var( --kendo-font-size, inherit ) var(--kendo-font-size, inherit)
Description
The font size of the OrgChart.
+
Description
Font sizes of the menu popup.
$kendo-orgchart-line-height$kendo-menu-popup-line-height String var( --kendo-line-height, normal ) var(--kendo-line-height, normal)
Description
The line height of the OrgChart.
+
Description
Line heights used along with $kendo-font-size.
$kendo-orgchart-bg$kendo-menu-popup-bg String$kendo-component-bg$kendo-popup-bg var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the OrgChart.
+
Description
The background of the menu popup.
$kendo-orgchart-text$kendo-menu-popup-text String$kendo-component-text$kendo-popup-text var(--kendo-color-on-app-surface, #212529)
Description
The text color of the OrgChart.
+
Description
The text color of the menu popup.
$kendo-orgchart-border$kendo-menu-popup-border String$kendo-component-border$kendo-popup-border var(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the OrgChart.
+
Description
The border color of the menu popup.
$kendo-orgchart-node-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-gradientNullnullnull
Description
The spacing of the OrgChart node.
+
Description
The background gradient of the menu popup.
$kendo-orgchart-group-gap$kendo-menu-popup-item-padding-x String$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)k-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacing of the OrgChart group.
+
Description
Horizontal padding of the menu item in popup.
$kendo-orgchart-node-container-gap$kendo-menu-popup-item-padding-y String$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The spacing of the OrgChart node container.
+
Description
Vertical padding of the menu item in popup.
$kendo-orgchart-node-group-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )calc(var(--kendo-spacing-4, 1rem) * 2 + 16px)
Description
The vertical padding of the OrgChart node group.
+
Description
The end padding of the menu item in popup.
$kendo-orgchart-node-group-padding-x$kendo-menu-popup-sm-item-icon-margin-start String$kendo-orgchart-node-group-padding-yvar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-sm-item-padding-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the OrgChart node group.
+
Description
The start margin of the menu item expand icon.
$kendo-orgchart-node-group-border-widthNumber1px1px$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(var(--kendo-spacing-4, 1rem) * 2 + 16px) - var(--kendo-spacing-4, 1rem)/2))
Description
The border width of the OrgChart node group.
+
Description
The end margin of the menu item expand icon.
$kendo-orgchart-node-group-border-radius$kendo-menu-popup-item-spacing Stringk-border-radius(md)var(--kendo-border-radius-md, 0.375rem)k-spacing(0)var(--kendo-spacing-0, 0px)
Description
The border radius of the OrgChart node group.
+
Description
The spacing between the menu items in popup.
$kendo-orgchart-node-group-bgString$kendo-base-bgvar(--kendo-color-surface, #f8f9fa)$kendo-menu-popup-item-bgNullnullnull
Description
The background color of the OrgChart node group.
+
Description
The background of the menu item in popup.
$kendo-orgchart-node-group-textString$kendo-base-textvar(--kendo-color-on-app-surface, #212529)$kendo-menu-popup-item-textNullnullnull
Description
The text color of the OrgChart node group.
+
Description
The text color of the menu item in popup.
$kendo-orgchart-node-group-borderString$kendo-base-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))$kendo-menu-popup-item-borderNullnullnull
Description
The border color of the OrgChart node group.
+
Description
The border color of the menu item in popup.
$kendo-orgchart-node-group-focus-border$kendo-menu-popup-item-gradient Null$kendo-card-focus-bordernull null
Description
The border color of the focused OrgChart node group.
+
Description
The background gradient of the menu item in popup.
$kendo-orgchart-node-group-focus-shadow$kendo-menu-popup-item-hover-bg String$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))$kendo-list-item-hover-bgvar(--kendo-color-base-subtle-hover, #dee2e6)
Description
The shadow of the focused OrgChart node group.
+
Description
The background of hovered menu item in popup.
$kendo-orgchart-node-group-title-font-size$kendo-menu-popup-item-hover-text Stringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #212529)
Description
The font size of the OrgChart node group title.
+
Description
The text color of hovered menu item in popup.
$kendo-orgchart-node-group-title-margin-bottomCalculationcalc( #{$kendo-orgchart-spacer} / 4 )calc(var(--kendo-spacing-6, 1.5rem) / 4)$kendo-menu-popup-item-hover-borderNullnullnull
Description
The bottom margin of the OrgChart node group title.
+
Description
The border color of hovered menu item in popup.
$kendo-orgchart-node-group-title-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The line height of the OrgChart node group title.
+
Description
The background gradient of hovered menu item in popup.
$kendo-orgchart-node-group-subtitle-margin-bottom$kendo-menu-popup-item-expanded-bg String$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-list-item-selected-bgvar(--kendo-color-primary, #0d6efd)
Description
The bottom margin of the OrgChart node group subtitle.
+
Description
The background of expanded menu item in popup.
$kendo-orgchart-node-group-subtitle-font-size$kendo-menu-popup-item-expanded-text Stringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)$kendo-list-item-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The font size of the OrgChart node group subtitle.
+
Description
The text color of expanded menu item in popup.
$kendo-orgchart-node-group-subtitle-textString$kendo-subtle-textvar(--kendo-color-subtle, #596169)$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The line height of the OrgChart node group subtitle.
+
Description
The border color of expanded menu item in popup.
$kendo-orgchart-card-widthNumber300px300px$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The width of the OrgChart Card.
+
Description
The background gradient of expanded menu item in popup.
$kendo-orgchart-card-padding-yNumber$kendo-card-padding-y1rem$kendo-menu-popup-item-focus-shadowList$kendo-menu-item-focus-shadowinset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent)
Description
The vertical padding of the OrgChart Card.
+
Description
The base shadow of focused menu item in popup.
$kendo-orgchart-card-padding-x
+ +### MenuButton + + + + + + + + + + + + + + + + + + - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-x Number$kendo-orgchart-card-padding-y1rem$kendo-button-padding-y0.375rem
Description
The horizontal padding of the OrgChart Card.
+
Description
The horizontal padding of the button arrow in the Menu Button.
$kendo-orgchart-card-border-widthNumber$kendo-card-border-width1px
+ +### Notification + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-notification-group-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The border width of the OrgChart Card.
+
Description
The row-gap between the elements in the Notification group.
$kendo-orgchart-card-shadowNull$kendo-card-shadownull$kendo-notification-padding-xNumber$alert-padding-x1rem
Description
The shadow of the OrgChart Card.
+
Description
The horizontal padding of the Notification.
$kendo-orgchart-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))$kendo-notification-padding-yNumber$alert-padding-y1rem
Description
The shadow of the focused OrgChart Card.
+
Description
The vertical padding of the Notification.
$kendo-orgchart-card-title-margin-bottomStringk-spacing(0)var(--kendo-spacing-0, 0px)$kendo-notification-border-widthNumber$alert-border-width1px
Description
The bottom margin of the OrgChart Card title.
+
Description
The width of the border around the Notification.
$kendo-orgchart-card-title-font-sizeNullnullnull$kendo-notification-border-radiusNumber$alert-border-radius0.375rem
Description
The font size of the OrgChart Card title.
+
Description
The border radius of the Notification.
$kendo-orgchart-card-subtitle-margin-bottom$kendo-notification-font-family Stringk-spacing(0)var(--kendo-spacing-0, 0px)var( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The bottom margin of the OrgChart Card subtitle.
+
Description
The font family of the Notification.
$kendo-orgchart-card-subtitle-font-sizeNullnullnull$kendo-notification-font-sizeStringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)
Description
The font size of the OrgChart Card subtitle.
+
Description
The font size of the Notification.
$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0$kendo-notification-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The border width of the OrgChart Card body.
+
Description
The line height of the Notification.
$kendo-orgchart-card-body-border-colorColortransparenttransparent$kendo-notification-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The border color of the OrgChart Card body.
+
Description
The background color of the Notification.
$kendo-orgchart-card-body-vbox-margin-right$kendo-notification-text Stringk-math-div( $kendo-orgchart-spacer, 2 )var(--kendo-spacing-6, 1.5rem)/2$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The right margin of the OrgChart Card body title wrap.
+
Description
The text color of the Notification.
$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px$kendo-notification-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The min height of the OrgChart Card body title wrap.
+
Description
The border color of the Notification.
$kendo-orgchart-line-sizeNumber1px1px$kendo-notification-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125))
Description
The size of the OrgChart connecting line.
+
Description
The box shadow of the Notification.
$kendo-orgchart-line-fill$kendo-notification-icon-spacing String$kendo-base-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))$kendo-icon-spacingvar(--kendo-spacing-2, 0.5rem)
Description
The fill color of the OrgChart connecting line.
+
Description
The horizontal spacing of the Notification icon.
$kendo-orgchart-line-v-heightNumber25px25px$kendo-notification-theme-colorsMap$kendo-theme-colors
  • primary: var(--kendo-color-primary, #0d6efd)
  • secondary: var(--kendo-color-secondary, #6c757d)
  • tertiary: var(--kendo-color-tertiary, #6f42c1)
  • info: var(--kendo-color-info, #0dcaf0)
  • success: var(--kendo-color-success, #198754)
  • warning: var(--kendo-color-warning, #ffc107)
  • error: var(--kendo-color-error, #dc3545)
  • dark: var(--kendo-color-dark, #212529)
  • light: var(--kendo-color-light, #f8f9fa)
  • inverse: var(--kendo-color-dark, #212529)
Description
The height of the OrgChart connecting line.
+
Description
The theme colors map for the Notification.
+
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )
  • inverse: "color":"var(--kendo-color-inverse-on-subtle, #ffffff)","background-color":"var(--kendo-color-inverse-subtle, #495057)","border":"var(--kendo-color-inverse-emphasis, rgba(33, 37, 41, 0.4))"
  • light: "color":"var(--kendo-color-light-on-subtle, #495057)","background-color":"var(--kendo-color-light-subtle, #ffffff)","border":"var(--kendo-color-light-emphasis, rgba(33, 37, 41, 0.1))"
  • dark: "color":"var(--kendo-color-dark-on-subtle, #ffffff)","background-color":"var(--kendo-color-dark-subtle, #495057)","border":"var(--kendo-color-dark-emphasis, rgba(33, 37, 41, 0.4))"
  • error: "color":"var(--kendo-color-error-on-subtle, #58151c)","background-color":"var(--kendo-color-error-subtle, #f8d7da)","border":"var(--kendo-color-error-emphasis, rgba(220, 53, 69, 0.4))"
  • warning: "color":"var(--kendo-color-warning-on-subtle, #664d03)","background-color":"var(--kendo-color-warning-subtle, #fff3cd)","border":"var(--kendo-color-warning-emphasis, rgba(255, 193, 7, 0.4))"
  • success: "color":"var(--kendo-color-success-on-subtle, #0A3622)","background-color":"var(--kendo-color-success-subtle, #d1e7dd)","border":"var(--kendo-color-success-emphasis, rgba(25, 135, 84, 0.4))"
  • info: "color":"var(--kendo-color-info-on-subtle, #055160)","background-color":"var(--kendo-color-info-subtle, #cff4fc)","border":"var(--kendo-color-info-emphasis, rgba(13, 202, 240, 0.4))"
  • tertiary: "color":"var(--kendo-color-tertiary-on-subtle, #432874)","background-color":"var(--kendo-color-tertiary-subtle, #e2d9f3)","border":"var(--kendo-color-tertiary-emphasis, rgba(111, 66, 193, 0.4))"
  • secondary: "color":"var(--kendo-color-secondary-on-subtle, #2B2F32)","background-color":"var(--kendo-color-secondary-subtle, #dee2e6)","border":"var(--kendo-color-secondary-emphasis, rgba(108, 117, 125, 0.4))"
  • primary: "color":"var(--kendo-color-primary-on-subtle, #052c65)","background-color":"var(--kendo-color-primary-subtle, #cfe2ff)","border":"var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4))"
Description
The generated theme colors map for the Notification.
-### PDFViewer +### Orgchart @@ -15441,831 +15511,799 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - - + - - + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - -
$kendo-pdf-viewer-border-widthNumber1px1px$kendo-orgchart-spacerStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The border width of the PDFViewer.
+
Description
The spacing index of the OrgChart.
$kendo-pdf-viewer-font-family$kendo-orgchart-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the OrgChart.
+
$kendo-orgchart-padding-xString$kendo-orgchart-padding-yvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the OrgChart.
+
$kendo-orgchart-font-family String var( --kendo-font-family, inherit ) var(--kendo-font-family, inherit)
Description
The font family of the PDFViewer.
+
Description
The font family of the OrgChart.
$kendo-pdf-viewer-font-size$kendo-orgchart-font-size String var( --kendo-font-size, inherit ) var(--kendo-font-size, inherit)
Description
The font size of the PDFViewer.
+
Description
The font size of the OrgChart.
$kendo-pdf-viewer-line-height$kendo-orgchart-line-height String var( --kendo-line-height, normal ) var(--kendo-line-height, normal)
Description
The line height of the PDFViewer.
+
Description
The line height of the OrgChart.
$kendo-pdf-viewer-bg$kendo-orgchart-bg String $kendo-component-bg var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PDFViewer.
+
Description
The background color of the OrgChart.
$kendo-pdf-viewer-text$kendo-orgchart-text String $kendo-component-text var(--kendo-color-on-app-surface, #212529)
Description
The text color of the PDFViewer.
+
Description
The text color of the OrgChart.
$kendo-pdf-viewer-border$kendo-orgchart-border String $kendo-component-border var(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the PDFViewer.
+
Description
The border color of the OrgChart.
$kendo-pdf-viewer-toolbar-bgNullnullnull$kendo-orgchart-node-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The background color of the PDFViewer Toolbar.
+
Description
The spacing of the OrgChart node.
$kendo-pdf-viewer-toolbar-textNullnullnull$kendo-orgchart-group-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The text color of the PDFViewer Toolbar.
+
Description
The spacing of the OrgChart group.
$kendo-pdf-viewer-toolbar-borderNullnullnull$kendo-orgchart-node-container-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The border color of the PDFViewer Toolbar.
+
Description
The spacing of the OrgChart node container.
$kendo-pdf-viewer-toolbar-gradientNullnullnull$kendo-orgchart-node-group-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The gradient of the PDFViewer Toolbar.
+
Description
The vertical padding of the OrgChart node group.
$kendo-pdf-viewer-canvas-bg$kendo-orgchart-node-group-padding-x String$kendo-app-bgvar(--kendo-color-surface, #f8f9fa)$kendo-orgchart-node-group-padding-yvar(--kendo-spacing-6, 1.5rem)
Description
The background color of the PDFViewer canvas.
+
Description
The horizontal padding of the OrgChart node group.
$kendo-pdf-viewer-canvas-textNullnullnull$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The text color of the PDFViewer canvas.
+
Description
The border width of the OrgChart node group.
$kendo-pdf-viewer-canvas-borderNullnullnull$kendo-orgchart-node-group-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.375rem)
Description
The border color of the PDFViewer canvas.
+
Description
The border radius of the OrgChart node group.
$kendo-pdf-viewer-page-spacing$kendo-orgchart-node-group-bg Stringk-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)$kendo-base-bgvar(--kendo-color-surface, #f8f9fa)
Description
The spacing of the PDFViewer page.
+
Description
The background color of the OrgChart node group.
$kendo-pdf-viewer-page-bgColorwhitewhite$kendo-orgchart-node-group-textString$kendo-base-textvar(--kendo-color-on-app-surface, #212529)
Description
The background color of the PDFViewer page.
+
Description
The text color of the OrgChart node group.
$kendo-pdf-viewer-page-text$kendo-orgchart-node-group-border String$kendo-component-textvar(--kendo-color-on-app-surface, #212529)$kendo-base-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The text color of the PDFViewer page.
+
Description
The border color of the OrgChart node group.
$kendo-pdf-viewer-page-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))$kendo-orgchart-node-group-focus-borderNull$kendo-card-focus-bordernull
Description
The border color of the PDFViewer page.
+
Description
The border color of the focused OrgChart node group.
$kendo-pdf-viewer-page-shadow$kendo-orgchart-node-group-focus-shadow Stringk-elevation(3)$kendo-card-focus-shadow var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The shadow of the PDFViewer page.
+
Description
The shadow of the focused OrgChart node group.
$kendo-pdf-viewer-search-panel-padding-x$kendo-orgchart-node-group-title-font-size String$kendo-toolbar-md-padding-xvar(--kendo-spacing-2, 0.5rem)var( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The horizontal padding of the PDFViewer search panel.
+
Description
The font size of the OrgChart node group title.
$kendo-pdf-viewer-search-panel-padding-y$kendo-orgchart-node-group-title-margin-bottom Calculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(var(--kendo-spacing-2, 0.5rem) * 2)calc( #{$kendo-orgchart-spacer} / 4 )calc(var(--kendo-spacing-6, 1.5rem) / 4)
Description
The vertical padding of the PDFViewer search panel.
+
Description
The bottom margin of the OrgChart node group title.
$kendo-pdf-viewer-search-panel-spacing$kendo-orgchart-node-group-title-line-height String$kendo-toolbar-md-spacingvar(--kendo-spacing-2, 0.5rem)var( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The spacing of the PDFViewer search panel.
+
Description
The line height of the OrgChart node group title.
$kendo-pdf-viewer-search-panel-border-widthNumber1px1px$kendo-orgchart-node-group-subtitle-margin-bottomString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The border width of the PDFViewer search panel.
+
Description
The bottom margin of the OrgChart node group subtitle.
$kendo-pdf-viewer-search-panel-border-radius$kendo-orgchart-node-group-subtitle-font-size Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)var( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The border radius of the PDFViewer search panel.
+
Description
The font size of the OrgChart node group subtitle.
$kendo-pdf-viewer-search-panel-bg$kendo-orgchart-node-group-subtitle-text String$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)$kendo-subtle-textvar(--kendo-color-subtle, #596169)
Description
The background color of the PDFViewer search panel.
+
Description
The line height of the OrgChart node group subtitle.
$kendo-pdf-viewer-search-panel-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)$kendo-orgchart-card-widthNumber300px300px
Description
The text color of the PDFViewer search panel.
+
Description
The width of the OrgChart Card.
$kendo-pdf-viewer-search-panel-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))$kendo-orgchart-card-padding-yNumber$kendo-card-padding-y1rem
Description
The border color of the PDFViewer search panel.
+
Description
The vertical padding of the OrgChart Card.
$kendo-pdf-viewer-search-panel-shadowNullnullnull$kendo-orgchart-card-padding-xNumber$kendo-orgchart-card-padding-y1rem
Description
The shadow of the PDFViewer search panel.
+
Description
The horizontal padding of the OrgChart Card.
$kendo-pdf-viewer-search-panel-matches-spacingString$kendo-padding-sm-xvar(--kendo-spacing-2, 0.5rem)$kendo-orgchart-card-border-widthNumber$kendo-card-border-width1px
Description
The spacing of the matches container in the PDFViewer search panel.
+
Description
The border width of the OrgChart Card.
$kendo-pdf-viewer-selection-line-heightNumber1.21.2$kendo-orgchart-card-shadowNull$kendo-card-shadownull
Description
The line height of the PDFViewer selection.
+
Description
The shadow of the OrgChart Card.
$kendo-pdf-viewer-search-highlight-bg$kendo-orgchart-card-focus-shadow String$kendo-body-textvar(--kendo-color-on-app-surface, #212529)$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The background color of the PDFViewer highlight.
+
Description
The shadow of the focused OrgChart Card.
$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow$kendo-orgchart-card-title-margin-bottomStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The background color of the PDFViewer highlight mark.
+
Description
The bottom margin of the OrgChart Card title.
$kendo-pdf-viewer-icon-textString$kendo-dropzone-icon-textvar(--kendo-color-subtle, #596169)$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The text color of the PDFViewer icon.
+
Description
The font size of the OrgChart Card title.
- -### Pager - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-pager-padding-x
$kendo-orgchart-card-subtitle-margin-bottom Stringk-spacing(2)var(--kendo-spacing-2, 0.5rem)k-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the Pager.
+
Description
The bottom margin of the OrgChart Card subtitle.
$kendo-pager-sm-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The horizontal padding of the small Pager.
+
Description
The font size of the OrgChart Card subtitle.
$kendo-pager-md-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The horizontal padding of the medium Pager.
+
Description
The border width of the OrgChart Card body.
$kendo-pager-lg-padding-xStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)$kendo-orgchart-card-body-border-colorColortransparenttransparent
Description
The horizontal padding of the large Pager.
+
Description
The border color of the OrgChart Card body.
$kendo-pager-padding-y$kendo-orgchart-card-body-vbox-margin-right String$kendo-pager-padding-xvar(--kendo-spacing-2, 0.5rem)k-math-div( $kendo-orgchart-spacer, 2 )var(--kendo-spacing-6, 1.5rem)/2
Description
The vertical padding of the Pager.
+
Description
The right margin of the OrgChart Card body title wrap.
$kendo-pager-sm-padding-yString$kendo-pager-sm-padding-xvar(--kendo-spacing-1, 0.25rem)$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px
Description
The vertical padding of the small Pager.
+
Description
The min height of the OrgChart Card body title wrap.
$kendo-pager-md-padding-yString$kendo-pager-md-padding-xvar(--kendo-spacing-2, 0.5rem)$kendo-orgchart-line-sizeNumber1px1px
Description
The vertical padding of the medium Pager.
+
Description
The size of the OrgChart connecting line.
$kendo-pager-lg-padding-y$kendo-orgchart-line-fill String$kendo-pager-lg-padding-xvar(--kendo-spacing-2\.5, 0.625rem)$kendo-base-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The vertical padding of the large Pager.
+
Description
The fill color of the OrgChart connecting line.
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286 * 1em + 0.25rem * 2 + 2px)$kendo-orgchart-line-v-heightNumber25px25px
Description
The minimum width of the items in the small Pager.
+
Description
The height of the OrgChart connecting line.
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(var(--kendo-line-height, normal) * 1em + 0.375rem * 2 + 2px)
+ +### PDFViewer + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + -
NameTypeDefault valueComputed value
$kendo-pdf-viewer-border-widthNumber1px1px
Description
The minimum width of the items in the medium Pagers.
+
Description
The border width of the PDFViewer.
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(var(--kendo-line-height, normal) * 1em + 0.5rem * 2 + 2px)$kendo-pdf-viewer-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The minimum width of the items in the large Pagers.
+
Description
The font family of the PDFViewer.
$kendo-pager-sm-item-group-spacing$kendo-pdf-viewer-font-size Stringk-spacing(3.5)var(--kendo-spacing-3\.5, 0.875rem)var( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The margin between the item groups in the small Pager.
+
Description
The font size of the PDFViewer.
$kendo-pager-md-item-group-spacing$kendo-pdf-viewer-line-height Stringk-spacing(4)var(--kendo-spacing-4, 1rem)var( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The margin between the item groups in the medium Pager.
+
Description
The line height of the PDFViewer.
$kendo-pager-lg-item-group-spacing$kendo-pdf-viewer-bg Stringk-spacing(4.5)var(--kendo-spacing-4\.5, 1.125rem)$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The margin between the item groups in the large Pager.
+
Description
The background color of the PDFViewer.
$kendo-pager-border-widthNumber1px1px$kendo-pdf-viewer-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The border width of the Pager.
+
Description
The text color of the PDFViewer.
$kendo-pager-font-family$kendo-pdf-viewer-border Stringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The font family of the Pager.
+
Description
The border color of the PDFViewer.
$kendo-pager-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)$kendo-pdf-viewer-toolbar-bgNullnullnull
Description
The font size of the Pager.
+
Description
The background color of the PDFViewer Toolbar.
$kendo-pager-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)$kendo-pdf-viewer-toolbar-textNullnullnull
Description
The line height of the Pager.
+
Description
The text color of the PDFViewer Toolbar.
$kendo-pager-bgString$kendo-component-header-bgvar(--kendo-color-surface, #f8f9fa)$kendo-pdf-viewer-toolbar-borderNullnullnull
Description
The background color of the Pager.
+
Description
The border color of the PDFViewer Toolbar.
$kendo-pager-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212529)$kendo-pdf-viewer-toolbar-gradientNullnullnull
Description
The text color of the Pager.
+
Description
The gradient of the PDFViewer Toolbar.
$kendo-pager-border$kendo-pdf-viewer-canvas-bg String$kendo-component-header-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))$kendo-app-bgvar(--kendo-color-surface, #f8f9fa)
Description
The border color of the Pager.
+
Description
The background color of the PDFViewer canvas.
$kendo-pager-focus-bg$kendo-pdf-viewer-canvas-text Null null null
Description
The background color of the focused Pager.
+
Description
The text color of the PDFViewer canvas.
$kendo-pager-focus-shadowListinset 0 0 0 2px rgba( $kendo-color-black, .08)inset 0 0 0 2px rgba(0, 0, 0, 0.08)$kendo-pdf-viewer-canvas-borderNullnullnull
Description
The box shadow of the focused Pager.
+
Description
The border color of the PDFViewer canvas.
$kendo-pager-section-spacing$kendo-pdf-viewer-page-spacing Stringk-spacing(4)var(--kendo-spacing-4, 1rem)k-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)
Description
The spacing between the Pager sections.
+
Description
The spacing of the PDFViewer page.
$kendo-pager-item-border-widthNumber1px1px$kendo-pdf-viewer-page-bgColorwhitewhite
Description
The border width of the Pager items.
+
Description
The background color of the PDFViewer page.
$kendo-pager-item-border-radius$kendo-pdf-viewer-page-text Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The border radius of the Pager items.
+
Description
The text color of the PDFViewer page.
$kendo-pager-item-spacingNumber(-1 * $kendo-pager-item-border-width)-1px$kendo-pdf-viewer-page-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The spacing around the Pager items.
+
Description
The border color of the PDFViewer page.
$kendo-pager-item-bg$kendo-pdf-viewer-page-shadow String$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)k-elevation(3)var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The background color of the Pager items.
+
Description
The shadow of the PDFViewer page.
$kendo-pager-item-text$kendo-pdf-viewer-search-panel-padding-x String$kendo-link-textvar(--kendo-color-primary, #0d6efd)$kendo-toolbar-md-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The text color of the Pager items.
+
Description
The horizontal padding of the PDFViewer search panel.
$kendo-pager-item-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(var(--kendo-spacing-2, 0.5rem) * 2)
Description
The border color of the Pager items.
+
Description
The vertical padding of the PDFViewer search panel.
$kendo-pager-item-hover-bg$kendo-pdf-viewer-search-panel-spacing String$kendo-hover-bgvar(--kendo-color-base-subtle-hover, #dee2e6)$kendo-toolbar-md-spacingvar(--kendo-spacing-2, 0.5rem)
Description
The background color of the hovered Pager items.
+
Description
The spacing of the PDFViewer search panel.
$kendo-pager-item-hover-textString$kendo-link-hover-textvar(--kendo-color-primary-hover, #0c64e4)$kendo-pdf-viewer-search-panel-border-widthNumber1px1px
Description
The text color of the hovered Pager items.
+
Description
The border width of the PDFViewer search panel.
$kendo-pager-item-hover-border$kendo-pdf-viewer-search-panel-border-radius String$kendo-hover-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The border color of the hovered Pager items.
+
Description
The border radius of the PDFViewer search panel.
$kendo-pager-item-selected-bg$kendo-pdf-viewer-search-panel-bg String$kendo-selected-bgvar(--kendo-color-primary, #0d6efd)$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the selected Pager items.
+
Description
The background color of the PDFViewer search panel.
$kendo-pager-item-selected-text$kendo-pdf-viewer-search-panel-text String$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the selected Pager items.
+
Description
The text color of the PDFViewer search panel.
$kendo-pager-item-selected-border$kendo-pdf-viewer-search-panel-border String$kendo-pager-item-selected-bgvar(--kendo-color-primary, #0d6efd)$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the selected Pager items.
+
Description
The border color of the PDFViewer search panel.
$kendo-pager-item-focus-opacity$kendo-pdf-viewer-search-panel-shadow Null null null
Description
The opacity of the focused Pager items.
+
Description
The shadow of the PDFViewer search panel.
$kendo-pager-item-focus-bg$kendo-pdf-viewer-search-panel-matches-spacing String$kendo-pager-item-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the focused Pager items.
-
$kendo-pager-item-focus-shadowList0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-color-primary, .25))0 0 0 3px color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent)
Description
The box shadow of the focused Pager items.
-
$kendo-pager-number-border-radiusNumber0px0px
Description
The border radius of the Pager numbers.
-
$kendo-pager-input-widthNumber5em5em$kendo-padding-sm-xvar(--kendo-spacing-2, 0.5rem)
Description
The width of the Inputs in the Pager.
+
Description
The spacing of the matches container in the PDFViewer search panel.
$kendo-pager-sm-dropdown-width$kendo-pdf-viewer-selection-line-height Number5em5em1.21.2
Description
The width of the DropDowns in the small Pager.
+
Description
The line height of the PDFViewer selection.
$kendo-pager-md-dropdown-widthNumber5em5em$kendo-pdf-viewer-search-highlight-bgString$kendo-body-textvar(--kendo-color-on-app-surface, #212529)
Description
The width of the DropDowns in the medium Pager.
+
Description
The background color of the PDFViewer highlight.
$kendo-pager-lg-dropdown-widthNumber6em6em$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow
Description
The width of the DropDowns in the large Pager.
+
Description
The background color of the PDFViewer highlight mark.
$kendo-pager-sizesMap( - sm: ( - padding-x: $kendo-pager-sm-padding-x, - padding-y: $kendo-pager-sm-padding-y, - item-group-spacing: $kendo-pager-sm-item-group-spacing, - item-min-width: $kendo-pager-sm-item-min-width, - pager-dropdown-width: $kendo-pager-sm-dropdown-width - ), - md: ( - padding-x: $kendo-pager-md-padding-x, - padding-y: $kendo-pager-md-padding-y, - item-group-spacing: $kendo-pager-md-item-group-spacing, - item-min-width: $kendo-pager-md-item-min-width, - pager-dropdown-width: $kendo-pager-md-dropdown-width - ), - lg: ( - padding-x: $kendo-pager-lg-padding-x, - padding-y: $kendo-pager-lg-padding-y, - item-group-spacing: $kendo-pager-lg-item-group-spacing, - item-min-width: $kendo-pager-lg-item-min-width, - pager-dropdown-width: $kendo-pager-lg-dropdown-width - ) -)
  • sm: "padding-x":"var(--kendo-spacing-1, 0.25rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","item-group-spacing":"var(--kendo-spacing-3\\.5, 0.875rem)","item-min-width":"calc(1.4285714286 * 1em + 0.25rem * 2 + 2px)","pager-dropdown-width":"5em"
  • md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","item-group-spacing":"var(--kendo-spacing-4, 1rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + 0.375rem * 2 + 2px)","pager-dropdown-width":"5em"
  • lg: "padding-x":"var(--kendo-spacing-2\\.5, 0.625rem)","padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","item-group-spacing":"var(--kendo-spacing-4\\.5, 1.125rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + 0.5rem * 2 + 2px)","pager-dropdown-width":"6em"
$kendo-pdf-viewer-icon-textString$kendo-dropzone-icon-textvar(--kendo-color-subtle, #596169)
Description
The sizes map of the Pager.
+
Description
The text color of the PDFViewer icon.
-### Palette +### Pager @@ -16283,1533 +16321,2755 @@ The following table lists the available variables for customizing the Bootstrap - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-palette-grayMap$_default-palette-gray
  • 1: #f8f9fa
  • 2: #e9ecef
  • 3: #dee2e6
  • 4: #ced4da
  • 5: #bdc4cb
  • 6: #adb5bd
  • 7: #9aa3ac
  • 8: #8b959f
  • 9: #6c757d
  • 10: #596169
  • 11: #495057
  • 12: #343a40
  • 13: #2B2F32
  • 14: #212529
  • 15: #121417
  • white: #ffffff
  • black: #000000
$kendo-pager-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
+
Description
The horizontal padding of the Pager.
$kendo-palette-blueMap$_default-palette-blue
  • 1: #ecf4ff
  • 2: #cfe2ff
  • 3: #b6d4fe
  • 4: #9ec5fe
  • 5: #86b6fe
  • 6: #6ea8fe
  • 7: #3d8bfd
  • 8: #0d6efd
  • 9: #0c64e4
  • 10: #0a58ca
  • 11: #094cae
  • 12: #084298
  • 13: #052c65
  • 14: #012151
  • 15: #031633
$kendo-pager-sm-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The Blue Palette provides colors to the Primary and Series A variable groups.
+
Description
The horizontal padding of the small Pager.
$kendo-palette-yellowMap$_default-palette-yellow
  • 1: #fff9e6
  • 2: #fff3cd
  • 3: #ffecb5
  • 4: #ffe69c
  • 5: #ffe083
  • 6: #ffda6a
  • 7: #ffcd39
  • 8: #ffc107
  • 9: #cc9a06
  • 10: #b38705
  • 11: #997404
  • 12: #806104
  • 13: #664d03
  • 14: #523e02
  • 15: #332701
$kendo-pager-md-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The Yellow Palette provides colors to the Warning and Series F variable groups.
+
Description
The horizontal padding of the medium Pager.
$kendo-palette-redMap$_default-palette-red
  • 1: #fceeef
  • 2: #f8d7da
  • 3: #f5c2c7
  • 4: #f1aeb5
  • 5: #ed969f
  • 6: #ea868f
  • 7: #e35d6a
  • 8: #dc3545
  • 9: #b02a37
  • 10: #9a2530
  • 11: #842029
  • 12: #6e1b23
  • 13: #58151c
  • 14: #421015
  • 15: #2c0b0e
$kendo-pager-lg-padding-xStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The Red Palette provides colors to the Error and Series E variable groups.
+
Description
The horizontal padding of the large Pager.
$kendo-palette-cyanMap$_default-palette-cyan
  • 1: #e7fafe
  • 2: #cff4fc
  • 3: #b7eefa
  • 4: #9eeaf9
  • 5: #86e5f8
  • 6: #6edff6
  • 7: #3dd5f3
  • 8: #0dcaf0
  • 9: #0aa2c0
  • 10: #098da8
  • 11: #087990
  • 12: #076578
  • 13: #055160
  • 14: #04414d
  • 15: #032830
$kendo-pager-padding-yString$kendo-pager-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The Cyan Palette provides colors to the Info variable group.
+
Description
The vertical padding of the Pager.
$kendo-palette-greenMap$_default-palette-green
  • 1: #e8f3ee
  • 2: #d1e7dd
  • 3: #badbcc
  • 4: #a3cfbb
  • 5: #8cc3aa
  • 6: #75b798
  • 7: #5BAE87
  • 8: #479F76
  • 9: #319064
  • 10: #198754
  • 11: #146C43
  • 12: #0F5132
  • 13: #0D442A
  • 14: #0A3622
  • 15: #051b11
$kendo-pager-sm-padding-yString$kendo-pager-sm-padding-xvar(--kendo-spacing-1, 0.25rem)
Description
The Green Palette provides colors to the Success and Series D variable groups.
+
Description
The vertical padding of the small Pager.
$kendo-palette-indigoMap$_default-palette-indigo
  • 1: #f0e7fe
  • 2: #e2d9f3
  • 3: #d3c5ec
  • 4: #c5b3e6
  • 5: #b9a3e1
  • 6: #a98eda
  • 7: #8c68cd
  • 8: #6f42c1
  • 9: #59359a
  • 10: #4e2f89
  • 11: #432874
  • 12: #36215f
  • 13: #2c1a4d
  • 14: #21143b
  • 15: #160d27
$kendo-pager-md-padding-yString$kendo-pager-md-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The Indigo Palette provides colors to the Tertiary and Series B variable groups.
+
Description
The vertical padding of the medium Pager.
$kendo-palette-tealMap$_default-palette-teal
  • 1: #ebfaf6
  • 2: #e8dbfd
  • 3: #d2f4ea
  • 4: #c1f0e2
  • 5: #a6e9d5
  • 6: #79dfc1
  • 7: #4dd4ac
  • 8: #20c997
  • 9: #1aa179
  • 10: #178c69
  • 11: #13795b
  • 12: #10654c
  • 13: #0d503c
  • 14: #0a3e2e
  • 15: #06281e
$kendo-pager-lg-padding-yString$kendo-pager-lg-padding-xvar(--kendo-spacing-2\.5, 0.625rem)
Description
The Teal Palette provides colors to the Series C variable group.
+
Description
The vertical padding of the large Pager.
- -### Panel - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - -
NameTypeDefault valueComputed value
$kendo-panel-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.375rem)
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286 * 1em + 0.25rem * 2 + 2px)
Description
The border radius of the Panel.
+
Description
The minimum width of the items in the small Pager.
$kendo-panel-border-widthNumber1px1px$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(var(--kendo-line-height, normal) * 1em + 0.375rem * 2 + 2px)
Description
The width of the border around the Panel.
+
Description
The minimum width of the items in the medium Pagers.
$kendo-panel-border-styleStringsolidsolid$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(var(--kendo-line-height, normal) * 1em + 0.5rem * 2 + 2px)
Description
The style of the border around the Panel.
+
Description
The minimum width of the items in the large Pagers.
$kendo-panel-header-padding-inline$kendo-pager-sm-item-group-spacing Stringk-spacing(2)var(--kendo-spacing-2, 0.5rem)k-spacing(3.5)var(--kendo-spacing-3\.5, 0.875rem)
Description
The inline padding of the Panel header.
+
Description
The margin between the item groups in the small Pager.
$kendo-panel-header-padding-block$kendo-pager-md-item-group-spacing Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)k-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The block padding of the Panel header.
+
Description
The margin between the item groups in the medium Pager.
$kendo-panel-content-padding-inline$kendo-pager-lg-item-group-spacing Stringk-spacing(2)var(--kendo-spacing-2, 0.5rem)k-spacing(4.5)var(--kendo-spacing-4\.5, 1.125rem)
Description
The inline padding of the Panel content.
+
Description
The margin between the item groups in the large Pager.
$kendo-panel-content-padding-block$kendo-pager-border-widthNumber1px1px
Description
The border width of the Pager.
+
$kendo-pager-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Pager.
+
$kendo-pager-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Pager.
+
$kendo-pager-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Pager.
+
$kendo-pager-bgString$kendo-component-header-bgvar(--kendo-color-surface, #f8f9fa)
Description
The background color of the Pager.
+
$kendo-pager-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the Pager.
+
$kendo-pager-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the Pager.
+
$kendo-pager-focus-bgNullnullnull
Description
The background color of the focused Pager.
+
$kendo-pager-focus-shadowListinset 0 0 0 2px rgba( $kendo-color-black, .08)inset 0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The box shadow of the focused Pager.
+
$kendo-pager-section-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacing between the Pager sections.
+
$kendo-pager-item-border-widthNumber1px1px
Description
The border width of the Pager items.
+
$kendo-pager-item-border-radius String k-spacing(1) var(--kendo-spacing-1, 0.25rem)
Description
The block padding of the Panel content.
+
Description
The border radius of the Pager items.
$kendo-panel-text$kendo-pager-item-spacingNumber(-1 * $kendo-pager-item-border-width)-1px
Description
The spacing around the Pager items.
+
$kendo-pager-item-bg Stringvar(--kendo-component-text, #{$kendo-component-text})var(--kendo-component-text, var(--kendo-color-on-app-surface, #212529))$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The text color of the Panel.
+
Description
The background color of the Pager items.
$kendo-panel-bg$kendo-pager-item-text Stringvar(--kendo-component-bg, #{$kendo-component-bg})var(--kendo-component-bg, var(--kendo-color-surface-alt, #ffffff))$kendo-link-textvar(--kendo-color-primary, #0d6efd)
Description
The background color of the Panel.
+
Description
The text color of the Pager items.
$kendo-panel-border$kendo-pager-item-border Stringvar(--kendo-component-border, #{$kendo-component-border})var(--kendo-component-border, var(--kendo-color-border, rgba(33, 37, 41, 0.13)))$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The color of the border around the Panel.
+
Description
The border color of the Pager items.
- -### Panelbar - - - - - - - - - - - - - - - - - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-panelbar-padding-x
$kendo-pager-item-hover-bg Stringk-spacing(0)var(--kendo-spacing-0, 0px)$kendo-hover-bgvar(--kendo-color-base-subtle-hover, #dee2e6)
Description
The background color of the hovered Pager items.
+
$kendo-pager-item-hover-textString$kendo-link-hover-textvar(--kendo-color-primary-hover, #0c64e4)
Description
The text color of the hovered Pager items.
+
$kendo-pager-item-hover-borderString$kendo-hover-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the hovered Pager items.
+
$kendo-pager-item-selected-bgString$kendo-selected-bgvar(--kendo-color-primary, #0d6efd)
Description
The background color of the selected Pager items.
+
$kendo-pager-item-selected-textString$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected Pager items.
+
$kendo-pager-item-selected-borderString$kendo-pager-item-selected-bgvar(--kendo-color-primary, #0d6efd)
Description
The border color of the selected Pager items.
+
$kendo-pager-item-focus-opacityNullnullnull
Description
The opacity of the focused Pager items.
+
$kendo-pager-item-focus-bgString$kendo-pager-item-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the focused Pager items.
+
$kendo-pager-item-focus-shadowList0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-color-primary, .25))0 0 0 3px color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent)
Description
The box shadow of the focused Pager items.
+
$kendo-pager-number-border-radiusNumber0px0px
Description
The border radius of the Pager numbers.
+
$kendo-pager-input-widthNumber5em5em
Description
The width of the Inputs in the Pager.
+
$kendo-pager-sm-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the small Pager.
+
$kendo-pager-md-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the medium Pager.
+
$kendo-pager-lg-dropdown-widthNumber6em6em
Description
The width of the DropDowns in the large Pager.
+
$kendo-pager-sizesMap( + sm: ( + padding-x: $kendo-pager-sm-padding-x, + padding-y: $kendo-pager-sm-padding-y, + item-group-spacing: $kendo-pager-sm-item-group-spacing, + item-min-width: $kendo-pager-sm-item-min-width, + pager-dropdown-width: $kendo-pager-sm-dropdown-width + ), + md: ( + padding-x: $kendo-pager-md-padding-x, + padding-y: $kendo-pager-md-padding-y, + item-group-spacing: $kendo-pager-md-item-group-spacing, + item-min-width: $kendo-pager-md-item-min-width, + pager-dropdown-width: $kendo-pager-md-dropdown-width + ), + lg: ( + padding-x: $kendo-pager-lg-padding-x, + padding-y: $kendo-pager-lg-padding-y, + item-group-spacing: $kendo-pager-lg-item-group-spacing, + item-min-width: $kendo-pager-lg-item-min-width, + pager-dropdown-width: $kendo-pager-lg-dropdown-width + ) +)
  • sm: "padding-x":"var(--kendo-spacing-1, 0.25rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","item-group-spacing":"var(--kendo-spacing-3\\.5, 0.875rem)","item-min-width":"calc(1.4285714286 * 1em + 0.25rem * 2 + 2px)","pager-dropdown-width":"5em"
  • md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","item-group-spacing":"var(--kendo-spacing-4, 1rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + 0.375rem * 2 + 2px)","pager-dropdown-width":"5em"
  • lg: "padding-x":"var(--kendo-spacing-2\\.5, 0.625rem)","padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","item-group-spacing":"var(--kendo-spacing-4\\.5, 1.125rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + 0.5rem * 2 + 2px)","pager-dropdown-width":"6em"
Description
The sizes map of the Pager.
+
+ +### Palette + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-palette-grayMap$_default-palette-gray
  • 1: #f8f9fa
  • 2: #e9ecef
  • 3: #dee2e6
  • 4: #ced4da
  • 5: #bdc4cb
  • 6: #adb5bd
  • 7: #9aa3ac
  • 8: #8b959f
  • 9: #6c757d
  • 10: #596169
  • 11: #495057
  • 12: #343a40
  • 13: #2B2F32
  • 14: #212529
  • 15: #121417
  • white: #ffffff
  • black: #000000
Description
The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
+
$kendo-palette-blueMap$_default-palette-blue
  • 1: #ecf4ff
  • 2: #cfe2ff
  • 3: #b6d4fe
  • 4: #9ec5fe
  • 5: #86b6fe
  • 6: #6ea8fe
  • 7: #3d8bfd
  • 8: #0d6efd
  • 9: #0c64e4
  • 10: #0a58ca
  • 11: #094cae
  • 12: #084298
  • 13: #052c65
  • 14: #012151
  • 15: #031633
Description
The Blue Palette provides colors to the Primary and Series A variable groups.
+
$kendo-palette-yellowMap$_default-palette-yellow
  • 1: #fff9e6
  • 2: #fff3cd
  • 3: #ffecb5
  • 4: #ffe69c
  • 5: #ffe083
  • 6: #ffda6a
  • 7: #ffcd39
  • 8: #ffc107
  • 9: #cc9a06
  • 10: #b38705
  • 11: #997404
  • 12: #806104
  • 13: #664d03
  • 14: #523e02
  • 15: #332701
Description
The Yellow Palette provides colors to the Warning and Series F variable groups.
+
$kendo-palette-redMap$_default-palette-red
  • 1: #fceeef
  • 2: #f8d7da
  • 3: #f5c2c7
  • 4: #f1aeb5
  • 5: #ed969f
  • 6: #ea868f
  • 7: #e35d6a
  • 8: #dc3545
  • 9: #b02a37
  • 10: #9a2530
  • 11: #842029
  • 12: #6e1b23
  • 13: #58151c
  • 14: #421015
  • 15: #2c0b0e
Description
The Red Palette provides colors to the Error and Series E variable groups.
+
$kendo-palette-cyanMap$_default-palette-cyan
  • 1: #e7fafe
  • 2: #cff4fc
  • 3: #b7eefa
  • 4: #9eeaf9
  • 5: #86e5f8
  • 6: #6edff6
  • 7: #3dd5f3
  • 8: #0dcaf0
  • 9: #0aa2c0
  • 10: #098da8
  • 11: #087990
  • 12: #076578
  • 13: #055160
  • 14: #04414d
  • 15: #032830
Description
The Cyan Palette provides colors to the Info variable group.
+
$kendo-palette-greenMap$_default-palette-green
  • 1: #e8f3ee
  • 2: #d1e7dd
  • 3: #badbcc
  • 4: #a3cfbb
  • 5: #8cc3aa
  • 6: #75b798
  • 7: #5BAE87
  • 8: #479F76
  • 9: #319064
  • 10: #198754
  • 11: #146C43
  • 12: #0F5132
  • 13: #0D442A
  • 14: #0A3622
  • 15: #051b11
Description
The Green Palette provides colors to the Success and Series D variable groups.
+
$kendo-palette-indigoMap$_default-palette-indigo
  • 1: #f0e7fe
  • 2: #e2d9f3
  • 3: #d3c5ec
  • 4: #c5b3e6
  • 5: #b9a3e1
  • 6: #a98eda
  • 7: #8c68cd
  • 8: #6f42c1
  • 9: #59359a
  • 10: #4e2f89
  • 11: #432874
  • 12: #36215f
  • 13: #2c1a4d
  • 14: #21143b
  • 15: #160d27
Description
The Indigo Palette provides colors to the Tertiary and Series B variable groups.
+
$kendo-palette-tealMap$_default-palette-teal
  • 1: #ebfaf6
  • 2: #e8dbfd
  • 3: #d2f4ea
  • 4: #c1f0e2
  • 5: #a6e9d5
  • 6: #79dfc1
  • 7: #4dd4ac
  • 8: #20c997
  • 9: #1aa179
  • 10: #178c69
  • 11: #13795b
  • 12: #10654c
  • 13: #0d503c
  • 14: #0a3e2e
  • 15: #06281e
Description
The Teal Palette provides colors to the Series C variable group.
+
+ +### Panel + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-panel-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.375rem)
Description
The border radius of the Panel.
+
$kendo-panel-border-widthNumber1px1px
Description
The width of the border around the Panel.
+
$kendo-panel-border-styleStringsolidsolid
Description
The style of the border around the Panel.
+
$kendo-panel-header-padding-inlineStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The inline padding of the Panel header.
+
$kendo-panel-header-padding-blockStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The block padding of the Panel header.
+
$kendo-panel-content-padding-inlineStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The inline padding of the Panel content.
+
$kendo-panel-content-padding-blockStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The block padding of the Panel content.
+
$kendo-panel-textStringvar(--kendo-component-text, #{$kendo-component-text})var(--kendo-component-text, var(--kendo-color-on-app-surface, #212529))
Description
The text color of the Panel.
+
$kendo-panel-bgStringvar(--kendo-component-bg, #{$kendo-component-bg})var(--kendo-component-bg, var(--kendo-color-surface-alt, #ffffff))
Description
The background color of the Panel.
+
$kendo-panel-borderStringvar(--kendo-component-border, #{$kendo-component-border})var(--kendo-component-border, var(--kendo-color-border, rgba(33, 37, 41, 0.13)))
Description
The color of the border around the Panel.
+
+ +### Panelbar + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-panelbar-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the PanelBar.
+
$kendo-panelbar-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the PanelBar.
+
$kendo-panelbar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the PanelBar.
+
$kendo-panelbar-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the PanelBar.
+
$kendo-panelbar-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the PanelBar.
+
$kendo-panelbar-border-widthNumber1px1px
Description
The width of the border around the PanelBar.
+
$kendo-panelbar-border-styleStringsolidsolid
Description
The border style around the the PanelBar.
+
$kendo-panelbar-item-border-widthNumber1px1px
Description
The width of the border around the PanelBar items.
+
$kendo-panelbar-item-border-styleStringsolidsolid
Description
The style of the border around the PanelBar items.
+
$kendo-panelbar-header-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the PanelBar header.
+
$kendo-panelbar-header-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the PanelBar header.
+
$kendo-panelbar-item-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the PanelBar items.
+
$kendo-panelbar-item-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the PanelBar items.
+
$kendo-panelbar-item-level-countNumber44
Description
The maximum nesting of the PanelBar items.
+
$kendo-panelbar-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PanelBar.
+
$kendo-panelbar-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the PanelBar.
+
$kendo-panelbar-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the PanelBar.
+
$kendo-panelbar-header-bgString$kendo-panelbar-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PanelBar header.
+
$kendo-panelbar-header-textString$kendo-link-textvar(--kendo-color-primary, #0d6efd)
Description
The text color of the PanelBar header.
+
$kendo-panelbar-header-borderNullnullnull
Description
The border color of the PanelBar header.
+
$kendo-panelbar-header-gradientNullnullnull
Description
The gradient of the PanelBar header.
+
$kendo-panelbar-header-hover-bgStringif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 ))var(--kendo-color-base-subtle-hover, #dee2e6)
Description
The background color of the hovered PanelBar header.
+
$kendo-panelbar-header-hover-textNullnullnull
Description
The text color of the hovered PanelBar header.
+
$kendo-panelbar-header-hover-borderNullnullnull
Description
The border color of the hovered PanelBar header.
+
$kendo-panelbar-header-hover-gradientNullnullnull
Description
The gradient of the hovered PanelBar header.
+
$kendo-panelbar-header-focus-bgNullnullnull
Description
The background color of the focused PanelBar header.
+
$kendo-panelbar-header-focus-textNullnullnull
Description
The text color of the focused PanelBar header.
+
$kendo-panelbar-header-focus-borderNullnullnull
Description
The border color of the focused PanelBar header.
+
$kendo-panelbar-header-focus-gradientNullnullnull
Description
The gradient of the focused PanelBar header.
+
$kendo-panelbar-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent)
Description
The shadow of the focused PanelBar header.
+
$kendo-panelbar-header-hover-focus-bgNullnullnull
Description
The background color of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-hover-focus-textNullnullnull
Description
The text color of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-hover-focus-borderNullnullnull
Description
The border color of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-hover-focus-gradientNullnullnull
Description
The gradient of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-selected-bgString$kendo-selected-bgvar(--kendo-color-primary, #0d6efd)
Description
The background color of the selected PanelBar header.
+
$kendo-panelbar-header-selected-textString$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected PanelBar header.
+
$kendo-panelbar-header-selected-borderNullnullnull
Description
The border color of the selected PanelBar header.
+
$kendo-panelbar-header-selected-gradientNullnullnull
Description
The gradient of the selected PanelBar header.
+
$kendo-panelbar-header-selected-hover-bgStringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg ))var(--kendo-color-primary-hover, #0c64e4)
Description
The background color of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-hover-textNullnullnull
Description
The text color of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-hover-borderNullnullnull
Description
The border color of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-hover-gradientNullnullnull
Description
The gradient of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-focus-bgNullnullnull
Description
The background color of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-focus-textNullnullnull
Description
The text color of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-focus-borderNullnullnull
Description
The border color of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-focus-gradientNullnullnull
Description
The gradient of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-bgNullnullnull
Description
The background color of the selected, hovered and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-textNullnullnull
Description
The text color of the selected, hovered and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-borderNullnullnull
Description
The border color of the selected, hovered and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-gradientNullnullnull
Description
The gradient of the selected, hovered and focused PanelBar header.
+
$kendo-panelbar-item-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, 1 ))var(--kendo-color-base-hover, #ced4da)
Description
The background color of the hovered PanelBar items.
+
$kendo-panelbar-item-hover-textNullnullnull
Description
The text color of the hovered PanelBar items.
+
$kendo-panelbar-item-hover-borderNullnullnull
Description
The border color of the hovered PanelBar items.
+
$kendo-panelbar-item-hover-gradientNullnullnull
Description
The gradient of the hovered PanelBar items.
+
$kendo-panelbar-item-focus-bgNullnullnull
Description
The background color of the focused PanelBar items.
+
$kendo-panelbar-item-focus-textNullnullnull
Description
The text color of the focused PanelBar items.
+
$kendo-panelbar-item-focus-borderNullnullnull
Description
The border color of the focused PanelBar items.
+
$kendo-panelbar-item-focus-gradientNullnullnull
Description
The gradient of the focused PanelBar items.
+
$kendo-panelbar-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent)
Description
The box shadow of the focused PanelBar items.
+
$kendo-panelbar-item-hover-focus-bgNullnullnull
Description
The background color of the focused and hovered PanelBar items.
+
$kendo-panelbar-item-hover-focus-textNullnullnull
Description
The text color of the focused and hovered PanelBar items.
+
$kendo-panelbar-item-hover-focus-borderNullnullnull
Description
The border color of the focused and hovered PanelBar items.
+
$kendo-panelbar-item-hover-focus-gradientNullnullnull
Description
The gradient of the focused and hovered PanelBar items.
+
$kendo-panelbar-item-selected-bgString$kendo-selected-bgvar(--kendo-color-primary, #0d6efd)
Description
The background color of the selected PanelBar items.
+
$kendo-panelbar-item-selected-textString$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected PanelBar items.
+
$kendo-panelbar-item-selected-borderNullnullnull
Description
The border color of the selected PanelBar items.
+
$kendo-panelbar-item-selected-gradientNullnullnull
Description
The horizontal padding of the PanelBar.
+
Description
The gradient of the selected PanelBar items.
$kendo-panelbar-padding-y$kendo-panelbar-item-selected-hover-bg Stringk-spacing(0)var(--kendo-spacing-0, 0px)if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg ))var(--kendo-color-primary-hover, #0c64e4)
Description
The vertical padding of the PanelBar.
+
Description
The background color of the selected and hovered PanelBar items.
$kendo-panelbar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)$kendo-panelbar-item-selected-hover-textNullnullnull
Description
The font family of the PanelBar.
+
Description
The text color of the selected and hovered PanelBar items.
$kendo-panelbar-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)$kendo-panelbar-item-selected-hover-borderNullnullnull
Description
The font size of the PanelBar.
+
Description
The border color of the selected and hovered PanelBar items.
$kendo-panelbar-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)$kendo-panelbar-item-selected-hover-gradientNullnullnull
Description
The line height of the PanelBar.
+
Description
The gradient of the selected and hovered PanelBar items.
$kendo-panelbar-border-widthNumber1px1px$kendo-panelbar-item-selected-focus-bgNullnullnull
Description
The width of the border around the PanelBar.
+
Description
The background color of the selected and focused PanelBar items.
$kendo-panelbar-border-styleStringsolidsolid$kendo-panelbar-item-selected-focus-textNullnullnull
Description
The border style around the the PanelBar.
+
Description
The text color of the selected and focused PanelBar items.
$kendo-panelbar-item-border-widthNumber1px1px$kendo-panelbar-item-selected-focus-borderNullnullnull
Description
The width of the border around the PanelBar items.
+
Description
The border color of the selected and focused PanelBar items.
$kendo-panelbar-item-border-styleStringsolidsolid$kendo-panelbar-item-selected-focus-gradientNullnullnull
Description
The style of the border around the PanelBar items.
+
Description
The gradient of the selected and focused PanelBar items.
$kendo-panelbar-header-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)$kendo-panelbar-item-selected-hover-focus-bgNullnullnull
Description
The horizontal padding of the PanelBar header.
+
Description
The background color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-header-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)$kendo-panelbar-item-selected-hover-focus-textNullnullnull
Description
The vertical padding of the PanelBar header.
+
Description
The text color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)$kendo-panelbar-item-selected-hover-focus-borderNullnullnull
Description
The horizontal padding of the PanelBar items.
+
Description
The border color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)$kendo-panelbar-item-selected-hover-focus-gradientNullnullnull
Description
The vertical padding of the PanelBar items.
+
Description
The gradient of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-level-countNumber44$kendo-panelbar-header-expanded-bgNullnullnull
Description
The maximum nesting of the PanelBar items.
+
Description
The background color of the expanded PanelBar header.
$kendo-panelbar-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)$kendo-panelbar-header-expanded-textNullnullnull
Description
The background color of the PanelBar.
+
Description
The text color of the expanded PanelBar header.
$kendo-panelbar-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)$kendo-panelbar-header-expanded-borderNullnullnull
Description
The text color of the PanelBar.
+
Description
The border color of the expanded PanelBar header.
$kendo-panelbar-border$kendo-panelbar-header-expanded-gradientNullnullnull
Description
The gradient of the expanded PanelBar header.
+
+ +### Picker + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - + - + - - + + + + + + + + + + + + + + + + + + + - - + - - + + - - + + + + + + + + + + - - - - - + + + + - - + - + - - - - - + + + + - - + - + - - - - - + + + + - - + - - - - - + + + + - - + - - + - - + - - + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + - - + - - - - - + + + + - - + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - - + - - + + + + + + + + + + - - + - - + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-picker-bg String$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))$kendo-button-bgvar(--kendo-color-base, #dee2e6)
Description
The border color of the PanelBar.
+
Description
The background color of the Picker components.
$kendo-panelbar-header-bg$kendo-picker-text String$kendo-panelbar-bgvar(--kendo-color-surface-alt, #ffffff)$kendo-button-textvar(--kendo-color-on-base, #212529)
Description
The background color of the PanelBar header.
+
Description
The text color of the Picker components.
$kendo-panelbar-header-text$kendo-picker-border String$kendo-link-textvar(--kendo-color-primary, #0d6efd)$kendo-button-bordervar(--kendo-color-base, #dee2e6)
Description
The text color of the PanelBar header.
+
Description
The border color of the Picker components.
$kendo-panelbar-header-border$kendo-picker-gradient Nullnull$kendo-button-gradient null
Description
The border color of the PanelBar header.
+
Description
The gradient of the Picker components.
$kendo-panelbar-header-gradient$kendo-picker-shadow Null$kendo-button-shadow null
Description
The shadow of the Picker components.
+
$kendo-picker-hover-bgString$kendo-button-hover-bgvar(--kendo-color-base-hover, #ced4da)
Description
The background color of the hovered Picker components.
+
$kendo-picker-hover-textNull$kendo-button-hover-text null
Description
The gradient of the PanelBar header.
+
Description
The text color of the hovered Picker components.
$kendo-panelbar-header-hover-bg$kendo-picker-hover-border Stringif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 ))var(--kendo-color-base-subtle-hover, #dee2e6)$kendo-button-hover-bordervar(--kendo-color-base-hover, #ced4da)
Description
The background color of the hovered PanelBar header.
+
Description
The border color of the hovered Picker components.
$kendo-panelbar-header-hover-text$kendo-picker-hover-gradient Null$kendo-button-hover-gradient null
Description
The gradient of the hovered Picker components.
+
$kendo-picker-hover-shadowNull$kendo-button-hover-shadow null
Description
The text color of the hovered PanelBar header.
+
Description
The shadow of the hovered Picker components.
$kendo-panelbar-header-hover-borderNullnullnull$kendo-picker-focus-bgString$kendo-button-active-bgvar(--kendo-color-base-active, #bdc4cb)
Description
The border color of the hovered PanelBar header.
+
Description
The background color of the focused Picker components.
$kendo-panelbar-header-hover-gradient$kendo-picker-focus-text Nullnull$kendo-button-focus-text null
Description
The gradient of the hovered PanelBar header.
+
Description
The text color of the focused Picker components.
$kendo-panelbar-header-focus-bgNullnullnull$kendo-picker-focus-borderString$kendo-button-focus-bordervar(--kendo-color-base-active, #bdc4cb)
Description
The background color of the focused PanelBar header.
+
Description
The border color of the focused Picker components.
$kendo-panelbar-header-focus-text$kendo-picker-focus-gradient Nullnull$kendo-button-focus-gradient null
Description
The text color of the focused PanelBar header.
+
Description
The gradient of the focused Picker components.
$kendo-panelbar-header-focus-borderNullnullnull$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent)
Description
The border color of the focused PanelBar header.
+
Description
The shadow of the focused Picker components.
$kendo-panelbar-header-focus-gradient$kendo-picker-disabled-bg Null null null
Description
The gradient of the focused PanelBar header.
+
Description
The background color of the disabled Picker components.
$kendo-panelbar-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent)$kendo-picker-disabled-textNullnullnull
Description
The shadow of the focused PanelBar header.
+
Description
The text color of the disabled Picker components.
$kendo-panelbar-header-hover-focus-bg$kendo-picker-disabled-border Null null null
Description
The background color of the focused and hovered PanelBar header.
+
Description
The border color of the disabled Picker components.
$kendo-panelbar-header-hover-focus-text$kendo-picker-disabled-gradient Null null null
Description
The text color of the focused and hovered PanelBar header.
+
Description
The gradient of the disabled Picker components.
$kendo-panelbar-header-hover-focus-border$kendo-picker-disabled-shadow Null null null
Description
The border color of the focused and hovered PanelBar header.
+
Description
The shadow of the disabled Picker components.
$kendo-panelbar-header-hover-focus-gradient$kendo-picker-outline-bg Null null null
Description
The gradient of the focused and hovered PanelBar header.
+
Description
The background color of the outline Picker components.
$kendo-panelbar-header-selected-bg$kendo-picker-outline-text String$kendo-selected-bgvar(--kendo-color-primary, #0d6efd)$kendo-button-textvar(--kendo-color-on-base, #212529)
Description
The background color of the selected PanelBar header.
+
Description
The text color of the outline Picker components.
$kendo-panelbar-header-selected-text$kendo-picker-outline-border String$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-picker-outline-text, .5 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 50%, transparent)
Description
The text color of the selected PanelBar header.
+
Description
The border color of the outline Picker components.
$kendo-panelbar-header-selected-borderNullnullnull$kendo-picker-outline-hover-bgString$kendo-picker-outline-textvar(--kendo-color-on-base, #212529)
Description
The border color of the selected PanelBar header.
+
Description
The background color of the outline hovered Picker components.
$kendo-panelbar-header-selected-gradientNullnullnull$kendo-picker-outline-hover-textStringif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))var(--kendo-color-base-subtle, #e9ecef)
Description
The gradient of the selected PanelBar header.
+
Description
The text color of the outline hovered Picker components.
$kendo-panelbar-header-selected-hover-bg$kendo-picker-outline-hover-border Stringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg ))var(--kendo-color-primary-hover, #0c64e4)$kendo-picker-outline-hover-bgvar(--kendo-color-on-base, #212529)
Description
The background color of the selected and hovered PanelBar header.
+
Description
The border color of the outline hovered Picker components.
$kendo-panelbar-header-selected-hover-text$kendo-picker-outline-focus-bg Null null null
Description
The text color of the selected and hovered PanelBar header.
+
Description
The background color of the outline focused Picker components.
$kendo-panelbar-header-selected-hover-border$kendo-picker-outline-focus-text Null null null
Description
The border color of the selected and hovered PanelBar header.
+
Description
The text color of the outline focused Picker components.
$kendo-panelbar-header-selected-hover-gradient$kendo-picker-outline-focus-border Null null null
Description
The gradient of the selected and hovered PanelBar header.
+
Description
The border color of the outline focused Picker components.
$kendo-panelbar-header-selected-focus-bgNullnullnull$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent)
Description
The background color of the selected and focused PanelBar header.
+
Description
The shadow of the outline focused Picker components.
$kendo-panelbar-header-selected-focus-text$kendo-picker-outline-hover-focus-bg Null null null
Description
The text color of the selected and focused PanelBar header.
+
Description
The background color of the outline hovered and focused Picker components.
$kendo-panelbar-header-selected-focus-border$kendo-picker-outline-hover-focus-text Null null null
Description
The border color of the selected and focused PanelBar header.
+
Description
The text color of the outline hovered and focused Picker components.
$kendo-panelbar-header-selected-focus-gradient$kendo-picker-outline-hover-focus-border Null null null
Description
The gradient of the selected and focused PanelBar header.
+
Description
The border color of the outline hovered and focused Picker components.
$kendo-panelbar-header-selected-hover-focus-bg$kendo-picker-flat-bg Null null null
Description
The background color of the selected, hovered and focused PanelBar header.
+
Description
The background color of the flat Picker components.
$kendo-panelbar-header-selected-hover-focus-textNullnullnull$kendo-picker-flat-textString$kendo-button-textvar(--kendo-color-on-base, #212529)
Description
The text color of the selected, hovered and focused PanelBar header.
+
Description
The text color of the flat Picker components.
$kendo-panelbar-header-selected-hover-focus-borderNullnullnull$kendo-picker-flat-borderString$kendo-button-bordervar(--kendo-color-base, #dee2e6)
Description
The border color of the selected, hovered and focused PanelBar header.
+
Description
The border color of the flat Picker components.
$kendo-panelbar-header-selected-hover-focus-gradientNullnullnull$kendo-picker-flat-hover-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-text, .08 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 8%, transparent)
Description
The gradient of the selected, hovered and focused PanelBar header.
+
Description
The background color of the flat hovered Picker components.
$kendo-panelbar-item-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, 1 ))var(--kendo-color-base-hover, #ced4da)$kendo-picker-flat-hover-textNullnullnull
Description
The background color of the hovered PanelBar items.
+
Description
The text color of the flat hovered Picker components.
$kendo-panelbar-item-hover-text$kendo-picker-flat-hover-border Null null null
Description
The text color of the hovered PanelBar items.
+
Description
The border color of the flat hovered Picker components.
$kendo-panelbar-item-hover-border$kendo-picker-flat-focus-bg Null null null
Description
The border color of the hovered PanelBar items.
+
Description
The background color of the flat focused Picker components.
$kendo-panelbar-item-hover-gradient$kendo-picker-flat-focus-text Null null null
Description
The gradient of the hovered PanelBar items.
+
Description
The text color of the flat focused Picker components.
$kendo-panelbar-item-focus-bg$kendo-picker-flat-focus-border Null null null
Description
The background color of the focused PanelBar items.
+
Description
The border color of the flat focused Picker components.
$kendo-panelbar-item-focus-text$kendo-picker-flat-focus-shadowList$kendo-picker-focus-shadow0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent)
Description
The shadow of the flat focused Picker components.
+
$kendo-picker-flat-hover-focus-bg Null null null
Description
The text color of the focused PanelBar items.
+
Description
The background color of the flat hovered and focused Picker components.
$kendo-panelbar-item-focus-border$kendo-picker-flat-hover-focus-text Null null null
Description
The border color of the focused PanelBar items.
+
Description
The text color of the flat hovered and focused Picker components.
$kendo-panelbar-item-focus-gradient$kendo-picker-flat-hover-focus-border Null null null
Description
The gradient of the focused PanelBar items.
+
Description
The border color of the flat hovered and focused Picker components.
$kendo-panelbar-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent)
+ +### Pivotgrid + + + + + + + + + + + + + + + + + + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - + - - + + - - + + + + + + + + + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - -
NameTypeDefault valueComputed value
$kendo-pivotgrid-spacerStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The box shadow of the focused PanelBar items.
+
Description
The spacer of the PivotGrid.
$kendo-panelbar-item-hover-focus-bg$kendo-pivotgrid-padding-x Null null null
Description
The background color of the focused and hovered PanelBar items.
+
Description
The horizontal padding of the PivotGrid.
$kendo-panelbar-item-hover-focus-text$kendo-pivotgrid-padding-y Null null null
Description
The text color of the focused and hovered PanelBar items.
+
Description
The vertical of the PivotGrid.
$kendo-panelbar-item-hover-focus-borderNullnullnull$kendo-pivotgrid-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The border color of the focused and hovered PanelBar items.
+
Description
The font family of the PivotGrid.
$kendo-panelbar-item-hover-focus-gradientNullnullnull$kendo-pivotgrid-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The gradient of the focused and hovered PanelBar items.
+
Description
The font size of the PivotGrid.
$kendo-panelbar-item-selected-bg$kendo-pivotgrid-line-height String$kendo-selected-bgvar(--kendo-color-primary, #0d6efd)var( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The background color of the selected PanelBar items.
+
Description
The line height of the PivotGrid.
$kendo-panelbar-item-selected-text$kendo-pivotgrid-border-widthNumber1px1px
Description
The border width of the PivotGrid.
+
$kendo-pivotgrid-icon-spacing String$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The text color of the selected PanelBar items.
+
Description
The icon spacing of the PivotGrid.
$kendo-panelbar-item-selected-borderNullnullnull$kendo-pivotgrid-row-header-widthNumber300px300px
Description
The border color of the selected PanelBar items.
+
Description
The default width of the PivotGrid row header.
$kendo-panelbar-item-selected-gradientNullnullnull$kendo-pivotgrid-column-header-heightNumber75px75px
Description
The gradient of the selected PanelBar items.
+
Description
The default height of the PivotGrid column header.
$kendo-panelbar-item-selected-hover-bgStringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg ))var(--kendo-color-primary-hover, #0c64e4)$kendo-pivotgrid-cell-padding-xNumber$kendo-table-md-cell-padding-x0.5rem
Description
The background color of the selected and hovered PanelBar items.
+
Description
The horizontal padding of the PivotGrid cell.
$kendo-panelbar-item-selected-hover-textNullnullnull$kendo-pivotgrid-cell-padding-yNumber$kendo-table-md-cell-padding-y0.5rem
Description
The text color of the selected and hovered PanelBar items.
+
Description
The vertical padding of the PivotGrid cell.
$kendo-panelbar-item-selected-hover-borderNullnullnull$kendo-pivotgrid-cell-border-widthNumber1px1px
Description
The border color of the selected and hovered PanelBar items.
+
Description
The border width of the PivotGrid cell.
$kendo-panelbar-item-selected-hover-gradientNullnullnull$kendo-pivotgrid-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The gradient of the selected and hovered PanelBar items.
+
Description
The background color of the PivotGrid.
$kendo-panelbar-item-selected-focus-bgNullnullnull$kendo-pivotgrid-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The background color of the selected and focused PanelBar items.
+
Description
The text color of the PivotGrid.
$kendo-panelbar-item-selected-focus-textNullnullnull$kendo-pivotgrid-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The text color of the selected and focused PanelBar items.
+
Description
The border color of the PivotGrid.
$kendo-panelbar-item-selected-focus-borderNullnullnull$kendo-pivotgrid-alt-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 ))var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2))
Description
The border color of the selected and focused PanelBar items.
+
Description
The alt border color of the PivotGrid.
$kendo-panelbar-item-selected-focus-gradientNullnullnull$kendo-pivotgrid-headers-bgString$kendo-component-header-bgvar(--kendo-color-surface, #f8f9fa)
Description
The gradient of the selected and focused PanelBar items.
+
Description
The background color of the PivotGrid header.
$kendo-panelbar-item-selected-hover-focus-bgNullnullnull$kendo-pivotgrid-headers-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212529)
Description
The background color of the selected, hovered and focused PanelBar items.
+
Description
The text color of the PivotGrid header.
$kendo-panelbar-item-selected-hover-focus-textNullnullnull$kendo-pivotgrid-headers-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The text color of the selected, hovered and focused PanelBar items.
+
Description
The border color of the PivotGrid header.
$kendo-panelbar-item-selected-hover-focus-borderNullnullnull$kendo-pivotgrid-total-bgStringif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 ))var(--kendo-color-base-subtle, #e9ecef)
Description
The border color of the selected, hovered and focused PanelBar items.
+
Description
The background color of the PivotGrid total cells.
$kendo-panelbar-item-selected-hover-focus-gradientNullnullnull$kendo-pivotgrid-total-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212529)
Description
The gradient of the selected, hovered and focused PanelBar items.
+
Description
The text color of the PivotGrid total cells.
$kendo-panelbar-header-expanded-bgNullnullnull$kendo-pivotgrid-total-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The background color of the expanded PanelBar header.
+
Description
The border color of the PivotGrid total cells.
$kendo-panelbar-header-expanded-textNullnullnull$kendo-pivotgrid-hover-bgStringif($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% ))var(--kendo-color-base-subtle-hover, #dee2e6)
Description
The text color of the expanded PanelBar header.
+
Description
The hover background color of the PivotGrid.
$kendo-panelbar-header-expanded-border$kendo-pivotgrid-hover-text Null null null
Description
The border color of the expanded PanelBar header.
+
Description
The hover text color of the PivotGrid.
$kendo-panelbar-header-expanded-gradient$kendo-pivotgrid-hover-border Null null null
Description
The gradient of the expanded PanelBar header.
+
Description
The hover border color of the PivotGrid.
- -### Picker - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - - - - + + + + + + - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - @@ -18499,7 +19759,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18509,7 +19769,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18519,7 +19779,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18529,7 +19789,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18539,7 +19799,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18549,7 +19809,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18559,7 +19819,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18569,7 +19829,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18579,7 +19839,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18589,7 +19849,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18599,7 +19859,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18609,7 +19869,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18619,7 +19879,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18629,7 +19889,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18639,7 +19899,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18649,7 +19909,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18659,7 +19919,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18669,7 +19929,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18679,7 +19939,7 @@ The following table lists the available variables for customizing the Bootstrap - @@ -18689,7 +19949,7 @@ The following table lists the available variables for customizing the Bootstrap - diff --git a/packages/bootstrap/package.json b/packages/bootstrap/package.json index f1fdd1f596c..23d546f562b 100644 --- a/packages/bootstrap/package.json +++ b/packages/bootstrap/package.json @@ -1,7 +1,7 @@ { "name": "@progress/kendo-theme-bootstrap", "description": "Bootstrap theme for Kendo UI", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "author": "Progress", "license": "Apache-2.0", "keywords": [ @@ -54,9 +54,9 @@ }, "dependencies": { "@progress/kendo-svg-icons": "3.0.0", - "@progress/kendo-theme-core": "8.1.0-dev.2", - "@progress/kendo-theme-default": "8.1.0-dev.2", - "@progress/kendo-theme-utils": "8.1.0-dev.2", + "@progress/kendo-theme-core": "8.2.0-dev.0", + "@progress/kendo-theme-default": "8.2.0-dev.0", + "@progress/kendo-theme-utils": "8.2.0-dev.0", "bootstrap": "5.2.1" }, "directories": { diff --git a/packages/bootstrap/scss/chart-wizard/_index.scss b/packages/bootstrap/scss/chart-wizard/_index.scss new file mode 100644 index 00000000000..c1bcaf00a99 --- /dev/null +++ b/packages/bootstrap/scss/chart-wizard/_index.scss @@ -0,0 +1,57 @@ +@import "../core/_index.scss"; +@import "../utils/_index.scss"; + + +// Module meta +$_kendo-module-meta: ( + name: "chart-wizard", + dependencies: ( + "icon", + "window", + "splitter", + "dataviz", + "expansion-panel", + "grid", + "tabstrip", + "listview", + "forms", + "combobox" + ) +); + + +// Dependencies +@import "../icons/_index.scss"; +@import "../window/_index.scss"; +@import "../splitter/_index.scss"; +@import "../dataviz/_index.scss"; +@import "../expansion-panel/_index.scss"; +@import "../grid/_index.scss"; +@import "../tabstrip/_index.scss"; +@import "../listview/_index.scss"; +@import "../forms/_index.scss"; +@import "../combobox/_index.scss"; + + +// Component +@import "./_variables.scss"; +@import "./_layout.scss"; +@import "./_theme.scss"; + + +// Register +@import "../core/module-system/index.import.scss"; +@include module-register( $_kendo-module-meta... ); + + +// Expose +@mixin kendo-chart-wizard--styles() { + @include module-render( "chart-wizard" ) { + @include kendo-chart-wizard--layout(); + @include kendo-chart-wizard--theme(); + } +} + +@if $kendo-auto-bootstrap { + @include kendo-chart-wizard--styles(); +} diff --git a/packages/bootstrap/scss/chart-wizard/_layout.scss b/packages/bootstrap/scss/chart-wizard/_layout.scss new file mode 100644 index 00000000000..9f8ffd1a5e4 --- /dev/null +++ b/packages/bootstrap/scss/chart-wizard/_layout.scss @@ -0,0 +1,5 @@ +@import "@progress/kendo-theme-default/scss/chart-wizard/_layout.scss"; + +@mixin kendo-chart-wizard--layout() { + @include kendo-chart-wizard--layout-base(); +} diff --git a/packages/bootstrap/scss/chart-wizard/_theme.scss b/packages/bootstrap/scss/chart-wizard/_theme.scss new file mode 100644 index 00000000000..a870e71d7e5 --- /dev/null +++ b/packages/bootstrap/scss/chart-wizard/_theme.scss @@ -0,0 +1,5 @@ +@import "@progress/kendo-theme-default/scss/chart-wizard/_theme.scss"; + +@mixin kendo-chart-wizard--theme() { + @include kendo-chart-wizard--theme-base(); +} diff --git a/packages/bootstrap/scss/chart-wizard/_variables.scss b/packages/bootstrap/scss/chart-wizard/_variables.scss new file mode 100644 index 00000000000..695abcad62f --- /dev/null +++ b/packages/bootstrap/scss/chart-wizard/_variables.scss @@ -0,0 +1,38 @@ +// Chart wizard + +/// The color of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default; +/// The background color of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-bg: if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle) !default; +/// The border radius of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-border-radius: k-border-radius(sm) !default; +/// The padding of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-padding: k-spacing(4) !default; +/// The box shadow of the focused area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis) !default; +/// The box shadow of the selected area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-selected-shadow: inset 0 0 0 1px $kendo-chart-wizard-icon-area-color !default; + +/// The color of the selected chart type items in the Property panel. +/// @group chart-wizard +$kendo-chart-wizard-chart-type-selected-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default; + +/// The padding of the preview pane. +/// @group chart-wizard +$kendo-chart-wizard-preview-pane-padding: k-spacing(4) !default; +/// The padding of the property pane. +/// @group chart-wizard +$kendo-chart-wizard-property-pane-padding: k-spacing(4) !default; + +/// The gap between the chart type items in the Property panel. +/// @group chart-wizard +$kendo-chart-wizard-chart-type-spacing: k-spacing(6) !default; +/// The gap between the icon area and its text. +/// @group chart-wizard +$kendo-chart-wizard-icon-text-gap: k-spacing(3) !default; diff --git a/packages/bootstrap/scss/chat/_variables.scss b/packages/bootstrap/scss/chat/_variables.scss index b41b3fd4089..8a1cf400876 100644 --- a/packages/bootstrap/scss/chat/_variables.scss +++ b/packages/bootstrap/scss/chat/_variables.scss @@ -199,3 +199,13 @@ $kendo-chat-quick-reply-hover-text: $kendo-color-primary-contrast !default; /// The border color of the hovered Chat quick reply. /// @group chat $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default; + +/// The shadow blur of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-blur: 0px !default; +/// The shadow spread of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-spread: .25rem !default; +/// The shadow opacity of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-opacity: .5 !default; diff --git a/packages/bootstrap/scss/index.scss b/packages/bootstrap/scss/index.scss index b8aa9bc22a7..fe7a48d64ca 100644 --- a/packages/bootstrap/scss/index.scss +++ b/packages/bootstrap/scss/index.scss @@ -122,6 +122,7 @@ @import "./splitter/_index.scss"; @import "./tilelayout/_index.scss"; @import "./dock-manager/_index.scss"; +@import "./chart-wizard/_index.scss"; // Data management @@ -293,6 +294,7 @@ @include kendo-splitter--styles(); @include kendo-tile-layout--styles(); @include kendo-dock-manager--styles(); + @include kendo-chart-wizard--styles(); // Data management diff --git a/packages/bootstrap/scss/map/_variables.scss b/packages/bootstrap/scss/map/_variables.scss index 8e2cb927e54..ac28f9c5c4b 100644 --- a/packages/bootstrap/scss/map/_variables.scss +++ b/packages/bootstrap/scss/map/_variables.scss @@ -2,29 +2,69 @@ // Map +/// The border width of the Map. +/// @group map $kendo-map-border-width: 0px !default; +/// The font size of the Map. +/// @group map $kendo-map-font-size: var( --kendo-font-size, inherit ) !default; +/// The line height of the Map. +/// @group map $kendo-map-line-height: var( --kendo-line-height, normal )!default; +/// The font family of the Map. +/// @group map $kendo-map-font-family: var( --kendo-font-family, inherit ) !default; +/// The background color of the Map. +/// @group map $kendo-map-bg: $kendo-component-bg !default; +/// The text color of the Map. +/// @group map $kendo-map-text: $kendo-component-text !default; +/// The border color of the Map. +/// @group map $kendo-map-border: $kendo-component-border !default; +/// The margin of the Map navigator. +/// @group map $kendo-map-navigator-margin: k-spacing(4) !default; +/// The padding of the Map navigator. +/// @group map $kendo-map-navigator-padding: k-spacing(0.5) !default; +/// The width of the Map navigator. +/// @group map $kendo-map-navigator-width: calc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) ) !default; +/// The height of the Map navigator. +/// @group map $kendo-map-navigator-height: $kendo-map-navigator-width !default; +/// The border width of the Map navigator. +/// @group map $kendo-map-navigator-border-width: 1px !default; +/// The margin of the Map zoom control. +/// @group map $kendo-map-zoom-control-margin: k-spacing(4) !default; +/// The horizontal padding of the Map zoom control. +/// @group map $kendo-map-zoom-control-button-padding-x: $kendo-button-padding-y !default; +/// The vertical padding of the Map zoom control. +/// @group map $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-x !default; +/// The horizontal padding of the Map attribution. +/// @group map $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default; +/// The vertical padding of the Map attribution. +/// @group map $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default; +/// The font size of the Map attribution. +/// @group map $kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default; +/// The background color of the Map attribution. +/// @group map $kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) !default; +/// The fill color of the Map marker. +/// @group map $kendo-map-marker-fill: $kendo-color-primary !default; diff --git a/packages/bootstrap/scss/mediaplayer/_variables.scss b/packages/bootstrap/scss/mediaplayer/_variables.scss index f0fc8b315a0..65331474253 100644 --- a/packages/bootstrap/scss/mediaplayer/_variables.scss +++ b/packages/bootstrap/scss/mediaplayer/_variables.scss @@ -1,16 +1,43 @@ // Media player + +/// The border width of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-border-width: 1px !default; +/// The font family of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-font-family: var( --kendo-font-family, inherit ) !default; +/// The font size of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-font-size: var( --kendo-font-size, inherit ) !default; +/// The line height of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-line-height: var( --kendo-line-height, normal ) !default; +/// The background color of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-bg: $kendo-component-bg !default; +/// The text color of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-text: $kendo-component-text !default; +/// The border color of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-border: $kendo-component-border !default; +/// The horizontal padding of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-padding-x: k-spacing(2) !default; +/// The vertical padding of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-padding-y: k-spacing(2) !default; +/// The background color of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-bg: null !default; +/// The text color of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-text: $kendo-media-player-bg !default; +/// The border color of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-border: null !default; +/// The gradient of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default; diff --git a/packages/bootstrap/scss/pivotgrid/_variables.scss b/packages/bootstrap/scss/pivotgrid/_variables.scss index a1fb6f36d4e..5b864c46864 100644 --- a/packages/bootstrap/scss/pivotgrid/_variables.scss +++ b/packages/bootstrap/scss/pivotgrid/_variables.scss @@ -2,101 +2,243 @@ // Pivot grid +/// The spacer of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-spacer: k-spacing(4) !default; +/// The horizontal padding of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-padding-x: null !default; +/// The vertical of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-padding-y: null !default; +/// The font family of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-font-family: var( --kendo-font-family, inherit ) !default; +/// The font size of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-font-size: var( --kendo-font-size, inherit ) !default; +/// The line height of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default; +/// The border width of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-border-width: 1px !default; +/// The icon spacing of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-icon-spacing: k-spacing(1) !default; +/// The default width of the PivotGrid row header. +/// @group pivotgrid $kendo-pivotgrid-row-header-width: 300px !default; +/// The default height of the PivotGrid column header. +/// @group pivotgrid $kendo-pivotgrid-column-header-height: 75px !default; +/// The horizontal padding of the PivotGrid cell. +/// @group pivotgrid $kendo-pivotgrid-cell-padding-x: $kendo-table-md-cell-padding-x !default; +/// The vertical padding of the PivotGrid cell. +/// @group pivotgrid $kendo-pivotgrid-cell-padding-y: $kendo-table-md-cell-padding-y !default; +/// The border width of the PivotGrid cell. +/// @group pivotgrid $kendo-pivotgrid-cell-border-width: 1px !default; +/// The background color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-bg: $kendo-component-bg !default; +/// The text color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-text: $kendo-component-text !default; +/// The border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-border: $kendo-component-border !default; +/// The alt border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 )) !default; +/// The background color of the PivotGrid header. +/// @group pivotgrid $kendo-pivotgrid-headers-bg: $kendo-component-header-bg !default; +/// The text color of the PivotGrid header. +/// @group pivotgrid $kendo-pivotgrid-headers-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid header. +/// @group pivotgrid $kendo-pivotgrid-headers-border: $kendo-component-header-border !default; +/// The background color of the PivotGrid total cells. +/// @group pivotgrid $kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default; +/// The text color of the PivotGrid total cells. +/// @group pivotgrid $kendo-pivotgrid-total-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid total cells. +/// @group pivotgrid $kendo-pivotgrid-total-border: $kendo-component-header-border !default; +/// The hover background color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% )) !default; +/// The hover text color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-hover-text: null !default; +/// The hover border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-hover-border: null !default; +/// The selected background color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default; +/// The selected text color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-selected-text: null !default; +/// The selected border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-selected-border: null !default; +/// The focus shadow of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-focus-shadow: $kendo-list-item-focus-shadow !default; // Pivotgrid Configurator +/// The horizontal padding of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-padding-x: null !default; +/// The vertical padding of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-padding-y: null !default; +/// The border width of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-border-width: 1px !default; +/// The horizontal padding of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-padding-y: calc( #{$kendo-pivotgrid-spacer} * .75 ) !default; +/// The font size of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-font-size: 18px !default; +/// The font weight of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-font-weight: 500 !default; +/// The horizontal padding of the PivotGrid configurator content. +/// @group pivotgrid $kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid configurator content. +/// @group pivotgrid $kendo-pivotgrid-configurator-content-padding-y: k-spacing(1) !default; +/// The horizontal margin of the PivotGrid configurator fields. +/// @group pivotgrid $kendo-pivotgrid-configurator-fields-margin-x: k-spacing(0) !default; +/// The vertical margin of the PivotGrid configurator fields. +/// @group pivotgrid $kendo-pivotgrid-configurator-fields-margin-y: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default; +/// The default width of the PivotGrid vertical configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-vertical-width: 320px !default; +/// The default height of the PivotGrid horizontal configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-horizontal-height: 420px !default; +/// The background color of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-bg: $kendo-component-bg !default; +/// The text color of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-text: $kendo-component-text !default; +/// The border color of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-border: $kendo-component-border !default; +/// The background color of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-bg: null !default; +/// The text color of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-border: null !default; +/// The shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-shadow: k-elevation(3) !default; +/// The end shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-end-shadow: $kendo-pivotgrid-configurator-shadow !default; +/// The start shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-start-shadow: $kendo-pivotgrid-configurator-shadow !default; +/// The top shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-top-shadow: $kendo-pivotgrid-configurator-shadow !default; +/// The bottom shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-bottom-shadow: $kendo-pivotgrid-configurator-shadow !default; +/// The horizontal padding of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-padding-x: k-spacing(1) !default; +/// The vertical padding of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-padding-y: k-spacing(1) !default; +/// The border width of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-border-width: 1px !default; +/// The size of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-size: calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) ) !default; // Calculated fields +/// The horizontal padding of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default; +/// The border width of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-border-width: 1px !default; +/// The border radius of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-border-radius: k-border-radius(md) !default; +/// The spacing of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default; +/// The background color of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-bg: $kendo-component-bg !default; +/// The text color of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-text: $kendo-component-text !default; +/// The border color of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-border: $kendo-component-border !default; +/// The background color of the PivotGrid calculated field header. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-bg: null !default; +/// The text color of the PivotGrid calculated field header. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid calculated field header. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-border: null !default; +/// The horizontal padding of the PivotGrid treeview. +/// @group pivotgrid $kendo-pivotgrid-treeview-padding-x: k-spacing(6) !default; +/// The vertical padding of the PivotGrid treeview. +/// @group pivotgrid $kendo-pivotgrid-treeview-padding-y: k-spacing(0) !default; // Legacy variables diff --git a/packages/bootstrap/scss/prompt/_variables.scss b/packages/bootstrap/scss/prompt/_variables.scss index 7b4c0ed1777..3cbd5c39501 100644 --- a/packages/bootstrap/scss/prompt/_variables.scss +++ b/packages/bootstrap/scss/prompt/_variables.scss @@ -1,66 +1,66 @@ -// Prompt +// AIPrompt -/// The text color of the Prompt. +/// The text color of the AIPrompt. /// @group prompt $kendo-prompt-text: $kendo-component-text !default; -/// The background color of the Prompt. +/// The background color of the AIPrompt. /// @group prompt $kendo-prompt-bg: $kendo-component-bg !default; -/// The border color of the Prompt. +/// The border color of the AIPrompt. /// @group prompt $kendo-prompt-border: $kendo-component-border !default; -/// The text color of the Prompt header. +/// The text color of the AIPrompt header. /// @group prompt $kendo-prompt-header-text: $kendo-component-header-text !default; -/// The background color of the Prompt header. +/// The background color of the AIPrompt header. /// @group prompt $kendo-prompt-header-bg: $kendo-component-bg !default; -/// The border color of the Prompt header. +/// The border color of the AIPrompt header. /// @group prompt $kendo-prompt-header-border: $kendo-component-header-border !default; -/// The vertical padding of the Prompt content. +/// The vertical padding of the AIPrompt content. /// @group prompt $kendo-prompt-content-padding-y: k-spacing(4) !default; -/// The horizontal padding of the Prompt content. +/// The horizontal padding of the AIPrompt content. /// @group prompt $kendo-prompt-content-padding-x: k-spacing(4) !default; -/// The spacing between the items of the Prompt content. +/// The spacing between the items of the AIPrompt content. /// @group prompt $kendo-prompt-content-spacing: k-spacing(4) !default; -/// The text color of the Prompt content. +/// The text color of the AIPrompt content. /// @group prompt $kendo-prompt-content-text: $kendo-component-header-text !default; -/// The background color of the Prompt content. +/// The background color of the AIPrompt content. /// @group prompt $kendo-prompt-content-bg: $kendo-component-header-bg !default; -/// The text border of the Prompt content. +/// The text border of the AIPrompt content. /// @group prompt $kendo-prompt-content-border: $kendo-component-header-border !default; -/// The spacing between the items of the Prompt content expander. +/// The spacing between the items of the AIPrompt content expander. /// @group prompt $kendo-prompt-expander-spacing: k-spacing(2) !default; -/// The vertical padding of the Prompt suggestion container. +/// The vertical padding of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-padding-y: k-spacing(2) !default; -/// The horizontal padding of the Prompt suggestion container. +/// The horizontal padding of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-padding-x: k-spacing(2) !default; -/// The border radius of the Prompt suggestion container. +/// The border radius of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-border-radius: k-border-radius(md) !default; -/// The text color of the Prompt suggestion container. +/// The text color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-text: $kendo-component-text !default; -/// The background color of the Prompt suggestion container. +/// The background color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-bg: $kendo-body-bg !default; -/// The border color of the Prompt suggestion container. +/// The border color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-border: $kendo-component-border !default; -/// The elevation of the Prompt suggestion container. +/// The elevation of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-shadow: k-elevation(1) !default; diff --git a/packages/classic/CHANGELOG.md b/packages/classic/CHANGELOG.md index 2593b775c39..410b7494da3 100644 --- a/packages/classic/CHANGELOG.md +++ b/packages/classic/CHANGELOG.md @@ -3,6 +3,34 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [8.2.0-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.1-dev.0...v8.2.0-dev.0) (2024-07-15) + + +### Features + +* **chart-wizard:** add chart wizard component styles ([fb94657](https://github.com/telerik/kendo-themes/commit/fb9465737f7f7e64a20baefb715be976b0ab5fb6)) +* **chat:** add focus styles on quick replies ([c427ea1](https://github.com/telerik/kendo-themes/commit/c427ea1d65e0d53dd81142d09f54b4632d353833)) + + + + + +## [8.1.1-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.0...v8.1.1-dev.0) (2024-07-08) + +**Note:** Version bump only for package @progress/kendo-theme-classic + + + + + +# [8.1.0](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.2...v8.1.0) (2024-07-03) + +**Note:** Version bump only for package @progress/kendo-theme-classic + + + + + # [8.1.0-dev.2](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.1...v8.1.0-dev.2) (2024-07-01) diff --git a/packages/classic/docs/customization-chart-wizard.md b/packages/classic/docs/customization-chart-wizard.md new file mode 100644 index 00000000000..758877eac21 --- /dev/null +++ b/packages/classic/docs/customization-chart-wizard.md @@ -0,0 +1,148 @@ +--- +title: Customizing ChartWizard +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." +slug: variables_kendothemeclassic_chart-wizard +position: 9 +--- + +# Customizing ChartWizard + +## Variables + +The following table lists the available variables for customization. + +
NameTypeDefault valueComputed value
$kendo-picker-bg
$kendo-pivotgrid-selected-bg String$kendo-button-bgvar(--kendo-color-base, #dee2e6)if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 ))color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent)
Description
The background color of the Picker components.
+
Description
The selected background color of the PivotGrid.
$kendo-picker-textString$kendo-button-textvar(--kendo-color-on-base, #212529)$kendo-pivotgrid-selected-textNullnullnull
Description
The text color of the Picker components.
+
Description
The selected text color of the PivotGrid.
$kendo-picker-borderString$kendo-button-bordervar(--kendo-color-base, #dee2e6)$kendo-pivotgrid-selected-borderNullnullnull
Description
The border color of the Picker components.
+
Description
The selected border color of the PivotGrid.
$kendo-picker-gradientNull$kendo-button-gradientnull$kendo-pivotgrid-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent)
Description
The gradient of the Picker components.
+
Description
The focus shadow of the PivotGrid.
$kendo-picker-shadow$kendo-pivotgrid-configurator-padding-x Null$kendo-button-shadownull null
Description
The shadow of the Picker components.
+
Description
The horizontal padding of the PivotGrid configurator.
$kendo-picker-hover-bgString$kendo-button-hover-bgvar(--kendo-color-base-hover, #ced4da)$kendo-pivotgrid-configurator-padding-yNullnullnull
Description
The background color of the hovered Picker components.
+
Description
The vertical padding of the PivotGrid configurator.
$kendo-picker-hover-textNull$kendo-button-hover-textnull$kendo-pivotgrid-configurator-border-widthNumber1px1px
Description
The text color of the hovered Picker components.
+
Description
The border width of the PivotGrid configurator.
$kendo-picker-hover-border$kendo-pivotgrid-configurator-header-padding-x String$kendo-button-hover-bordervar(--kendo-color-base-hover, #ced4da)$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The border color of the hovered Picker components.
+
Description
The horizontal padding of the PivotGrid configurator header.
$kendo-picker-hover-gradientNull$kendo-button-hover-gradientnull
Description
The gradient of the hovered Picker components.
+ 		$kendo-pivotgrid-configurator-header-padding-yCalculationcalc( #{$kendo-pivotgrid-spacer} * .75 )calc(var(--kendo-spacing-4, 1rem) * 0.75)
Description
The vertical padding of the PivotGrid configurator header.
$kendo-picker-hover-shadowNull$kendo-button-hover-shadownull$kendo-pivotgrid-configurator-header-font-sizeNumber18px18px
Description
The shadow of the hovered Picker components.
+
Description
The font size of the PivotGrid configurator header.
$kendo-picker-focus-bgString$kendo-button-active-bgvar(--kendo-color-base-active, #bdc4cb)$kendo-pivotgrid-configurator-header-font-weightNumber500500
Description
The background color of the focused Picker components.
+
Description
The font weight of the PivotGrid configurator header.
$kendo-picker-focus-textNull$kendo-button-focus-textnull$kendo-pivotgrid-configurator-content-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The text color of the focused Picker components.
+
Description
The horizontal padding of the PivotGrid configurator content.
$kendo-picker-focus-border$kendo-pivotgrid-configurator-content-padding-y String$kendo-button-focus-bordervar(--kendo-color-base-active, #bdc4cb)k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The border color of the focused Picker components.
+
Description
The vertical padding of the PivotGrid configurator content.
$kendo-picker-focus-gradientNull$kendo-button-focus-gradientnull$kendo-pivotgrid-configurator-fields-margin-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The gradient of the focused Picker components.
+
Description
The horizontal margin of the PivotGrid configurator fields.
$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent)$kendo-pivotgrid-configurator-fields-margin-yCalculationcalc( #{$kendo-pivotgrid-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The shadow of the focused Picker components.
+
Description
The vertical margin of the PivotGrid configurator fields.
$kendo-picker-disabled-bgNullnullnull$kendo-pivotgrid-configurator-vertical-widthNumber320px320px
Description
The background color of the disabled Picker components.
+
Description
The default width of the PivotGrid vertical configurator.
$kendo-picker-disabled-textNullnullnull$kendo-pivotgrid-configurator-horizontal-heightNumber420px420px
Description
The text color of the disabled Picker components.
+
Description
The default height of the PivotGrid horizontal configurator.
$kendo-picker-disabled-borderNullnullnull$kendo-pivotgrid-configurator-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The border color of the disabled Picker components.
+
Description
The background color of the PivotGrid configurator.
$kendo-picker-disabled-gradientNullnullnull$kendo-pivotgrid-configurator-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The gradient of the disabled Picker components.
+
Description
The text color of the PivotGrid configurator.
$kendo-picker-disabled-shadowNullnullnull$kendo-pivotgrid-configurator-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The shadow of the disabled Picker components.
+
Description
The border color of the PivotGrid configurator.
$kendo-picker-outline-bg$kendo-pivotgrid-configurator-header-bg Null null null
Description
The background color of the outline Picker components.
+
Description
The background color of the PivotGrid configurator header.
$kendo-picker-outline-text$kendo-pivotgrid-configurator-header-text String$kendo-button-textvar(--kendo-color-on-base, #212529)$kendo-component-header-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the outline Picker components.
+
Description
The text color of the PivotGrid configurator header.
$kendo-picker-outline-borderStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-picker-outline-text, .5 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 50%, transparent)$kendo-pivotgrid-configurator-header-borderNullnullnull
Description
The border color of the outline Picker components.
+
Description
The border color of the PivotGrid configurator header.
$kendo-picker-outline-hover-bg$kendo-pivotgrid-configurator-shadow String$kendo-picker-outline-textvar(--kendo-color-on-base, #212529)k-elevation(3)var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The background color of the outline hovered Picker components.
+
Description
The shadow of the PivotGrid configurator.
$kendo-picker-outline-hover-text$kendo-pivotgrid-configurator-end-shadow Stringif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))var(--kendo-color-base-subtle, #e9ecef)$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The text color of the outline hovered Picker components.
+
Description
The end shadow of the PivotGrid configurator.
$kendo-picker-outline-hover-border$kendo-pivotgrid-configurator-start-shadow String$kendo-picker-outline-hover-bgvar(--kendo-color-on-base, #212529)
Description
The border color of the outline hovered Picker components.
-
$kendo-picker-outline-focus-bgNullnullnull$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The background color of the outline focused Picker components.
+
Description
The start shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-textNullnullnull$kendo-pivotgrid-configurator-top-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The text color of the outline focused Picker components.
+
Description
The top shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-borderNullnullnull$kendo-pivotgrid-configurator-bottom-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The border color of the outline focused Picker components.
+
Description
The bottom shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent)$kendo-pivotgrid-configurator-button-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The shadow of the outline focused Picker components.
+
Description
The horizontal padding of the PivotGrid configurator button.
$kendo-picker-outline-hover-focus-bgNullnullnull$kendo-pivotgrid-configurator-button-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The background color of the outline hovered and focused Picker components.
+
Description
The vertical padding of the PivotGrid configurator button.
$kendo-picker-outline-hover-focus-textNullnullnull$kendo-pivotgrid-configurator-button-border-widthNumber1px1px
Description
The text color of the outline hovered and focused Picker components.
+
Description
The border width of the PivotGrid configurator button.
$kendo-picker-outline-hover-focus-borderNullnullnull$kendo-pivotgrid-configurator-button-sizeCalculationcalc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) )calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
Description
The border color of the outline hovered and focused Picker components.
+
Description
The size of the PivotGrid configurator button.
$kendo-picker-flat-bgNullnullnull$kendo-pivotgrid-calculated-field-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The background color of the flat Picker components.
+
Description
The horizontal padding of the PivotGrid calculated field.
$kendo-picker-flat-text$kendo-pivotgrid-calculated-field-padding-y String$kendo-button-textvar(--kendo-color-on-base, #212529)$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The text color of the flat Picker components.
+
Description
The vertical padding of the PivotGrid calculated field.
$kendo-picker-flat-borderString$kendo-button-bordervar(--kendo-color-base, #dee2e6)$kendo-pivotgrid-calculated-field-border-widthNumber1px1px
Description
The border color of the flat Picker components.
+
Description
The border width of the PivotGrid calculated field.
$kendo-picker-flat-hover-bg$kendo-pivotgrid-calculated-field-border-radius Stringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-text, .08 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 8%, transparent)k-border-radius(md)var(--kendo-border-radius-md, 0.375rem)
Description
The background color of the flat hovered Picker components.
+
Description
The border radius of the PivotGrid calculated field.
$kendo-picker-flat-hover-textNullnullnull$kendo-pivotgrid-calculated-field-gapString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The text color of the flat hovered Picker components.
+
Description
The spacing of the PivotGrid calculated field.
$kendo-picker-flat-hover-borderNullnullnull$kendo-pivotgrid-calculated-field-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The border color of the flat hovered Picker components.
+
Description
The background color of the PivotGrid calculated field.
$kendo-picker-flat-focus-bgNullnullnull$kendo-pivotgrid-calculated-field-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The background color of the flat focused Picker components.
+
Description
The text color of the PivotGrid calculated field.
$kendo-picker-flat-focus-textNullnullnull$kendo-pivotgrid-calculated-field-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The text color of the flat focused Picker components.
+
Description
The border color of the PivotGrid calculated field.
$kendo-picker-flat-focus-border$kendo-pivotgrid-calculated-field-header-bg Null null null
Description
The border color of the flat focused Picker components.
+
Description
The background color of the PivotGrid calculated field header.
$kendo-picker-flat-focus-shadowList$kendo-picker-focus-shadow0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, rgba(33, 37, 41, 0.13)) 50%, transparent)$kendo-pivotgrid-calculated-field-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212529)
Description
The shadow of the flat focused Picker components.
+
Description
The text color of the PivotGrid calculated field header.
$kendo-picker-flat-hover-focus-bg$kendo-pivotgrid-calculated-field-header-border Null null null
Description
The background color of the flat hovered and focused Picker components.
+
Description
The border color of the PivotGrid calculated field header.
$kendo-picker-flat-hover-focus-textNullnullnull$kendo-pivotgrid-treeview-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The text color of the flat hovered and focused Picker components.
+
Description
The horizontal padding of the PivotGrid treeview.
$kendo-picker-flat-hover-focus-borderNullnullnull$kendo-pivotgrid-treeview-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The border color of the flat hovered and focused Picker components.
+
Description
The vertical padding of the PivotGrid treeview.
var(--kendo-color-on-app-surface, #212529)
Description
The text color of the Prompt.
+
Description
The text color of the AIPrompt.
var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Prompt.
+
Description
The background color of the AIPrompt.
var(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the Prompt.
+
Description
The border color of the AIPrompt.
var(--kendo-color-on-app-surface, #212529)
Description
The text color of the Prompt header.
+
Description
The text color of the AIPrompt header.
var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Prompt header.
+
Description
The background color of the AIPrompt header.
var(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the Prompt header.
+
Description
The border color of the AIPrompt header.
var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the Prompt content.
+
Description
The vertical padding of the AIPrompt content.
var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Prompt content.
+
Description
The horizontal padding of the AIPrompt content.
var(--kendo-spacing-4, 1rem)
Description
The spacing between the items of the Prompt content.
+
Description
The spacing between the items of the AIPrompt content.
var(--kendo-color-on-app-surface, #212529)
Description
The text color of the Prompt content.
+
Description
The text color of the AIPrompt content.
var(--kendo-color-surface, #f8f9fa)
Description
The background color of the Prompt content.
+
Description
The background color of the AIPrompt content.
var(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The text border of the Prompt content.
+
Description
The text border of the AIPrompt content.
var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the items of the Prompt content expander.
+
Description
The spacing between the items of the AIPrompt content expander.
var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Prompt suggestion container.
+
Description
The vertical padding of the AIPrompt suggestion container.
var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The horizontal padding of the AIPrompt suggestion container.
var(--kendo-border-radius-md, 0.375rem)
Description
The border radius of the Prompt suggestion container.
+
Description
The border radius of the AIPrompt suggestion container.
var(--kendo-color-on-app-surface, #212529)
Description
The text color of the Prompt suggestion container.
+
Description
The text color of the AIPrompt suggestion container.
var(--kendo-color-app-surface, #ffffff)
Description
The background color of the Prompt suggestion container.
+
Description
The background color of the AIPrompt suggestion container.
var(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the Prompt suggestion container.
+
Description
The border color of the AIPrompt suggestion container.
var(--kendo-elevation-1, 0px 1px 2px rgba(0, 0, 0, 0.038))
Description
The elevation of the Prompt suggestion container.
+
Description
The elevation of the AIPrompt suggestion container.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chart-wizard-icon-area-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #f35800)
Description
The color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-bgStringif($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)var(--kendo-color-primary-subtle, #fff2eb)
Description
The background color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-focus-shadowListinset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)inset 0 0 0 1px var(--kendo-color-primary-emphasis, #ff8b47)
Description
The box shadow of the focused area around the chart type icon.
+
$kendo-chart-wizard-icon-area-selected-shadowListinset 0 0 0 1px $kendo-chart-wizard-icon-area-colorinset 0 0 0 1px var(--kendo-color-primary, #f35800)
Description
The box shadow of the selected area around the chart type icon.
+
$kendo-chart-wizard-chart-type-selected-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #f35800)
Description
The color of the selected chart type items in the Property panel.
+
$kendo-chart-wizard-preview-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the preview pane.
+
$kendo-chart-wizard-property-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the property pane.
+
$kendo-chart-wizard-chart-type-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The gap between the chart type items in the Property panel.
+
$kendo-chart-wizard-icon-text-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The gap between the icon area and its text.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/classic/docs/customization-chat.md b/packages/classic/docs/customization-chat.md index 2c1408cac21..20ec3703918 100644 --- a/packages/classic/docs/customization-chat.md +++ b/packages/classic/docs/customization-chat.md @@ -637,6 +637,36 @@ The following table lists the available variables for customization.
Description
The border color of the hovered Chat quick reply.
+ + $kendo-chat-quick-reply-shadow-blur + Number + 4px + 4px + + +
Description
The shadow blur of the focused Chat quick reply.
+ + + + $kendo-chat-quick-reply-shadow-spread + Number + 0px + 0px + + +
Description
The shadow spread of the focused Chat quick reply.
+ + + + $kendo-chat-quick-reply-shadow-opacity + Number + .75 + 0.75 + + +
Description
The shadow opacity of the focused Chat quick reply.
+ + diff --git a/packages/classic/docs/customization-map.md b/packages/classic/docs/customization-map.md new file mode 100644 index 00000000000..fcbc1fe53a3 --- /dev/null +++ b/packages/classic/docs/customization-map.md @@ -0,0 +1,238 @@ +--- +title: Customizing Map +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." +slug: variables_kendothemeclassic_map +position: 9 +--- + +# Customizing Map + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-map-border-widthNumber0px0px
Description
The border width of the Map.
+
$kendo-map-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Map.
+
$kendo-map-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Map.
+
$kendo-map-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Map.
+
$kendo-map-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Map.
+
$kendo-map-textString$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the Map.
+
$kendo-map-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The border color of the Map.
+
$kendo-map-navigator-marginStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The margin of the Map navigator.
+
$kendo-map-navigator-paddingStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The padding of the Map navigator.
+
$kendo-map-navigator-widthCalculationcalc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) )calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The width of the Map navigator.
+
$kendo-map-navigator-heightCalculation$kendo-map-navigator-widthcalc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The height of the Map navigator.
+
$kendo-map-navigator-border-widthNumber1px1px
Description
The border width of the Map navigator.
+
$kendo-map-zoom-control-marginStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The margin of the Map zoom control.
+
$kendo-map-zoom-control-button-padding-xString$kendo-button-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the Map zoom control.
+
$kendo-map-zoom-control-button-padding-yString$kendo-map-zoom-control-button-padding-xvar(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Map zoom control.
+
$kendo-map-attribution-padding-xString$kendo-padding-sm-xvar(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the Map attribution.
+
$kendo-map-attribution-padding-yString$kendo-padding-sm-yvar(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the Map attribution.
+
$kendo-map-attribution-font-sizeCalculationcalc( #{$kendo-map-font-size} * .75 )calc(var(--kendo-font-size, inherit) * 0.75)
Description
The font size of the Map attribution.
+
$kendo-map-attribution-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 ))color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent)
Description
The background color of the Map attribution.
+
$kendo-map-marker-fillString$kendo-color-primaryvar(--kendo-color-primary, #f35800)
Description
The fill color of the Map marker.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/classic/docs/customization-mediaplayer.md b/packages/classic/docs/customization-mediaplayer.md new file mode 100644 index 00000000000..87ae0143f1c --- /dev/null +++ b/packages/classic/docs/customization-mediaplayer.md @@ -0,0 +1,168 @@ +--- +title: Customizing Mediaplayer +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." +slug: variables_kendothemeclassic_mediaplayer +position: 9 +--- + +# Customizing Mediaplayer + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-media-player-border-widthNumber1px1px
Description
The border width of the MediaPlayer.
+
$kendo-media-player-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the MediaPlayer.
+
$kendo-media-player-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the MediaPlayer.
+
$kendo-media-player-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the MediaPlayer.
+
$kendo-media-player-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the MediaPlayer.
+
$kendo-media-player-textString$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the MediaPlayer.
+
$kendo-media-player-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The border color of the MediaPlayer.
+
$kendo-media-player-titlebar-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the MediaPlayer title.
+
$kendo-media-player-titlebar-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the MediaPlayer title.
+
$kendo-media-player-titlebar-bgNullnullnull
Description
The background color of the MediaPlayer title.
+
$kendo-media-player-titlebar-textString$kendo-media-player-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The text color of the MediaPlayer title.
+
$kendo-media-player-titlebar-borderNullnullnull
Description
The border color of the MediaPlayer title.
+
$kendo-media-player-titlebar-gradientListif($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) ))color-mix(in srgb, var(--kendo-color-on-app-surface, #272727) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #272727) 0%, transparent)
Description
The gradient of the MediaPlayer title.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/classic/docs/customization-pivotgrid.md b/packages/classic/docs/customization-pivotgrid.md new file mode 100644 index 00000000000..76028dd59f5 --- /dev/null +++ b/packages/classic/docs/customization-pivotgrid.md @@ -0,0 +1,748 @@ +--- +title: Customizing Pivotgrid +description: "Refer to the list of the Kendo UI Classic theme variables available for customization." +slug: variables_kendothemeclassic_pivotgrid +position: 9 +--- + +# Customizing Pivotgrid + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-pivotgrid-spacerStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacer of the PivotGrid.
+
$kendo-pivotgrid-padding-xNullnullnull
Description
The horizontal padding of the PivotGrid.
+
$kendo-pivotgrid-padding-yNullnullnull
Description
The vertical of the PivotGrid.
+
$kendo-pivotgrid-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the PivotGrid.
+
$kendo-pivotgrid-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the PivotGrid.
+
$kendo-pivotgrid-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the PivotGrid.
+
$kendo-pivotgrid-border-widthNumber1px1px
Description
The border width of the PivotGrid.
+
$kendo-pivotgrid-icon-spacingStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The icon spacing of the PivotGrid.
+
$kendo-pivotgrid-row-header-widthNumber300px300px
Description
The default width of the PivotGrid row header.
+
$kendo-pivotgrid-column-header-heightNumber75px75px
Description
The default height of the PivotGrid column header.
+
$kendo-pivotgrid-cell-padding-xString$kendo-table-md-cell-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the PivotGrid cell.
+
$kendo-pivotgrid-cell-padding-yString$kendo-table-md-cell-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the PivotGrid cell.
+
$kendo-pivotgrid-cell-border-widthNumber1px1px
Description
The border width of the PivotGrid cell.
+
$kendo-pivotgrid-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PivotGrid.
+
$kendo-pivotgrid-textString$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the PivotGrid.
+
$kendo-pivotgrid-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The border color of the PivotGrid.
+
$kendo-pivotgrid-alt-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 ))var(--kendo-color-border-alt, #b6b6b6)
Description
The alt border color of the PivotGrid.
+
$kendo-pivotgrid-headers-bgString$kendo-component-header-bgvar(--kendo-color-surface, #f0f0f0)
Description
The background color of the PivotGrid header.
+
$kendo-pivotgrid-headers-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the PivotGrid header.
+
$kendo-pivotgrid-headers-borderString$kendo-component-header-bordervar(--kendo-color-border, #cacaca)
Description
The border color of the PivotGrid header.
+
$kendo-pivotgrid-total-bgStringif($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-pivotgrid-bg, 1 ))var(--kendo-color-base, #ebebeb)
Description
The background color of the PivotGrid total cells.
+
$kendo-pivotgrid-total-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the PivotGrid total cells.
+
$kendo-pivotgrid-total-borderString$kendo-component-header-bordervar(--kendo-color-border, #cacaca)
Description
The border color of the PivotGrid total cells.
+
$kendo-pivotgrid-hover-bgStringif($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% ))var(--kendo-color-base-subtle-hover, #ebebeb)
Description
The hover background color of the PivotGrid.
+
$kendo-pivotgrid-hover-textNullnullnull
Description
The hover text color of the PivotGrid.
+
$kendo-pivotgrid-hover-borderNullnullnull
Description
The hover border color of the PivotGrid.
+
$kendo-pivotgrid-selected-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 ))color-mix(in srgb, var(--kendo-color-primary, #f35800) 25%, transparent)
Description
The selected background color of the PivotGrid.
+
$kendo-pivotgrid-selected-textNullnullnull
Description
The selected text color of the PivotGrid.
+
$kendo-pivotgrid-selected-borderNullnullnull
Description
The selected border color of the PivotGrid.
+
$kendo-pivotgrid-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The focus shadow of the PivotGrid.
+
$kendo-pivotgrid-configurator-padding-xNullnullnull
Description
The horizontal padding of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-padding-yNullnullnull
Description
The vertical padding of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-border-widthNumber1px1px
Description
The border width of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-header-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-padding-yCalculationcalc( #{$kendo-pivotgrid-spacer} * .75 )calc(var(--kendo-spacing-4, 1rem) * 0.75)
Description
The vertical padding of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-font-sizeNumber18px18px
Description
The font size of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-font-weightNumber500500
Description
The font weight of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-content-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid configurator content.
+
$kendo-pivotgrid-configurator-content-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the PivotGrid configurator content.
+
$kendo-pivotgrid-configurator-fields-margin-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal margin of the PivotGrid configurator fields.
+
$kendo-pivotgrid-configurator-fields-margin-yCalculationcalc( #{$kendo-pivotgrid-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The vertical margin of the PivotGrid configurator fields.
+
$kendo-pivotgrid-configurator-vertical-widthNumber320px320px
Description
The default width of the PivotGrid vertical configurator.
+
$kendo-pivotgrid-configurator-horizontal-heightNumber420px420px
Description
The default height of the PivotGrid horizontal configurator.
+
$kendo-pivotgrid-configurator-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-textString$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The border color of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-header-bgNullnullnull
Description
The background color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-borderNullnullnull
Description
The border color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-end-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The end shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-start-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The start shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-top-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The top shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-bottom-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The bottom shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-button-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the PivotGrid configurator button.
+
$kendo-pivotgrid-configurator-button-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the PivotGrid configurator button.
+
$kendo-pivotgrid-configurator-button-border-widthNumber1px1px
Description
The border width of the PivotGrid configurator button.
+
$kendo-pivotgrid-configurator-button-sizeCalculationcalc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) )calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
Description
The size of the PivotGrid configurator button.
+
$kendo-pivotgrid-calculated-field-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-padding-yString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-border-widthNumber1px1px
Description
The border width of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-border-radiusStringk-border-radius(sm)var(--kendo-border-radius-sm, 0.125rem)
Description
The border radius of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-gapString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The spacing of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-textString$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The border color of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-header-bgNullnullnull
Description
The background color of the PivotGrid calculated field header.
+
$kendo-pivotgrid-calculated-field-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the PivotGrid calculated field header.
+
$kendo-pivotgrid-calculated-field-header-borderNullnullnull
Description
The border color of the PivotGrid calculated field header.
+
$kendo-pivotgrid-treeview-padding-xCalculationcalc( #{$kendo-pivotgrid-spacer} / 2)calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The horizontal padding of the PivotGrid treeview.
+
$kendo-pivotgrid-treeview-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the PivotGrid treeview.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/classic/docs/customization-prompt.md b/packages/classic/docs/customization-prompt.md index aba346d5043..e3171abc803 100644 --- a/packages/classic/docs/customization-prompt.md +++ b/packages/classic/docs/customization-prompt.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #272727) -
Description
The text color of the Prompt.
+
Description
The text color of the AIPrompt.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. var(--kendo-color-surface-alt, #ffffff) -
Description
The background color of the Prompt.
+
Description
The background color of the AIPrompt.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, #cacaca) -
Description
The border color of the Prompt.
+
Description
The border color of the AIPrompt.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #272727) -
Description
The text color of the Prompt header.
+
Description
The text color of the AIPrompt header.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. var(--kendo-color-surface-alt, #ffffff) -
Description
The background color of the Prompt header.
+
Description
The background color of the AIPrompt header.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, #cacaca) -
Description
The border color of the Prompt header.
+
Description
The border color of the AIPrompt header.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The vertical padding of the Prompt content.
+
Description
The vertical padding of the AIPrompt content.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The horizontal padding of the Prompt content.
+
Description
The horizontal padding of the AIPrompt content.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The spacing between the items of the Prompt content.
+
Description
The spacing between the items of the AIPrompt content.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #272727) -
Description
The text color of the Prompt content.
+
Description
The text color of the AIPrompt content.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. var(--kendo-color-surface, #f0f0f0) -
Description
The background color of the Prompt content.
+
Description
The background color of the AIPrompt content.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, #cacaca) -
Description
The text border of the Prompt content.
+
Description
The text border of the AIPrompt content.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The spacing between the items of the Prompt content expander.
+
Description
The spacing between the items of the AIPrompt content expander.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The vertical padding of the Prompt suggestion container.
+
Description
The vertical padding of the AIPrompt suggestion container.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The horizontal padding of the AIPrompt suggestion container.
@@ -184,7 +184,7 @@ The following table lists the available variables for customization. var(--kendo-border-radius-md, 0.25rem) -
Description
The border radius of the Prompt suggestion container.
+
Description
The border radius of the AIPrompt suggestion container.
@@ -194,7 +194,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #272727) -
Description
The text color of the Prompt suggestion container.
+
Description
The text color of the AIPrompt suggestion container.
@@ -204,7 +204,7 @@ The following table lists the available variables for customization. var(--kendo-color-app-surface, #ffffff) -
Description
The background color of the Prompt suggestion container.
+
Description
The background color of the AIPrompt suggestion container.
@@ -214,7 +214,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, #cacaca) -
Description
The border color of the Prompt suggestion container.
+
Description
The border color of the AIPrompt suggestion container.
@@ -224,7 +224,7 @@ The following table lists the available variables for customization. var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)) -
Description
The elevation of the Prompt suggestion container.
+
Description
The elevation of the AIPrompt suggestion container.
diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md index 13175809515..e8c30ea7335 100644 --- a/packages/classic/docs/customization.md +++ b/packages/classic/docs/customization.md @@ -4229,6 +4229,136 @@ The following table lists the available variables for customizing the Classic th +### ChartWizard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chart-wizard-icon-area-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #f35800)
Description
The color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-bgStringif($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)var(--kendo-color-primary-subtle, #fff2eb)
Description
The background color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-focus-shadowListinset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)inset 0 0 0 1px var(--kendo-color-primary-emphasis, #ff8b47)
Description
The box shadow of the focused area around the chart type icon.
+
$kendo-chart-wizard-icon-area-selected-shadowListinset 0 0 0 1px $kendo-chart-wizard-icon-area-colorinset 0 0 0 1px var(--kendo-color-primary, #f35800)
Description
The box shadow of the selected area around the chart type icon.
+
$kendo-chart-wizard-chart-type-selected-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #f35800)
Description
The color of the selected chart type items in the Property panel.
+
$kendo-chart-wizard-preview-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the preview pane.
+
$kendo-chart-wizard-property-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the property pane.
+
$kendo-chart-wizard-chart-type-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The gap between the chart type items in the Property panel.
+
$kendo-chart-wizard-icon-text-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The gap between the icon area and its text.
+
+ ### Charts @@ -4966,6 +5096,36 @@ The following table lists the available variables for customizing the Classic th + + + + + + + + + + + + + + + + + + + + + + + + + + +
Description
The border color of the hovered Chat quick reply.
$kendo-chat-quick-reply-shadow-blurNumber4px4px
Description
The shadow blur of the focused Chat quick reply.
+
$kendo-chat-quick-reply-shadow-spreadNumber0px0px
Description
The shadow spread of the focused Chat quick reply.
+
$kendo-chat-quick-reply-shadow-opacityNumber.750.75
Description
The shadow opacity of the focused Chat quick reply.
+
@@ -14624,7 +14784,7 @@ The following table lists the available variables for customizing the Classic th -### Menu +### Map @@ -14642,319 +14802,209 @@ The following table lists the available variables for customizing the Classic th - - - - - - - - - - - - - - - - - - - + - - + + - - + - - + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - - - - - - - - - - - - - - - - + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
$kendo-menu-popup-padding-xNullnullnull
Description
Horizontal padding of the menu popup.
-
$kendo-menu-popup-padding-yNullnullnull
Description
Vertical padding of the menu popup.
-
$kendo-menu-popup-border-width$kendo-map-border-width Number$kendo-popup-border-width1px0px0px
Description
Width of the border around the menu popup.
+
Description
The border width of the Map.
$kendo-menu-popup-font-size$kendo-map-font-size String var( --kendo-font-size, inherit ) var(--kendo-font-size, inherit)
Description
Font sizes of the menu popup.
+
Description
The font size of the Map.
$kendo-menu-popup-line-height$kendo-map-line-height String var( --kendo-line-height, normal ) var(--kendo-line-height, normal)
Description
Line heights used along with $kendo-font-size.
+
Description
The line height of the Map.
$kendo-menu-popup-bg$kendo-map-font-family String$kendo-popup-bgvar(--kendo-color-surface-alt, #ffffff)var( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The background of the menu popup.
+
Description
The font family of the Map.
$kendo-menu-popup-text$kendo-map-bg String$kendo-popup-textvar(--kendo-color-on-app-surface, #272727)$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The text color of the menu popup.
+
Description
The background color of the Map.
$kendo-menu-popup-border$kendo-map-text String$kendo-popup-bordervar(--kendo-color-border, #cacaca)$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The border color of the menu popup.
+
Description
The text color of the Map.
$kendo-menu-popup-gradientNullnullnull$kendo-map-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The background gradient of the menu popup.
+
Description
The border color of the Map.
$kendo-menu-popup-item-padding-x$kendo-map-navigator-margin Stringk-spacing(2)var(--kendo-spacing-2, 0.5rem)k-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of the menu item in popup.
+
Description
The margin of the Map navigator.
$kendo-menu-popup-item-padding-y$kendo-map-navigator-padding Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)k-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
Vertical padding of the menu item in popup.
+
Description
The padding of the Map navigator.
$kendo-menu-popup-item-padding-end$kendo-map-navigator-width Calculationcalc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px)calc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) )calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The end padding of the menu item in popup.
+
Description
The width of the Map navigator.
$kendo-menu-popup-sm-item-icon-margin-startString$kendo-menu-popup-sm-item-padding-xvar(--kendo-spacing-2, 0.5rem)$kendo-map-navigator-heightCalculation$kendo-map-navigator-widthcalc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The start margin of the menu item expand icon.
+
Description
The height of the Map navigator.
$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px) - var(--kendo-spacing-2, 0.5rem)/2))$kendo-map-navigator-border-widthNumber1px1px
Description
The end margin of the menu item expand icon.
+
Description
The border width of the Map navigator.
$kendo-menu-popup-item-spacing$kendo-map-zoom-control-margin Stringk-spacing(0)var(--kendo-spacing-0, 0px)k-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacing between the menu items in popup.
+
Description
The margin of the Map zoom control.
$kendo-menu-popup-item-bgNullnullnull$kendo-map-zoom-control-button-padding-xString$kendo-button-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The background of the menu item in popup.
+
Description
The horizontal padding of the Map zoom control.
$kendo-menu-popup-item-textNullnullnull$kendo-map-zoom-control-button-padding-yString$kendo-map-zoom-control-button-padding-xvar(--kendo-spacing-1, 0.25rem)
Description
The text color of the menu item in popup.
+
Description
The vertical padding of the Map zoom control.
$kendo-menu-popup-item-borderNullnullnull$kendo-map-attribution-padding-xString$kendo-padding-sm-xvar(--kendo-spacing-1, 0.25rem)
Description
The border color of the menu item in popup.
+
Description
The horizontal padding of the Map attribution.
$kendo-menu-popup-item-gradientNullnullnull$kendo-map-attribution-padding-yString$kendo-padding-sm-yvar(--kendo-spacing-0\.5, 0.125rem)
Description
The background gradient of the menu item in popup.
+
Description
The vertical padding of the Map attribution.
$kendo-menu-popup-item-hover-bgString$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #dddddd)$kendo-map-attribution-font-sizeCalculationcalc( #{$kendo-map-font-size} * .75 )calc(var(--kendo-font-size, inherit) * 0.75)
Description
The background of hovered menu item in popup.
+
Description
The font size of the Map attribution.
$kendo-menu-popup-item-hover-text$kendo-map-attribution-bg String$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #272727)if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 ))color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent)
Description
The text color of hovered menu item in popup.
+
Description
The background color of the Map attribution.
$kendo-menu-popup-item-hover-borderNullnullnull
Description
The border color of hovered menu item in popup.
-
$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The background gradient of hovered menu item in popup.
-
$kendo-menu-popup-item-expanded-bg$kendo-map-marker-fill String$kendo-list-item-selected-bg$kendo-color-primary var(--kendo-color-primary, #f35800)
Description
The background of expanded menu item in popup.
-
$kendo-menu-popup-item-expanded-textString$kendo-list-item-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of expanded menu item in popup.
-
$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The border color of expanded menu item in popup.
-
$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The background gradient of expanded menu item in popup.
-
$kendo-menu-popup-item-focus-shadowList$kendo-menu-item-focus-shadowinset 0 0 3px 1px color-mix(in srgb, var(--kendo-color-on-app-surface, #272727) 25%, transparent)
Description
The base shadow of focused menu item in popup.
-
- -### MenuButton - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xString$kendo-button-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the button arrow in the Menu Button.
+
Description
The fill color of the Map marker.
-### Notification +### Mediaplayer @@ -14972,159 +15022,139 @@ The following table lists the available variables for customizing the Classic th - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - + - - + - - + + - - + - - + - - + - - + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + +
$kendo-notification-group-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The row-gap between the elements in the Notification group.
-
$kendo-notification-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Notification.
-
$kendo-notification-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Notification.
-
$kendo-notification-border-width$kendo-media-player-border-width Number 1px 1px
Description
The width of the border around the Notification.
-
$kendo-notification-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Notification.
+
Description
The border width of the MediaPlayer.
$kendo-notification-font-family$kendo-media-player-font-family String var( --kendo-font-family, inherit ) var(--kendo-font-family, inherit)
Description
The font family of the Notification.
+
Description
The font family of the MediaPlayer.
$kendo-notification-font-size$kendo-media-player-font-size Stringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)var( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Notification.
+
Description
The font size of the MediaPlayer.
$kendo-notification-line-height$kendo-media-player-line-height String var( --kendo-line-height, normal ) var(--kendo-line-height, normal)
Description
The line height of the Notification.
+
Description
The line height of the MediaPlayer.
$kendo-notification-bg$kendo-media-player-bg String $kendo-component-bg var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Notification.
+
Description
The background color of the MediaPlayer.
$kendo-notification-text$kendo-media-player-text String $kendo-component-text var(--kendo-color-on-app-surface, #272727)
Description
The text color of the Notification.
+
Description
The text color of the MediaPlayer.
$kendo-notification-border$kendo-media-player-border String $kendo-component-border var(--kendo-color-border, #cacaca)
Description
The border color of the Notification.
+
Description
The border color of the MediaPlayer.
$kendo-notification-shadow$kendo-media-player-titlebar-padding-x String$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The box shadow of the Notification.
+
Description
The horizontal padding of the MediaPlayer title.
$kendo-notification-icon-spacing$kendo-media-player-titlebar-padding-y String$kendo-icon-spacingvar(--kendo-spacing-1, 0.25rem)k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal spacing of the Notification icon.
+
Description
The vertical padding of the MediaPlayer title.
$kendo-notification-theme-colorsMap$kendo-theme-colors
  • primary: var(--kendo-color-primary, #f35800)
  • secondary: var(--kendo-color-secondary, #b6b6b6)
  • tertiary: var(--kendo-color-tertiary, #03a9f4)
  • info: var(--kendo-color-info, #007bc3)
  • success: var(--kendo-color-success, #3ea44e)
  • warning: var(--kendo-color-warning, #ffa41f)
  • error: var(--kendo-color-error, #d92800)
  • dark: var(--kendo-color-dark, #404040)
  • light: var(--kendo-color-light, #ebebeb)
  • inverse: var(--kendo-color-dark, #404040)
$kendo-media-player-titlebar-bgNullnullnull
Description
The theme colors map for the Notification.
+
Description
The background color of the MediaPlayer title.
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )
  • inverse: "color":"var(--kendo-color-on-inverse, #ffffff)","background-color":"var(--kendo-color-dark, #404040)","border":"var(--kendo-color-dark, #404040)"
  • light: "color":"var(--kendo-color-on-light, #000000)","background-color":"var(--kendo-color-light, #ebebeb)","border":"var(--kendo-color-light, #ebebeb)"
  • dark: "color":"var(--kendo-color-on-dark, #ffffff)","background-color":"var(--kendo-color-dark, #404040)","border":"var(--kendo-color-dark, #404040)"
  • error: "color":"var(--kendo-color-on-error, #ffffff)","background-color":"var(--kendo-color-error, #d92800)","border":"var(--kendo-color-error, #d92800)"
  • warning: "color":"var(--kendo-color-on-warning, #000000)","background-color":"var(--kendo-color-warning, #ffa41f)","border":"var(--kendo-color-warning, #ffa41f)"
  • success: "color":"var(--kendo-color-on-success, #ffffff)","background-color":"var(--kendo-color-success, #3ea44e)","border":"var(--kendo-color-success, #3ea44e)"
  • info: "color":"var(--kendo-color-on-info, #ffffff)","background-color":"var(--kendo-color-info, #007bc3)","border":"var(--kendo-color-info, #007bc3)"
  • tertiary: "color":"var(--kendo-color-on-tertiary, #ffffff)","background-color":"var(--kendo-color-tertiary, #03a9f4)","border":"var(--kendo-color-tertiary, #03a9f4)"
  • secondary: "color":"var(--kendo-color-on-secondary, #000000)","background-color":"var(--kendo-color-secondary, #b6b6b6)","border":"var(--kendo-color-secondary, #b6b6b6)"
  • primary: "color":"var(--kendo-color-on-primary, #ffffff)","background-color":"var(--kendo-color-primary, #f35800)","border":"var(--kendo-color-primary, #f35800)"
$kendo-media-player-titlebar-textString$kendo-media-player-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The generated theme colors map for the Notification.
+
Description
The text color of the MediaPlayer title.
+
$kendo-media-player-titlebar-borderNullnullnull
Description
The border color of the MediaPlayer title.
+
$kendo-media-player-titlebar-gradientListif($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) ))color-mix(in srgb, var(--kendo-color-on-app-surface, #272727) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #272727) 0%, transparent)
Description
The gradient of the MediaPlayer title.
-### Orgchart +### Menu @@ -15142,449 +15172,489 @@ The following table lists the available variables for customizing the Classic th - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - + - - + - + - - + - + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - + +
$kendo-orgchart-spacerStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The spacing index of the OrgChart.
-
$kendo-orgchart-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-padding-xNullnullnull
Description
The vertical padding of the OrgChart.
+
Description
Horizontal padding of the menu popup.
$kendo-orgchart-padding-xString$kendo-orgchart-padding-yvar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-padding-yNullnullnull
Description
The horizontal padding of the OrgChart.
+
Description
Vertical padding of the menu popup.
$kendo-orgchart-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)$kendo-menu-popup-border-widthNumber$kendo-popup-border-width1px
Description
The font family of the OrgChart.
+
Description
Width of the border around the menu popup.
$kendo-orgchart-font-size$kendo-menu-popup-font-size String var( --kendo-font-size, inherit ) var(--kendo-font-size, inherit)
Description
The font size of the OrgChart.
+
Description
Font sizes of the menu popup.
$kendo-orgchart-line-height$kendo-menu-popup-line-height String var( --kendo-line-height, normal ) var(--kendo-line-height, normal)
Description
The line height of the OrgChart.
+
Description
Line heights used along with $kendo-font-size.
$kendo-orgchart-bg$kendo-menu-popup-bg String$kendo-component-bg$kendo-popup-bg var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the OrgChart.
+
Description
The background of the menu popup.
$kendo-orgchart-text$kendo-menu-popup-text String$kendo-component-text$kendo-popup-text var(--kendo-color-on-app-surface, #272727)
Description
The text color of the OrgChart.
+
Description
The text color of the menu popup.
$kendo-orgchart-border$kendo-menu-popup-border String$kendo-component-border$kendo-popup-border var(--kendo-color-border, #cacaca)
Description
The border color of the OrgChart.
+
Description
The border color of the menu popup.
$kendo-orgchart-node-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-gradientNullnullnull
Description
The spacing of the OrgChart node.
+
Description
The background gradient of the menu popup.
$kendo-orgchart-group-gap$kendo-menu-popup-item-padding-x String$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing of the OrgChart group.
+
Description
Horizontal padding of the menu item in popup.
$kendo-orgchart-node-container-gap$kendo-menu-popup-item-padding-y String$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The spacing of the OrgChart node container.
+
Description
Vertical padding of the menu item in popup.
$kendo-orgchart-node-group-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px)
Description
The vertical padding of the OrgChart node group.
+
Description
The end padding of the menu item in popup.
$kendo-orgchart-node-group-padding-x$kendo-menu-popup-sm-item-icon-margin-start String$kendo-orgchart-node-group-padding-yvar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-sm-item-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the OrgChart node group.
+
Description
The start margin of the menu item expand icon.
$kendo-orgchart-node-group-border-widthNumber1px1px$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px) - var(--kendo-spacing-2, 0.5rem)/2))
Description
The border width of the OrgChart node group.
+
Description
The end margin of the menu item expand icon.
$kendo-orgchart-node-group-border-radius$kendo-menu-popup-item-spacing Stringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)k-spacing(0)var(--kendo-spacing-0, 0px)
Description
The border radius of the OrgChart node group.
+
Description
The spacing between the menu items in popup.
$kendo-orgchart-node-group-bgString$kendo-base-bgvar(--kendo-color-surface, #f0f0f0)$kendo-menu-popup-item-bgNullnullnull
Description
The background color of the OrgChart node group.
+
Description
The background of the menu item in popup.
$kendo-orgchart-node-group-textString$kendo-base-textvar(--kendo-color-on-app-surface, #272727)$kendo-menu-popup-item-textNullnullnull
Description
The text color of the OrgChart node group.
+
Description
The text color of the menu item in popup.
$kendo-orgchart-node-group-borderString$kendo-base-bordervar(--kendo-color-border, #cacaca)$kendo-menu-popup-item-borderNullnullnull
Description
The border color of the OrgChart node group.
+
Description
The border color of the menu item in popup.
$kendo-orgchart-node-group-focus-borderColor$kendo-card-focus-borderrgba(0, 0, 0, 0.15)$kendo-menu-popup-item-gradientNullnullnull
Description
The border color of the focused OrgChart node group.
+
Description
The background gradient of the menu item in popup.
$kendo-orgchart-node-group-focus-shadow$kendo-menu-popup-item-hover-bg String$kendo-card-focus-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #dddddd)
Description
The shadow of the focused OrgChart node group.
+
Description
The background of hovered menu item in popup.
$kendo-orgchart-node-group-title-font-size$kendo-menu-popup-item-hover-text Stringvar( --kendo-font-size-xl, inherit )var(--kendo-font-size-xl, inherit)$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #272727)
Description
The font size of the OrgChart node group title.
+
Description
The text color of hovered menu item in popup.
$kendo-orgchart-node-group-title-margin-bottomCalculationcalc( #{$kendo-orgchart-spacer} / 4 )calc(var(--kendo-spacing-6, 1.5rem) / 4)$kendo-menu-popup-item-hover-borderNullnullnull
Description
The bottom margin of the OrgChart node group title.
+
Description
The border color of hovered menu item in popup.
$kendo-orgchart-node-group-title-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The line height of the OrgChart node group title.
+
Description
The background gradient of hovered menu item in popup.
$kendo-orgchart-node-group-subtitle-margin-bottom$kendo-menu-popup-item-expanded-bg String$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-list-item-selected-bgvar(--kendo-color-primary, #f35800)
Description
The bottom margin of the OrgChart node group subtitle.
+
Description
The background of expanded menu item in popup.
$kendo-orgchart-node-group-subtitle-font-size$kendo-menu-popup-item-expanded-text Stringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)$kendo-list-item-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The font size of the OrgChart node group subtitle.
+
Description
The text color of expanded menu item in popup.
$kendo-orgchart-node-group-subtitle-textString$kendo-subtle-textvar(--kendo-color-subtle, #666666)$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The line height of the OrgChart node group subtitle.
+
Description
The border color of expanded menu item in popup.
$kendo-orgchart-card-widthNumber300px300px$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The width of the OrgChart Card.
+
Description
The background gradient of expanded menu item in popup.
$kendo-orgchart-card-padding-yString$kendo-card-padding-yvar(--kendo-spacing-3, 0.75rem)$kendo-menu-popup-item-focus-shadowList$kendo-menu-item-focus-shadowinset 0 0 3px 1px color-mix(in srgb, var(--kendo-color-on-app-surface, #272727) 25%, transparent)
Description
The vertical padding of the OrgChart Card.
+
Description
The base shadow of focused menu item in popup.
$kendo-orgchart-card-padding-x
+ +### MenuButton + + + + + + + + + + + + + + + + + + - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-x String$kendo-orgchart-card-padding-yvar(--kendo-spacing-3, 0.75rem)$kendo-button-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the OrgChart Card.
+
Description
The horizontal padding of the button arrow in the Menu Button.
$kendo-orgchart-card-border-widthNumber$kendo-card-border-width1px
+ +### Notification + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-notification-group-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The border width of the OrgChart Card.
+
Description
The row-gap between the elements in the Notification group.
$kendo-orgchart-card-shadow$kendo-notification-padding-x String$kendo-card-shadowvar(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The shadow of the OrgChart Card.
+
Description
The horizontal padding of the Notification.
$kendo-orgchart-card-focus-shadow$kendo-notification-padding-y String$kendo-card-focus-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The shadow of the focused OrgChart Card.
+
Description
The vertical padding of the Notification.
$kendo-orgchart-card-title-margin-bottomStringk-spacing(0)var(--kendo-spacing-0, 0px)$kendo-notification-border-widthNumber1px1px
Description
The bottom margin of the OrgChart Card title.
+
Description
The width of the border around the Notification.
$kendo-orgchart-card-title-font-sizeNullnullnull$kendo-notification-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The font size of the OrgChart Card title.
+
Description
The border radius of the Notification.
$kendo-orgchart-card-subtitle-margin-bottom$kendo-notification-font-family Stringk-spacing(0)var(--kendo-spacing-0, 0px)var( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The bottom margin of the OrgChart Card subtitle.
+
Description
The font family of the Notification.
$kendo-orgchart-card-subtitle-font-sizeNullnullnull$kendo-notification-font-sizeStringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)
Description
The font size of the OrgChart Card subtitle.
+
Description
The font size of the Notification.
$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0$kendo-notification-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The border width of the OrgChart Card body.
+
Description
The line height of the Notification.
$kendo-orgchart-card-body-border-colorColortransparenttransparent$kendo-notification-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The border color of the OrgChart Card body.
+
Description
The background color of the Notification.
$kendo-orgchart-card-body-vbox-margin-right$kendo-notification-text Stringk-math-div( $kendo-orgchart-spacer, 2 )var(--kendo-spacing-6, 1.5rem)/2$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The right margin of the OrgChart Card body title wrap.
+
Description
The text color of the Notification.
$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px$kendo-notification-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The min height of the OrgChart Card body title wrap.
+
Description
The border color of the Notification.
$kendo-orgchart-line-sizeNumber1px1px$kendo-notification-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The size of the OrgChart connecting line.
+
Description
The box shadow of the Notification.
$kendo-orgchart-line-fill$kendo-notification-icon-spacing String$kendo-base-bordervar(--kendo-color-border, #cacaca)$kendo-icon-spacingvar(--kendo-spacing-1, 0.25rem)
Description
The fill color of the OrgChart connecting line.
+
Description
The horizontal spacing of the Notification icon.
$kendo-orgchart-line-v-heightNumber25px25px$kendo-notification-theme-colorsMap$kendo-theme-colors
  • primary: var(--kendo-color-primary, #f35800)
  • secondary: var(--kendo-color-secondary, #b6b6b6)
  • tertiary: var(--kendo-color-tertiary, #03a9f4)
  • info: var(--kendo-color-info, #007bc3)
  • success: var(--kendo-color-success, #3ea44e)
  • warning: var(--kendo-color-warning, #ffa41f)
  • error: var(--kendo-color-error, #d92800)
  • dark: var(--kendo-color-dark, #404040)
  • light: var(--kendo-color-light, #ebebeb)
  • inverse: var(--kendo-color-dark, #404040)
Description
The height of the OrgChart connecting line.
+
Description
The theme colors map for the Notification.
+
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )
  • inverse: "color":"var(--kendo-color-on-inverse, #ffffff)","background-color":"var(--kendo-color-dark, #404040)","border":"var(--kendo-color-dark, #404040)"
  • light: "color":"var(--kendo-color-on-light, #000000)","background-color":"var(--kendo-color-light, #ebebeb)","border":"var(--kendo-color-light, #ebebeb)"
  • dark: "color":"var(--kendo-color-on-dark, #ffffff)","background-color":"var(--kendo-color-dark, #404040)","border":"var(--kendo-color-dark, #404040)"
  • error: "color":"var(--kendo-color-on-error, #ffffff)","background-color":"var(--kendo-color-error, #d92800)","border":"var(--kendo-color-error, #d92800)"
  • warning: "color":"var(--kendo-color-on-warning, #000000)","background-color":"var(--kendo-color-warning, #ffa41f)","border":"var(--kendo-color-warning, #ffa41f)"
  • success: "color":"var(--kendo-color-on-success, #ffffff)","background-color":"var(--kendo-color-success, #3ea44e)","border":"var(--kendo-color-success, #3ea44e)"
  • info: "color":"var(--kendo-color-on-info, #ffffff)","background-color":"var(--kendo-color-info, #007bc3)","border":"var(--kendo-color-info, #007bc3)"
  • tertiary: "color":"var(--kendo-color-on-tertiary, #ffffff)","background-color":"var(--kendo-color-tertiary, #03a9f4)","border":"var(--kendo-color-tertiary, #03a9f4)"
  • secondary: "color":"var(--kendo-color-on-secondary, #000000)","background-color":"var(--kendo-color-secondary, #b6b6b6)","border":"var(--kendo-color-secondary, #b6b6b6)"
  • primary: "color":"var(--kendo-color-on-primary, #ffffff)","background-color":"var(--kendo-color-primary, #f35800)","border":"var(--kendo-color-primary, #f35800)"
Description
The generated theme colors map for the Notification.
-### PDFViewer +### Orgchart @@ -15602,831 +15672,799 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - - + - - + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - - - - - - - + - + - - + - + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - -
$kendo-pdf-viewer-border-widthNumber1px1px$kendo-orgchart-spacerStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The border width of the PDFViewer.
+
Description
The spacing index of the OrgChart.
$kendo-pdf-viewer-font-family$kendo-orgchart-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the OrgChart.
+
$kendo-orgchart-padding-xString$kendo-orgchart-padding-yvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the OrgChart.
+
$kendo-orgchart-font-family String var( --kendo-font-family, inherit ) var(--kendo-font-family, inherit)
Description
The font family of the PDFViewer.
+
Description
The font family of the OrgChart.
$kendo-pdf-viewer-font-size$kendo-orgchart-font-size String var( --kendo-font-size, inherit ) var(--kendo-font-size, inherit)
Description
The font size of the PDFViewer.
+
Description
The font size of the OrgChart.
$kendo-pdf-viewer-line-height$kendo-orgchart-line-height String var( --kendo-line-height, normal ) var(--kendo-line-height, normal)
Description
The line height of the PDFViewer.
+
Description
The line height of the OrgChart.
$kendo-pdf-viewer-bg$kendo-orgchart-bg String $kendo-component-bg var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PDFViewer.
+
Description
The background color of the OrgChart.
$kendo-pdf-viewer-text$kendo-orgchart-text String $kendo-component-text var(--kendo-color-on-app-surface, #272727)
Description
The text color of the PDFViewer.
+
Description
The text color of the OrgChart.
$kendo-pdf-viewer-border$kendo-orgchart-border String $kendo-component-border var(--kendo-color-border, #cacaca)
Description
The border color of the PDFViewer.
+
Description
The border color of the OrgChart.
$kendo-pdf-viewer-toolbar-bgNullnullnull$kendo-orgchart-node-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The background color of the PDFViewer Toolbar.
+
Description
The spacing of the OrgChart node.
$kendo-pdf-viewer-toolbar-textNullnullnull$kendo-orgchart-group-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The text color of the PDFViewer Toolbar.
+
Description
The spacing of the OrgChart group.
$kendo-pdf-viewer-toolbar-borderNullnullnull$kendo-orgchart-node-container-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The border color of the PDFViewer Toolbar.
+
Description
The spacing of the OrgChart node container.
$kendo-pdf-viewer-toolbar-gradientNullnullnull$kendo-orgchart-node-group-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The gradient of the PDFViewer Toolbar.
+
Description
The vertical padding of the OrgChart node group.
$kendo-pdf-viewer-canvas-bg$kendo-orgchart-node-group-padding-x String$kendo-app-bgvar(--kendo-color-app-surface, #ffffff)$kendo-orgchart-node-group-padding-yvar(--kendo-spacing-6, 1.5rem)
Description
The background color of the PDFViewer canvas.
+
Description
The horizontal padding of the OrgChart node group.
$kendo-pdf-viewer-canvas-textNullnullnull$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The text color of the PDFViewer canvas.
+
Description
The border width of the OrgChart node group.
$kendo-pdf-viewer-canvas-borderNullnullnull$kendo-orgchart-node-group-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border color of the PDFViewer canvas.
+
Description
The border radius of the OrgChart node group.
$kendo-pdf-viewer-page-spacing$kendo-orgchart-node-group-bg Stringk-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)$kendo-base-bgvar(--kendo-color-surface, #f0f0f0)
Description
The spacing of the PDFViewer page.
-
$kendo-pdf-viewer-page-bgColorwhitewhite
Description
The background color of the PDFViewer page.
+
Description
The background color of the OrgChart node group.
$kendo-pdf-viewer-page-text$kendo-orgchart-node-group-text String$kendo-component-text$kendo-base-text var(--kendo-color-on-app-surface, #272727)
Description
The text color of the PDFViewer page.
+
Description
The text color of the OrgChart node group.
$kendo-pdf-viewer-page-border$kendo-orgchart-node-group-border String$kendo-component-border$kendo-base-border var(--kendo-color-border, #cacaca)
Description
The border color of the PDFViewer page.
+
Description
The border color of the OrgChart node group.
$kendo-pdf-viewer-page-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-orgchart-node-group-focus-borderColor$kendo-card-focus-borderrgba(0, 0, 0, 0.15)
Description
The shadow of the PDFViewer page.
+
Description
The border color of the focused OrgChart node group.
$kendo-pdf-viewer-search-panel-padding-x$kendo-orgchart-node-group-focus-shadow String$kendo-toolbar-md-padding-xvar(--kendo-spacing-2, 0.5rem)$kendo-card-focus-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The horizontal padding of the PDFViewer search panel.
+
Description
The shadow of the focused OrgChart node group.
$kendo-pdf-viewer-search-panel-padding-y$kendo-orgchart-node-group-title-font-size Stringk-spacing(3)var(--kendo-spacing-3, 0.75rem)var( --kendo-font-size-xl, inherit )var(--kendo-font-size-xl, inherit)
Description
The vertical padding of the PDFViewer search panel.
+
Description
The font size of the OrgChart node group title.
$kendo-pdf-viewer-search-panel-spacingString$kendo-toolbar-md-spacingvar(--kendo-spacing-2, 0.5rem)$kendo-orgchart-node-group-title-margin-bottomCalculationcalc( #{$kendo-orgchart-spacer} / 4 )calc(var(--kendo-spacing-6, 1.5rem) / 4)
Description
The spacing of the PDFViewer search panel.
+
Description
The bottom margin of the OrgChart node group title.
$kendo-pdf-viewer-search-panel-border-widthNumber1px1px$kendo-orgchart-node-group-title-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The border width of the PDFViewer search panel.
+
Description
The line height of the OrgChart node group title.
$kendo-pdf-viewer-search-panel-border-radius$kendo-orgchart-node-group-subtitle-margin-bottom Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The border radius of the PDFViewer search panel.
+
Description
The bottom margin of the OrgChart node group subtitle.
$kendo-pdf-viewer-search-panel-bg$kendo-orgchart-node-group-subtitle-font-size String$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)var( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The background color of the PDFViewer search panel.
+
Description
The font size of the OrgChart node group subtitle.
$kendo-pdf-viewer-search-panel-text$kendo-orgchart-node-group-subtitle-text String$kendo-component-textvar(--kendo-color-on-app-surface, #272727)$kendo-subtle-textvar(--kendo-color-subtle, #666666)
Description
The text color of the PDFViewer search panel.
+
Description
The line height of the OrgChart node group subtitle.
$kendo-pdf-viewer-search-panel-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)$kendo-orgchart-card-widthNumber300px300px
Description
The border color of the PDFViewer search panel.
+
Description
The width of the OrgChart Card.
$kendo-pdf-viewer-search-panel-shadow$kendo-orgchart-card-padding-y String$kendo-window-shadowvar(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-card-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The shadow of the PDFViewer search panel.
+
Description
The vertical padding of the OrgChart Card.
$kendo-pdf-viewer-search-panel-matches-spacing$kendo-orgchart-card-padding-x String$kendo-padding-sm-xvar(--kendo-spacing-1, 0.25rem)$kendo-orgchart-card-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The spacing of the matches container in the PDFViewer search panel.
+
Description
The horizontal padding of the OrgChart Card.
$kendo-pdf-viewer-selection-line-height$kendo-orgchart-card-border-width Number$kendo-line-height-sm1.25$kendo-card-border-width1px
Description
The line height of the PDFViewer selection.
+
Description
The border width of the OrgChart Card.
$kendo-pdf-viewer-search-highlight-bg$kendo-orgchart-card-shadow String$kendo-body-textvar(--kendo-color-on-app-surface, #272727)$kendo-card-shadowvar(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The background color of the PDFViewer highlight.
+
Description
The shadow of the OrgChart Card.
$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow$kendo-orgchart-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The background color of the PDFViewer highlight mark.
+
Description
The shadow of the focused OrgChart Card.
$kendo-pdf-viewer-icon-text$kendo-orgchart-card-title-margin-bottom String$kendo-dropzone-icon-textvar(--kendo-color-subtle, #666666)k-spacing(0)var(--kendo-spacing-0, 0px)
Description
The text color of the PDFViewer icon.
+
Description
The bottom margin of the OrgChart Card title.
- -### Pager - - - - - - - - - - - - - - - - - - - - - + + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - + + - - - - - + + + + - - - + +
NameTypeDefault valueComputed value
$kendo-pager-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The horizontal padding of the Pager.
+
Description
The font size of the OrgChart Card title.
$kendo-pager-sm-padding-x$kendo-orgchart-card-subtitle-margin-bottom Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)k-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the small Pager.
+
Description
The bottom margin of the OrgChart Card subtitle.
$kendo-pager-md-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The horizontal padding of the medium Pager.
+
Description
The font size of the OrgChart Card subtitle.
$kendo-pager-lg-padding-xStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The horizontal padding of the large Pager.
+
Description
The border width of the OrgChart Card body.
$kendo-pager-padding-yString$kendo-pager-padding-xvar(--kendo-spacing-2, 0.5rem)$kendo-orgchart-card-body-border-colorColortransparenttransparent
Description
The vertical padding of the Pager.
+
Description
The border color of the OrgChart Card body.
$kendo-pager-sm-padding-y$kendo-orgchart-card-body-vbox-margin-right String$kendo-pager-sm-padding-xvar(--kendo-spacing-1, 0.25rem)k-math-div( $kendo-orgchart-spacer, 2 )var(--kendo-spacing-6, 1.5rem)/2
Description
The vertical padding of the small Pager.
+
Description
The right margin of the OrgChart Card body title wrap.
$kendo-pager-md-padding-yString$kendo-pager-md-padding-xvar(--kendo-spacing-2, 0.5rem)$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px
Description
The vertical padding of the medium Pager.
+
Description
The min height of the OrgChart Card body title wrap.
$kendo-pager-lg-padding-yString$kendo-pager-lg-padding-xvar(--kendo-spacing-2\.5, 0.625rem)$kendo-orgchart-line-sizeNumber1px1px
Description
The vertical padding of the large Pager.
+
Description
The size of the OrgChart connecting line.
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px)
Description
The minimum width of the items in the small Pager.
-
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)
Description
The minimum width of the items in the medium Pagers.
-
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)
Description
The minimum width of the items in the large Pagers.
-
$kendo-pager-sm-item-group-spacingStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The margin between the item groups in the small Pager..
-
$kendo-pager-md-item-group-spacing$kendo-orgchart-line-fill Stringk-spacing(3.5)var(--kendo-spacing-3\.5, 0.875rem)$kendo-base-bordervar(--kendo-color-border, #cacaca)
Description
The margin between the item groups in the medium Pager.
+
Description
The fill color of the OrgChart connecting line.
$kendo-pager-lg-item-group-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)$kendo-orgchart-line-v-heightNumber25px25px
Description
The margin between the item groups in the large Pager.
+
Description
The height of the OrgChart connecting line.
$kendo-pager-border-width
+ +### PDFViewer + + + + + + + + + + + + + + + + + + - - + - - + - - + - - + - - + + - - + - + - - + - - + - - - - - - - - - - - - - - - - - - - - - - - + + + + - - + - - + - - - - - + + + + - - + - - + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-pdf-viewer-border-width Number 1px 1px
Description
The border width of the Pager.
+
Description
The border width of the PDFViewer.
$kendo-pager-font-family$kendo-pdf-viewer-font-family String var( --kendo-font-family, inherit ) var(--kendo-font-family, inherit)
Description
The font family of the Pager.
+
Description
The font family of the PDFViewer.
$kendo-pager-font-size$kendo-pdf-viewer-font-size String var( --kendo-font-size, inherit ) var(--kendo-font-size, inherit)
Description
The font size of the Pager.
+
Description
The font size of the PDFViewer.
$kendo-pager-line-height$kendo-pdf-viewer-line-height String var( --kendo-line-height, normal ) var(--kendo-line-height, normal)
Description
The line height of the Pager.
+
Description
The line height of the PDFViewer.
$kendo-pager-bg$kendo-pdf-viewer-bg String$kendo-component-header-bgvar(--kendo-color-surface, #f0f0f0)$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Pager.
+
Description
The background color of the PDFViewer.
$kendo-pager-text$kendo-pdf-viewer-text String$kendo-component-header-text$kendo-component-text var(--kendo-color-on-app-surface, #272727)
Description
The text color of the Pager.
+
Description
The text color of the PDFViewer.
$kendo-pager-border$kendo-pdf-viewer-border String $kendo-component-border var(--kendo-color-border, #cacaca)
Description
The border color of the Pager.
+
Description
The border color of the PDFViewer.
$kendo-pager-focus-bg$kendo-pdf-viewer-toolbar-bg Null null null
Description
The background color of the focused Pager.
-
$kendo-pager-focus-shadowList$kendo-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The box shadow of the focused Pager.
-
$kendo-pager-section-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacing between the Pager sections.
+
Description
The background color of the PDFViewer Toolbar.
$kendo-pager-item-border-widthNumber0px0px$kendo-pdf-viewer-toolbar-textNullnullnull
Description
The border width of the Pager items.
+
Description
The text color of the PDFViewer Toolbar.
$kendo-pager-item-border-radius$kendo-pdf-viewer-toolbar-border Null null null
Description
The border radius of the Pager items.
+
Description
The border color of the PDFViewer Toolbar.
$kendo-pager-item-spacing$kendo-pdf-viewer-toolbar-gradient Null null null
Description
The spacing around the Pager items.
+
Description
The gradient of the PDFViewer Toolbar.
$kendo-pager-item-bgNullnullnull$kendo-pdf-viewer-canvas-bgString$kendo-app-bgvar(--kendo-color-app-surface, #ffffff)
Description
The background color of the Pager items.
+
Description
The background color of the PDFViewer canvas.
$kendo-pager-item-text$kendo-pdf-viewer-canvas-text Null null null
Description
The text color of the Pager items.
+
Description
The text color of the PDFViewer canvas.
$kendo-pager-item-border$kendo-pdf-viewer-canvas-border Null null null
Description
The border color of the Pager items.
+
Description
The border color of the PDFViewer canvas.
$kendo-pager-item-hover-bg$kendo-pdf-viewer-page-spacing String$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #dddddd)k-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)
Description
The background color of the hovered Pager items.
+
Description
The spacing of the PDFViewer page.
$kendo-pager-item-hover-textString$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #272727)$kendo-pdf-viewer-page-bgColorwhitewhite
Description
The text color of the hovered Pager items.
+
Description
The background color of the PDFViewer page.
$kendo-pager-item-hover-borderNullnullnull$kendo-pdf-viewer-page-textString$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The border color of the hovered Pager items.
+
Description
The text color of the PDFViewer page.
$kendo-pager-item-selected-bg$kendo-pdf-viewer-page-border String$kendo-list-item-selected-bgvar(--kendo-color-primary, #f35800)$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The background color of the selected Pager items.
+
Description
The border color of the PDFViewer page.
$kendo-pager-item-selected-text$kendo-pdf-viewer-page-shadow String$kendo-list-item-selected-textvar(--kendo-color-on-primary, #ffffff)k-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The text color of the selected Pager items.
+
Description
The shadow of the PDFViewer page.
$kendo-pager-item-selected-borderNullnullnull$kendo-pdf-viewer-search-panel-padding-xString$kendo-toolbar-md-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The border color of the selected Pager items.
+
Description
The horizontal padding of the PDFViewer search panel.
$kendo-pager-item-focus-opacityNullnullnull$kendo-pdf-viewer-search-panel-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The opacity of the focused Pager items.
+
Description
The vertical padding of the PDFViewer search panel.
$kendo-pager-item-focus-bgColortransparenttransparent$kendo-pdf-viewer-search-panel-spacingString$kendo-toolbar-md-spacingvar(--kendo-spacing-2, 0.5rem)
Description
The background color of the focused Pager items.
+
Description
The spacing of the PDFViewer search panel.
$kendo-pager-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-pdf-viewer-search-panel-border-widthNumber1px1px
Description
The box shadow of the focused Pager items.
+
Description
The border width of the PDFViewer search panel.
$kendo-pager-number-border-radiusNullnullnull$kendo-pdf-viewer-search-panel-border-radiusStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The border radius of the Pager numbers.
+
Description
The border radius of the PDFViewer search panel.
$kendo-pager-input-widthNumber5em5em$kendo-pdf-viewer-search-panel-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The width of the Inputs in the Pager.
+
Description
The background color of the PDFViewer search panel.
$kendo-pager-sm-dropdown-widthNumber5em5em$kendo-pdf-viewer-search-panel-textString$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The width of the DropDowns in the small Pager.
+
Description
The text color of the PDFViewer search panel.
$kendo-pager-md-dropdown-widthNumber5em5em$kendo-pdf-viewer-search-panel-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The width of the DropDowns in the medium Pager.
+
Description
The border color of the PDFViewer search panel.
$kendo-pager-lg-dropdown-width$kendo-pdf-viewer-search-panel-shadowString$kendo-window-shadowvar(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the PDFViewer search panel.
+
$kendo-pdf-viewer-search-panel-matches-spacingString$kendo-padding-sm-xvar(--kendo-spacing-1, 0.25rem)
Description
The spacing of the matches container in the PDFViewer search panel.
+
$kendo-pdf-viewer-selection-line-height Number5em5em$kendo-line-height-sm1.25
Description
The width of the DropDowns in the large Pager.
+
Description
The line height of the PDFViewer selection.
$kendo-pager-sizesMap( - sm: ( - padding-x: $kendo-pager-sm-padding-x, - padding-y: $kendo-pager-sm-padding-y, - item-group-spacing: $kendo-pager-sm-item-group-spacing, - item-min-width: $kendo-pager-sm-item-min-width, - pager-dropdown-width: $kendo-pager-sm-dropdown-width - ), - md: ( - padding-x: $kendo-pager-md-padding-x, - padding-y: $kendo-pager-md-padding-y, - item-group-spacing: $kendo-pager-md-item-group-spacing, - item-min-width: $kendo-pager-md-item-min-width, - pager-dropdown-width: $kendo-pager-md-dropdown-width - ), - lg: ( - padding-x: $kendo-pager-lg-padding-x, - padding-y: $kendo-pager-lg-padding-y, - item-group-spacing: $kendo-pager-lg-item-group-spacing, - item-min-width: $kendo-pager-lg-item-min-width, - pager-dropdown-width: $kendo-pager-lg-dropdown-width - ) -)
  • sm: "padding-x":"var(--kendo-spacing-1, 0.25rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","item-group-spacing":"var(--kendo-spacing-3, 0.75rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\\.5, 0.125rem) * 2 + 2px)","pager-dropdown-width":"5em"
  • md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","item-group-spacing":"var(--kendo-spacing-3\\.5, 0.875rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)","pager-dropdown-width":"5em"
  • lg: "padding-x":"var(--kendo-spacing-2\\.5, 0.625rem)","padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","item-group-spacing":"var(--kendo-spacing-4, 1rem)","item-min-width":"calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)","pager-dropdown-width":"5em"
$kendo-pdf-viewer-search-highlight-bgString$kendo-body-textvar(--kendo-color-on-app-surface, #272727)
Description
The sizes map of the Pager.
+
Description
The background color of the PDFViewer highlight.
+
$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow
Description
The background color of the PDFViewer highlight mark.
+
$kendo-pdf-viewer-icon-textString$kendo-dropzone-icon-textvar(--kendo-color-subtle, #666666)
Description
The text color of the PDFViewer icon.
-### Palette +### Pager @@ -16444,1583 +16482,2805 @@ The following table lists the available variables for customizing the Classic th - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-palette-ash-grayMap$_default-palette-ash-gray
  • 1: #fafafa
  • 2: #f0f0f0
  • 3: #ebebeb
  • 4: #dddddd
  • 5: #d6d6d6
  • 6: #cacaca
  • 7: #b6b6b6
  • 8: #a3a3a3
  • 9: #8f8f8f
  • 10: #7a7a7a
  • 11: #666666
  • 12: #525252
  • 13: #404040
  • 14: #333333
  • 15: #272727
  • white: #ffffff
  • black: #000000
$kendo-pager-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The Ash Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
+
Description
The horizontal padding of the Pager.
$kendo-palette-tangerine-orangeMap$_default-palette-tangerine-orange
  • 1: #fff2eb
  • 2: #ffe5d6
  • 3: #ffd8c2
  • 4: #ffcbad
  • 5: #ffbe99
  • 6: #ffa570
  • 7: #ff8b47
  • 8: #ff711f
  • 9: #f35800
  • 10: #e05100
  • 11: #cc4a00
  • 12: #b94300
  • 13: #a53c00
  • 14: #7a2d00
  • 15: #3d1600
$kendo-pager-sm-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The Tangerine Orange Palette provides colors to the Primary variable group.
+
Description
The horizontal padding of the small Pager.
$kendo-palette-dodger-blueMap$_default-palette-dodger-blue
  • 1: #ebf8ff
  • 2: #d7f2ff
  • 3: #b8e8fe
  • 4: #9cdffe
  • 5: #72d1fe
  • 6: #49c4fd
  • 7: #2cbbfd
  • 8: #0db1fd
  • 9: #03a9f4
  • 10: #039be0
  • 11: #038ecd
  • 12: #0280b9
  • 13: #0273a6
  • 14: #014c6f
  • 15: #01364e
$kendo-pager-md-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The Dodger Blue Palette provides colors to the Tertiary variable group.
+
Description
The horizontal padding of the medium Pager.
$kendo-palette-grass-greenMap$_default-palette-grass-green
  • 1: #f1f8f2
  • 2: #e3f2e6
  • 3: #d8eddc
  • 4: #bbdfc1
  • 5: #9ed1a6
  • 6: #82c48c
  • 7: #6ebb7a
  • 8: #4db25c
  • 9: #3ea44e
  • 10: #399748
  • 11: #348a42
  • 12: #2f7d3b
  • 13: #2a7035
  • 14: #1f5126
  • 15: #16391b
$kendo-pager-lg-padding-xStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The Grass Green Palette provides colors to the Success variable group.
+
Description
The horizontal padding of the large Pager.
$kendo-palette-lake-blueMap$_default-palette-lake-blue
  • 1: #eef6fb
  • 2: #deeef7
  • 3: #cce5f3
  • 4: #a6d1ea
  • 5: #8bc3e4
  • 6: #6ab2dc
  • 7: #409cd2
  • 8: #208ccb
  • 9: #007bc3
  • 10: #0071b3
  • 11: #0067a4
  • 12: #005d94
  • 13: #005485
  • 14: #004166
  • 15: #002b44
$kendo-pager-padding-yString$kendo-pager-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The Lake Blue Palette provides colors to the Info variable group.
+
Description
The vertical padding of the Pager.
$kendo-palette-honey-yellowMap$_default-palette-honey-yellow
  • 1: #fff7eb
  • 2: #ffefd6
  • 3: #ffe7c2
  • 4: #ffdead
  • 5: #ffd699
  • 6: #ffc670
  • 7: #ffb240
  • 8: #ffa41f
  • 9: #ff9800
  • 10: #eb8c00
  • 11: #d68000
  • 12: #c27400
  • 13: #ad6700
  • 14: #854f00
  • 15: #593500
$kendo-pager-sm-padding-yString$kendo-pager-sm-padding-xvar(--kendo-spacing-1, 0.25rem)
Description
The Honey Yellow Palette provides colors to the Warning variable group.
+
Description
The vertical padding of the small Pager.
$kendo-palette-brick-redMap$_default-palette-brick-red
  • 1: #fcf0ed
  • 2: #f9e1dc
  • 3: #f7d4cc
  • 4: #f4c3b8
  • 5: #f2b4a6
  • 6: #ec8e79
  • 7: #e35e40
  • 8: #de4320
  • 9: #d92800
  • 10: #c82500
  • 11: #b62200
  • 12: #a51e00
  • 13: #941b00
  • 14: #701500
  • 15: #4c0e00
$kendo-pager-md-padding-yString$kendo-pager-md-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The Brick Red Palette provides colors to the Error variable group.
+
Description
The vertical padding of the medium Pager.
$kendo-palette-coralMap$_default-palette-coral
  • 1: #fff6f5
  • 2: #ffeceb
  • 3: #ffdedb
  • 4: #ffc8c4
  • 5: #ffb1ac
  • 6: #ff9d97
  • 7: #ff8a82
  • 8: #ff766d
  • 9: #ff6358
  • 10: #ea5a51
  • 11: #d45349
  • 12: #bf4a42
  • 13: #a33f38
  • 14: #80322c
  • 15: #5c201c
$kendo-pager-lg-padding-yString$kendo-pager-lg-padding-xvar(--kendo-spacing-2\.5, 0.625rem)
Description
The Coral Palette provides colors to the Series A variable group.
+
Description
The vertical padding of the large Pager.
$kendo-palette-pineapple-yellowMap$_default-palette-pineapple-yellow
  • 1: #fffaeb
  • 2: #fff7db
  • 3: #fff3cc
  • 4: #ffeeb8
  • 5: #ffe9a2
  • 6: #ffe38b
  • 7: #ffdd74
  • 8: #ffd85d
  • 9: #ffd246
  • 10: #eac040
  • 11: #d4af3b
  • 12: #bf9d35
  • 13: #a0832c
  • 14: #806923
  • 15: #403412
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px)
Description
The Pineapple Yellow provides colors to the Series B variable group.
+
Description
The minimum width of the items in the small Pager.
$kendo-palette-apple-greenMap$_default-palette-apple-green
  • 1: #f3fbee
  • 2: #e9f8de
  • 3: #def4ce
  • 4: #d2f0bd
  • 5: #bbe99b
  • 6: #aae382
  • 7: #9add69
  • 8: #89d750
  • 9: #78d237
  • 10: #6ec032
  • 11: #64AF2E
  • 12: #5a9d29
  • 13: #4a8221
  • 14: #3c691c
  • 15: #1c300d
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)
Description
The Apple Green provides colors to the Series C variable group.
+
Description
The minimum width of the items in the medium Pagers.
$kendo-palette-pacific-blueMap$_default-palette-pacific-blue
  • 1: #ebf8fa
  • 2: #d6f1f5
  • 3: #c2e9ef
  • 4: #aee2ea
  • 5: #93d9e3
  • 6: #75d0db
  • 7: #5ec7d6
  • 8: #43becf
  • 9: #28b4c8
  • 10: #24a6b7
  • 11: #2197a6
  • 12: #1e8796
  • 13: #197480
  • 14: #145a64
  • 15: #0a2e33
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)
Description
The Pacific Blue provides colors to the Series D variable group.
+
Description
The minimum width of the items in the large Pagers.
$kendo-palette-bright-blueMap$_default-palette-bright-blue
  • 1: #ecf2fe
  • 2: #d8e5fd
  • 3: #c5d8fc
  • 4: #b1cbfb
  • 5: #96b9fa
  • 6: #7ba7f9
  • 7: #6296f7
  • 8: #4684f6
  • 9: #2d73f5
  • 10: #2969e1
  • 11: #2660cc
  • 12: #2256b8
  • 13: #1d499a
  • 14: #173a7b
  • 15: #0c1e40
$kendo-pager-sm-item-group-spacingStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The Bright Blue provides colors to the Series E variable group.
+
Description
The margin between the item groups in the small Pager..
$kendo-palette-orchid-purpleMap$_default-palette-orchid-purple
  • 1: #f8f0fa
  • 2: #f1e1f5
  • 3: #e7caed
  • 4: #ddb3e5
  • 5: #d5a2df
  • 6: #c98ad6
  • 7: #bf74ce
  • 8: #b45dc6
  • 9: #9d40b0
  • 10: #9c40ae
  • 11: #8e3b9e
  • 12: #80358e
  • 13: #672b73
  • 14: #55235f
  • 15: #28112d
$kendo-pager-md-item-group-spacingStringk-spacing(3.5)var(--kendo-spacing-3\.5, 0.875rem)
Description
The Orchid Purple provides colors to the Series F variable group.
+
Description
The margin between the item groups in the medium Pager.
- -### Panel - - - - - - - - - - - - - - - - - - + + - - + + - - + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + + + + + + + + + + + + + + + + + + + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - -
NameTypeDefault valueComputed value
$kendo-panel-border-radius
$kendo-pager-lg-item-group-spacing Stringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)k-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The border radius of the Panel.
+
Description
The margin between the item groups in the large Pager.
$kendo-panel-border-width$kendo-pager-border-width Number 1px 1px
Description
The width of the border around the Panel.
+
Description
The border width of the Pager.
$kendo-panel-border-style$kendo-pager-font-family Stringsolidsolidvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The style of the border around the Panel.
+
Description
The font family of the Pager.
$kendo-panel-header-padding-inline$kendo-pager-font-size Stringk-spacing(2)var(--kendo-spacing-2, 0.5rem)var( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The inline padding of the Panel header.
+
Description
The font size of the Pager.
$kendo-panel-header-padding-block$kendo-pager-line-height Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)var( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The block padding of the Panel header.
+
Description
The line height of the Pager.
$kendo-panel-content-padding-inline$kendo-pager-bg Stringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-component-header-bgvar(--kendo-color-surface, #f0f0f0)
Description
The inline padding of the Panel content.
+
Description
The background color of the Pager.
$kendo-panel-content-padding-block$kendo-pager-text Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)$kendo-component-header-textvar(--kendo-color-on-app-surface, #272727)
Description
The block padding of the Panel content.
+
Description
The text color of the Pager.
$kendo-panel-text$kendo-pager-border Stringvar(--kendo-component-text, #{$kendo-component-text})var(--kendo-component-text, var(--kendo-color-on-app-surface, #272727))$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The text color of the Panel.
+
Description
The border color of the Pager.
$kendo-panel-bg$kendo-pager-focus-bgNullnullnull
Description
The background color of the focused Pager.
+
$kendo-pager-focus-shadowList$kendo-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The box shadow of the focused Pager.
+
$kendo-pager-section-spacing Stringvar(--kendo-component-bg, #{$kendo-component-bg})var(--kendo-component-bg, var(--kendo-color-surface-alt, #ffffff))k-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The background color of the Panel.
+
Description
The spacing between the Pager sections.
$kendo-panel-border$kendo-pager-item-border-widthNumber0px0px
Description
The border width of the Pager items.
+
$kendo-pager-item-border-radiusNullnullnull
Description
The border radius of the Pager items.
+
$kendo-pager-item-spacingNullnullnull
Description
The spacing around the Pager items.
+
$kendo-pager-item-bgNullnullnull
Description
The background color of the Pager items.
+
$kendo-pager-item-textNullnullnull
Description
The text color of the Pager items.
+
$kendo-pager-item-borderNullnullnull
Description
The border color of the Pager items.
+
$kendo-pager-item-hover-bg Stringvar(--kendo-component-border, #{$kendo-component-border})var(--kendo-component-border, var(--kendo-color-border, #cacaca))$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #dddddd)
Description
The color of the border around the Panel.
+
Description
The background color of the hovered Pager items.
- -### Panelbar - - - - - - - - - - - - - - - - - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-panelbar-padding-x
$kendo-pager-item-hover-text Stringk-spacing(0)var(--kendo-spacing-0, 0px)$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the hovered Pager items.
+
$kendo-pager-item-hover-borderNullnullnull
Description
The border color of the hovered Pager items.
+
$kendo-pager-item-selected-bgString$kendo-list-item-selected-bgvar(--kendo-color-primary, #f35800)
Description
The background color of the selected Pager items.
+
$kendo-pager-item-selected-textString$kendo-list-item-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected Pager items.
+
$kendo-pager-item-selected-borderNullnullnull
Description
The border color of the selected Pager items.
+
$kendo-pager-item-focus-opacityNullnullnull
Description
The opacity of the focused Pager items.
+
$kendo-pager-item-focus-bgColortransparenttransparent
Description
The background color of the focused Pager items.
+
$kendo-pager-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused Pager items.
+
$kendo-pager-number-border-radiusNullnullnull
Description
The border radius of the Pager numbers.
+
$kendo-pager-input-widthNumber5em5em
Description
The width of the Inputs in the Pager.
+
$kendo-pager-sm-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the small Pager.
+
$kendo-pager-md-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the medium Pager.
+
$kendo-pager-lg-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the large Pager.
+
$kendo-pager-sizesMap( + sm: ( + padding-x: $kendo-pager-sm-padding-x, + padding-y: $kendo-pager-sm-padding-y, + item-group-spacing: $kendo-pager-sm-item-group-spacing, + item-min-width: $kendo-pager-sm-item-min-width, + pager-dropdown-width: $kendo-pager-sm-dropdown-width + ), + md: ( + padding-x: $kendo-pager-md-padding-x, + padding-y: $kendo-pager-md-padding-y, + item-group-spacing: $kendo-pager-md-item-group-spacing, + item-min-width: $kendo-pager-md-item-min-width, + pager-dropdown-width: $kendo-pager-md-dropdown-width + ), + lg: ( + padding-x: $kendo-pager-lg-padding-x, + padding-y: $kendo-pager-lg-padding-y, + item-group-spacing: $kendo-pager-lg-item-group-spacing, + item-min-width: $kendo-pager-lg-item-min-width, + pager-dropdown-width: $kendo-pager-lg-dropdown-width + ) +)
  • sm: "padding-x":"var(--kendo-spacing-1, 0.25rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","item-group-spacing":"var(--kendo-spacing-3, 0.75rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\\.5, 0.125rem) * 2 + 2px)","pager-dropdown-width":"5em"
  • md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","item-group-spacing":"var(--kendo-spacing-3\\.5, 0.875rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)","pager-dropdown-width":"5em"
  • lg: "padding-x":"var(--kendo-spacing-2\\.5, 0.625rem)","padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","item-group-spacing":"var(--kendo-spacing-4, 1rem)","item-min-width":"calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)","pager-dropdown-width":"5em"
Description
The sizes map of the Pager.
+
+ +### Palette + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-palette-ash-grayMap$_default-palette-ash-gray
  • 1: #fafafa
  • 2: #f0f0f0
  • 3: #ebebeb
  • 4: #dddddd
  • 5: #d6d6d6
  • 6: #cacaca
  • 7: #b6b6b6
  • 8: #a3a3a3
  • 9: #8f8f8f
  • 10: #7a7a7a
  • 11: #666666
  • 12: #525252
  • 13: #404040
  • 14: #333333
  • 15: #272727
  • white: #ffffff
  • black: #000000
Description
The Ash Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
+
$kendo-palette-tangerine-orangeMap$_default-palette-tangerine-orange
  • 1: #fff2eb
  • 2: #ffe5d6
  • 3: #ffd8c2
  • 4: #ffcbad
  • 5: #ffbe99
  • 6: #ffa570
  • 7: #ff8b47
  • 8: #ff711f
  • 9: #f35800
  • 10: #e05100
  • 11: #cc4a00
  • 12: #b94300
  • 13: #a53c00
  • 14: #7a2d00
  • 15: #3d1600
Description
The Tangerine Orange Palette provides colors to the Primary variable group.
+
$kendo-palette-dodger-blueMap$_default-palette-dodger-blue
  • 1: #ebf8ff
  • 2: #d7f2ff
  • 3: #b8e8fe
  • 4: #9cdffe
  • 5: #72d1fe
  • 6: #49c4fd
  • 7: #2cbbfd
  • 8: #0db1fd
  • 9: #03a9f4
  • 10: #039be0
  • 11: #038ecd
  • 12: #0280b9
  • 13: #0273a6
  • 14: #014c6f
  • 15: #01364e
Description
The Dodger Blue Palette provides colors to the Tertiary variable group.
+
$kendo-palette-grass-greenMap$_default-palette-grass-green
  • 1: #f1f8f2
  • 2: #e3f2e6
  • 3: #d8eddc
  • 4: #bbdfc1
  • 5: #9ed1a6
  • 6: #82c48c
  • 7: #6ebb7a
  • 8: #4db25c
  • 9: #3ea44e
  • 10: #399748
  • 11: #348a42
  • 12: #2f7d3b
  • 13: #2a7035
  • 14: #1f5126
  • 15: #16391b
Description
The Grass Green Palette provides colors to the Success variable group.
+
$kendo-palette-lake-blueMap$_default-palette-lake-blue
  • 1: #eef6fb
  • 2: #deeef7
  • 3: #cce5f3
  • 4: #a6d1ea
  • 5: #8bc3e4
  • 6: #6ab2dc
  • 7: #409cd2
  • 8: #208ccb
  • 9: #007bc3
  • 10: #0071b3
  • 11: #0067a4
  • 12: #005d94
  • 13: #005485
  • 14: #004166
  • 15: #002b44
Description
The Lake Blue Palette provides colors to the Info variable group.
+
$kendo-palette-honey-yellowMap$_default-palette-honey-yellow
  • 1: #fff7eb
  • 2: #ffefd6
  • 3: #ffe7c2
  • 4: #ffdead
  • 5: #ffd699
  • 6: #ffc670
  • 7: #ffb240
  • 8: #ffa41f
  • 9: #ff9800
  • 10: #eb8c00
  • 11: #d68000
  • 12: #c27400
  • 13: #ad6700
  • 14: #854f00
  • 15: #593500
Description
The Honey Yellow Palette provides colors to the Warning variable group.
+
$kendo-palette-brick-redMap$_default-palette-brick-red
  • 1: #fcf0ed
  • 2: #f9e1dc
  • 3: #f7d4cc
  • 4: #f4c3b8
  • 5: #f2b4a6
  • 6: #ec8e79
  • 7: #e35e40
  • 8: #de4320
  • 9: #d92800
  • 10: #c82500
  • 11: #b62200
  • 12: #a51e00
  • 13: #941b00
  • 14: #701500
  • 15: #4c0e00
Description
The Brick Red Palette provides colors to the Error variable group.
+
$kendo-palette-coralMap$_default-palette-coral
  • 1: #fff6f5
  • 2: #ffeceb
  • 3: #ffdedb
  • 4: #ffc8c4
  • 5: #ffb1ac
  • 6: #ff9d97
  • 7: #ff8a82
  • 8: #ff766d
  • 9: #ff6358
  • 10: #ea5a51
  • 11: #d45349
  • 12: #bf4a42
  • 13: #a33f38
  • 14: #80322c
  • 15: #5c201c
Description
The Coral Palette provides colors to the Series A variable group.
+
$kendo-palette-pineapple-yellowMap$_default-palette-pineapple-yellow
  • 1: #fffaeb
  • 2: #fff7db
  • 3: #fff3cc
  • 4: #ffeeb8
  • 5: #ffe9a2
  • 6: #ffe38b
  • 7: #ffdd74
  • 8: #ffd85d
  • 9: #ffd246
  • 10: #eac040
  • 11: #d4af3b
  • 12: #bf9d35
  • 13: #a0832c
  • 14: #806923
  • 15: #403412
Description
The Pineapple Yellow provides colors to the Series B variable group.
+
$kendo-palette-apple-greenMap$_default-palette-apple-green
  • 1: #f3fbee
  • 2: #e9f8de
  • 3: #def4ce
  • 4: #d2f0bd
  • 5: #bbe99b
  • 6: #aae382
  • 7: #9add69
  • 8: #89d750
  • 9: #78d237
  • 10: #6ec032
  • 11: #64AF2E
  • 12: #5a9d29
  • 13: #4a8221
  • 14: #3c691c
  • 15: #1c300d
Description
The Apple Green provides colors to the Series C variable group.
+
$kendo-palette-pacific-blueMap$_default-palette-pacific-blue
  • 1: #ebf8fa
  • 2: #d6f1f5
  • 3: #c2e9ef
  • 4: #aee2ea
  • 5: #93d9e3
  • 6: #75d0db
  • 7: #5ec7d6
  • 8: #43becf
  • 9: #28b4c8
  • 10: #24a6b7
  • 11: #2197a6
  • 12: #1e8796
  • 13: #197480
  • 14: #145a64
  • 15: #0a2e33
Description
The Pacific Blue provides colors to the Series D variable group.
+
$kendo-palette-bright-blueMap$_default-palette-bright-blue
  • 1: #ecf2fe
  • 2: #d8e5fd
  • 3: #c5d8fc
  • 4: #b1cbfb
  • 5: #96b9fa
  • 6: #7ba7f9
  • 7: #6296f7
  • 8: #4684f6
  • 9: #2d73f5
  • 10: #2969e1
  • 11: #2660cc
  • 12: #2256b8
  • 13: #1d499a
  • 14: #173a7b
  • 15: #0c1e40
Description
The Bright Blue provides colors to the Series E variable group.
+
$kendo-palette-orchid-purpleMap$_default-palette-orchid-purple
  • 1: #f8f0fa
  • 2: #f1e1f5
  • 3: #e7caed
  • 4: #ddb3e5
  • 5: #d5a2df
  • 6: #c98ad6
  • 7: #bf74ce
  • 8: #b45dc6
  • 9: #9d40b0
  • 10: #9c40ae
  • 11: #8e3b9e
  • 12: #80358e
  • 13: #672b73
  • 14: #55235f
  • 15: #28112d
Description
The Orchid Purple provides colors to the Series F variable group.
+
+ +### Panel + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-panel-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Panel.
+
$kendo-panel-border-widthNumber1px1px
Description
The width of the border around the Panel.
+
$kendo-panel-border-styleStringsolidsolid
Description
The style of the border around the Panel.
+
$kendo-panel-header-padding-inlineStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The inline padding of the Panel header.
+
$kendo-panel-header-padding-blockStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The block padding of the Panel header.
+
$kendo-panel-content-padding-inlineStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The inline padding of the Panel content.
+
$kendo-panel-content-padding-blockStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The block padding of the Panel content.
+
$kendo-panel-textStringvar(--kendo-component-text, #{$kendo-component-text})var(--kendo-component-text, var(--kendo-color-on-app-surface, #272727))
Description
The text color of the Panel.
+
$kendo-panel-bgStringvar(--kendo-component-bg, #{$kendo-component-bg})var(--kendo-component-bg, var(--kendo-color-surface-alt, #ffffff))
Description
The background color of the Panel.
+
$kendo-panel-borderStringvar(--kendo-component-border, #{$kendo-component-border})var(--kendo-component-border, var(--kendo-color-border, #cacaca))
Description
The color of the border around the Panel.
+
+ +### Panelbar + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - + +
NameTypeDefault valueComputed value
$kendo-panelbar-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the PanelBar.
+
$kendo-panelbar-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the PanelBar.
+
$kendo-panelbar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the PanelBar.
+
$kendo-panelbar-font-sizeStringvar( --kendo-font-size, inherit )!defaultvar(--kendo-font-size, inherit)
Description
The font size of the PanelBar.
+
$kendo-panelbar-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the PanelBar.
+
$kendo-panelbar-border-widthNumber1px1px
Description
The width of the border around the PanelBar.
+
$kendo-panelbar-border-styleStringsolidsolid
Description
The border style around the the PanelBar.
+
$kendo-panelbar-item-border-widthNumber1px1px
Description
The width of the border around the PanelBar items.
+
$kendo-panelbar-item-border-styleStringsolidsolid
Description
The style of the border around the PanelBar items.
+
$kendo-panelbar-header-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the PanelBar header.
+
$kendo-panelbar-header-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the PanelBar header.
+
$kendo-panelbar-item-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the PanelBar items.
+
$kendo-panelbar-item-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the PanelBar items.
+
$kendo-panelbar-item-level-countNumber44
Description
The maximum nesting of the PanelBar items.
+
$kendo-panelbar-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PanelBar.
+
$kendo-panelbar-textString$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the PanelBar.
+
$kendo-panelbar-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The border color of the PanelBar.
+
$kendo-panelbar-header-bgString$kendo-component-header-bgvar(--kendo-color-surface, #f0f0f0)
Description
The background color of the PanelBar header.
+
$kendo-panelbar-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the PanelBar header.
+
$kendo-panelbar-header-borderString$kendo-component-header-bordervar(--kendo-color-border, #cacaca)
Description
The border color of the PanelBar header.
+
$kendo-panelbar-header-gradientNull$kendo-component-header-gradientnull
Description
The gradient of the PanelBar header.
+
$kendo-panelbar-header-hover-bgString$kendo-hover-bgvar(--kendo-color-base-hover, #dddddd)
Description
The background color of the hovered PanelBar header.
+
$kendo-panelbar-header-hover-textString$kendo-hover-textvar(--kendo-color-on-app-surface, #272727)
Description
The text color of the hovered PanelBar header.
+
$kendo-panelbar-header-hover-borderString$kendo-hover-bordervar(--kendo-color-border, #cacaca)
Description
The border color of the hovered PanelBar header.
+
$kendo-panelbar-header-hover-gradientNullnullnull
Description
The gradient of the hovered PanelBar header.
+
$kendo-panelbar-header-focus-bgNullnullnull
Description
The background color of the focused PanelBar header.
+
$kendo-panelbar-header-focus-textNullnullnull
Description
The text color of the focused PanelBar header.
+
$kendo-panelbar-header-focus-borderNullnullnull
Description
The border color of the focused PanelBar header.
+
$kendo-panelbar-header-focus-gradientNullnullnull
Description
The gradient of the focused PanelBar header.
+
$kendo-panelbar-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The shadow of the focused PanelBar header.
+
$kendo-panelbar-header-hover-focus-bgNullnullnull
Description
The background color of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-hover-focus-textNullnullnull
Description
The text color of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-hover-focus-borderNullnullnull
Description
The border color of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-hover-focus-gradientNullnullnull
Description
The gradient of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-selected-bgString$kendo-selected-bgvar(--kendo-color-primary, #f35800)
Description
The background color of the selected PanelBar header.
+
$kendo-panelbar-header-selected-textString$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected PanelBar header.
+
$kendo-panelbar-header-selected-borderString$kendo-selected-bordervar(--kendo-color-primary, #f35800)
Description
The border color of the selected PanelBar header.
+
$kendo-panelbar-header-selected-gradientNullnullnull
Description
The gradient of the selected PanelBar header.
+
$kendo-panelbar-header-selected-hover-bgStringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg ))var(--kendo-color-primary-hover, #e05100)
Description
The background color of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-hover-textNullnullnull
Description
The text color of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-hover-borderNullnullnull
Description
The border color of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-hover-gradientNullnullnull
Description
The gradient of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-focus-bgNullnullnull
Description
The background color of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-focus-textNullnullnull
Description
The text color of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-focus-borderNullnullnull
Description
The border color of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-focus-gradientNullnullnull
Description
The gradient of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-bgNullnullnull
Description
The background color of the selected, hovered and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-textNullnullnull
Description
The text color of the selected, hovered and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-borderNullnullnull
Description
The border color of the selected, hovered and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-gradientNullnullnull
Description
The gradient of the selected, hovered and focused PanelBar header.
+
$kendo-panelbar-item-hover-bgStringif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-panelbar-bg, .5 ))var(--kendo-color-base-subtle-hover, #ebebeb)
Description
The background color of the hovered PanelBar items.
+
$kendo-panelbar-item-hover-textNullnullnull
Description
The text color of the hovered PanelBar items.
+
$kendo-panelbar-item-hover-borderNullnullnull
Description
The border color of the hovered PanelBar items.
+
$kendo-panelbar-item-hover-gradientNullnullnull
Description
The gradient of the hovered PanelBar items.
+
$kendo-panelbar-item-focus-bgNullnullnull
Description
The background color of the focused PanelBar items.
+
$kendo-panelbar-item-focus-textNullnullnull
Description
The text color of the focused PanelBar items.
+
$kendo-panelbar-item-focus-borderNullnullnull
Description
The border color of the focused PanelBar items.
+
$kendo-panelbar-item-focus-gradientNullnullnull
Description
The gradient of the focused PanelBar items.
+
$kendo-panelbar-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused PanelBar items.
+
$kendo-panelbar-item-hover-focus-bgNullnullnull
Description
The background color of the focused and hovered PanelBar items.
+
$kendo-panelbar-item-hover-focus-textNullnullnull
Description
The text color of the focused and hovered PanelBar items.
+
$kendo-panelbar-item-hover-focus-borderNullnullnull
Description
The border color of the focused and hovered PanelBar items.
+
$kendo-panelbar-item-hover-focus-gradientNullnullnull
Description
The gradient of the focused and hovered PanelBar items.
+
$kendo-panelbar-item-selected-bgString$kendo-selected-bgvar(--kendo-color-primary, #f35800)
Description
The background color of the selected PanelBar items.
+
$kendo-panelbar-item-selected-textString$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected PanelBar items.
+
$kendo-panelbar-item-selected-borderNullnullnull
Description
The border color of the selected PanelBar items.
+
$kendo-panelbar-item-selected-gradientNullnullnull
Description
The horizontal padding of the PanelBar.
+
Description
The gradient of the selected PanelBar items.
$kendo-panelbar-padding-y$kendo-panelbar-item-selected-hover-bg Stringk-spacing(0)var(--kendo-spacing-0, 0px)if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg ))var(--kendo-color-primary-hover, #e05100)
Description
The vertical padding of the PanelBar.
+
Description
The background color of the selected and hovered PanelBar items.
$kendo-panelbar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)$kendo-panelbar-item-selected-hover-textNullnullnull
Description
The font family of the PanelBar.
+
Description
The text color of the selected and hovered PanelBar items.
$kendo-panelbar-font-sizeStringvar( --kendo-font-size, inherit )!defaultvar(--kendo-font-size, inherit)$kendo-panelbar-item-selected-hover-borderNullnullnull
Description
The font size of the PanelBar.
+
Description
The border color of the selected and hovered PanelBar items.
$kendo-panelbar-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)$kendo-panelbar-item-selected-hover-gradientNullnullnull
Description
The line height of the PanelBar.
+
Description
The gradient of the selected and hovered PanelBar items.
$kendo-panelbar-border-widthNumber1px1px$kendo-panelbar-item-selected-focus-bgNullnullnull
Description
The width of the border around the PanelBar.
+
Description
The background color of the selected and focused PanelBar items.
$kendo-panelbar-border-styleStringsolidsolid$kendo-panelbar-item-selected-focus-textNullnullnull
Description
The border style around the the PanelBar.
+
Description
The text color of the selected and focused PanelBar items.
$kendo-panelbar-item-border-widthNumber1px1px$kendo-panelbar-item-selected-focus-borderNullnullnull
Description
The width of the border around the PanelBar items.
+
Description
The border color of the selected and focused PanelBar items.
$kendo-panelbar-item-border-styleStringsolidsolid$kendo-panelbar-item-selected-focus-gradientNullnullnull
Description
The style of the border around the PanelBar items.
+
Description
The gradient of the selected and focused PanelBar items.
$kendo-panelbar-header-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-panelbar-item-selected-hover-focus-bgNullnullnull
Description
The horizontal padding of the PanelBar header.
+
Description
The background color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-header-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)$kendo-panelbar-item-selected-hover-focus-textNullnullnull
Description
The vertical padding of the PanelBar header.
+
Description
The text color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-panelbar-item-selected-hover-focus-borderNullnullnull
Description
The horizontal padding of the PanelBar items.
+
Description
The border color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)$kendo-panelbar-item-selected-hover-focus-gradientNullnullnull
Description
The vertical padding of the PanelBar items.
+
Description
The gradient of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-level-countNumber44$kendo-panelbar-header-expanded-bgNullnullnull
Description
The maximum nesting of the PanelBar items.
+
Description
The background color of the expanded PanelBar header.
$kendo-panelbar-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)$kendo-panelbar-header-expanded-textNullnullnull
Description
The background color of the PanelBar.
+
Description
The text color of the expanded PanelBar header.
$kendo-panelbar-textString$kendo-component-textvar(--kendo-color-on-app-surface, #272727)$kendo-panelbar-header-expanded-borderNullnullnull
Description
The text color of the PanelBar.
+
Description
The border color of the expanded PanelBar header.
$kendo-panelbar-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)$kendo-panelbar-header-expanded-gradientNullnullnull
Description
The border color of the PanelBar.
+
Description
The gradient of the expanded PanelBar header.
$kendo-panelbar-header-bg
+ +### Picker + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - + - + - - + - + - - + + + + + + + + + + - + - - + + + + + + + + + + - - + + - + + + + + + + + + - - - - + + + + - - + - + - - + - + - - + - + - - + - + - - + + + + + + + + + + - - - - - + + + + - - + - - + - - + - - + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + - - + - - - - - + + + + - - + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + - - + - - + + - - + - - + - - + - - - - - + + + + - - + - - + - - + - + + +
NameTypeDefault valueComputed value
$kendo-picker-bg String$kendo-component-header-bgvar(--kendo-color-surface, #f0f0f0)$kendo-button-bgvar(--kendo-color-base, #ebebeb)
Description
The background color of the PanelBar header.
+
Description
The background color of the Picker components.
$kendo-panelbar-header-text$kendo-picker-text String$kendo-component-header-textvar(--kendo-color-on-app-surface, #272727)$kendo-button-textvar(--kendo-color-on-base, #272727)
Description
The text color of the PanelBar header.
+
Description
The text color of the Picker components.
$kendo-panelbar-header-border$kendo-picker-border String$kendo-component-header-border$kendo-button-border var(--kendo-color-border, #cacaca)
Description
The border color of the PanelBar header.
+
Description
The border color of the Picker components.
$kendo-panelbar-header-gradient$kendo-picker-gradient Null$kendo-component-header-gradient$kendo-button-gradient null
Description
The gradient of the PanelBar header.
+
Description
The gradient of the Picker components.
$kendo-panelbar-header-hover-bg$kendo-picker-shadowNull$kendo-button-shadownull
Description
The shadow of the Picker components.
+
$kendo-picker-hover-bg String$kendo-hover-bg$kendo-button-hover-bg var(--kendo-color-base-hover, #dddddd)
Description
The background color of the hovered PanelBar header.
+
Description
The background color of the hovered Picker components.
$kendo-panelbar-header-hover-text$kendo-picker-hover-textNull$kendo-button-hover-textnull
Description
The text color of the hovered Picker components.
+
$kendo-picker-hover-border String$kendo-hover-textvar(--kendo-color-on-app-surface, #272727)$kendo-button-hover-bordervar(--kendo-color-border-alt, #b6b6b6)
Description
The text color of the hovered PanelBar header.
+
Description
The border color of the hovered Picker components.
+
$kendo-picker-hover-gradientNull$kendo-button-hover-gradientnull
Description
The gradient of the hovered Picker components.
$kendo-panelbar-header-hover-borderString$kendo-hover-bordervar(--kendo-color-border, #cacaca)$kendo-picker-hover-shadowNull$kendo-button-hover-shadownull
Description
The border color of the hovered PanelBar header.
+
Description
The shadow of the hovered Picker components.
$kendo-panelbar-header-hover-gradient$kendo-picker-focus-bg Nullnull$kendo-button-focus-bg null
Description
The gradient of the hovered PanelBar header.
+
Description
The background color of the focused Picker components.
$kendo-panelbar-header-focus-bg$kendo-picker-focus-text Nullnull$kendo-button-focus-text null
Description
The background color of the focused PanelBar header.
+
Description
The text color of the focused Picker components.
$kendo-panelbar-header-focus-text$kendo-picker-focus-border Nullnull$kendo-button-focus-border null
Description
The text color of the focused PanelBar header.
+
Description
The border color of the focused Picker components.
$kendo-panelbar-header-focus-border$kendo-picker-focus-gradient Nullnull$kendo-button-focus-gradient null
Description
The border color of the focused PanelBar header.
+
Description
The gradient of the focused Picker components.
$kendo-panelbar-header-focus-gradient$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 4px 0 color-mix(in srgb, var(--kendo-color-border, #cacaca) 75%, transparent)
Description
The shadow of the focused Picker components.
+
$kendo-picker-disabled-bg Null null null
Description
The gradient of the focused PanelBar header.
+
Description
The background color of the disabled Picker components.
$kendo-panelbar-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-picker-disabled-textNullnullnull
Description
The shadow of the focused PanelBar header.
+
Description
The text color of the disabled Picker components.
$kendo-panelbar-header-hover-focus-bg$kendo-picker-disabled-border Null null null
Description
The background color of the focused and hovered PanelBar header.
+
Description
The border color of the disabled Picker components.
$kendo-panelbar-header-hover-focus-text$kendo-picker-disabled-gradient Null null null
Description
The text color of the focused and hovered PanelBar header.
+
Description
The gradient of the disabled Picker components.
$kendo-panelbar-header-hover-focus-border$kendo-picker-disabled-shadow Null null null
Description
The border color of the focused and hovered PanelBar header.
+
Description
The shadow of the disabled Picker components.
$kendo-panelbar-header-hover-focus-gradient$kendo-picker-outline-bg Null null null
Description
The gradient of the focused and hovered PanelBar header.
+
Description
The background color of the outline Picker components.
$kendo-panelbar-header-selected-bg$kendo-picker-outline-text String$kendo-selected-bgvar(--kendo-color-primary, #f35800)$kendo-button-textvar(--kendo-color-on-base, #272727)
Description
The background color of the selected PanelBar header.
+
Description
The text color of the outline Picker components.
$kendo-panelbar-header-selected-text$kendo-picker-outline-border String$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))color-mix(in srgb, var(--kendo-color-on-app-surface, #272727) 50%, transparent)
Description
The text color of the selected PanelBar header.
+
Description
The border color of the outline Picker components.
$kendo-panelbar-header-selected-border$kendo-picker-outline-hover-bg String$kendo-selected-bordervar(--kendo-color-primary, #f35800)$kendo-picker-outline-textvar(--kendo-color-on-base, #272727)
Description
The border color of the selected PanelBar header.
+
Description
The background color of the outline hovered Picker components.
$kendo-panelbar-header-selected-gradientNullnullnull$kendo-picker-outline-hover-textStringif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))var(--kendo-color-base-subtle, #f0f0f0)
Description
The gradient of the selected PanelBar header.
+
Description
The text color of the outline hovered Picker components.
$kendo-panelbar-header-selected-hover-bg$kendo-picker-outline-hover-border Stringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg ))var(--kendo-color-primary-hover, #e05100)$kendo-picker-outline-hover-bgvar(--kendo-color-on-base, #272727)
Description
The background color of the selected and hovered PanelBar header.
+
Description
The border color of the outline hovered Picker components.
$kendo-panelbar-header-selected-hover-text$kendo-picker-outline-focus-bg Null null null
Description
The text color of the selected and hovered PanelBar header.
+
Description
The background color of the outline focused Picker components.
$kendo-panelbar-header-selected-hover-border$kendo-picker-outline-focus-text Null null null
Description
The border color of the selected and hovered PanelBar header.
+
Description
The text color of the outline focused Picker components.
$kendo-panelbar-header-selected-hover-gradient$kendo-picker-outline-focus-border Null null null
Description
The gradient of the selected and hovered PanelBar header.
+
Description
The border color of the outline focused Picker components.
$kendo-panelbar-header-selected-focus-bgNullnullnull$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 4px 0 color-mix(in srgb, var(--kendo-color-border, #cacaca) 75%, transparent)
Description
The background color of the selected and focused PanelBar header.
+
Description
The shadow of the outline focused Picker components.
$kendo-panelbar-header-selected-focus-text$kendo-picker-outline-hover-focus-bg Null null null
Description
The text color of the selected and focused PanelBar header.
+
Description
The background color of the outline hovered and focused Picker components.
$kendo-panelbar-header-selected-focus-border$kendo-picker-outline-hover-focus-text Null null null
Description
The border color of the selected and focused PanelBar header.
+
Description
The text color of the outline hovered and focused Picker components.
$kendo-panelbar-header-selected-focus-gradient$kendo-picker-outline-hover-focus-border Null null null
Description
The gradient of the selected and focused PanelBar header.
+
Description
The border color of the outline hovered and focused Picker components.
$kendo-panelbar-header-selected-hover-focus-bg$kendo-picker-flat-bg Null null null
Description
The background color of the selected, hovered and focused PanelBar header.
+
Description
The background color of the flat Picker components.
$kendo-panelbar-header-selected-hover-focus-textNullnullnull$kendo-picker-flat-textString$kendo-button-textvar(--kendo-color-on-base, #272727)
Description
The text color of the selected, hovered and focused PanelBar header.
+
Description
The text color of the flat Picker components.
$kendo-panelbar-header-selected-hover-focus-borderNullnullnull$kendo-picker-flat-borderString$kendo-button-bordervar(--kendo-color-border, #cacaca)
Description
The border color of the selected, hovered and focused PanelBar header.
+
Description
The border color of the flat Picker components.
$kendo-panelbar-header-selected-hover-focus-gradient$kendo-picker-flat-hover-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( $kendo-button-text, .04 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #272727) 4%, transparent)
Description
The background color of the flat hovered Picker components.
+
$kendo-picker-flat-hover-text Null null null
Description
The gradient of the selected, hovered and focused PanelBar header.
+
Description
The text color of the flat hovered Picker components.
$kendo-panelbar-item-hover-bg$kendo-picker-flat-hover-border Stringif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-panelbar-bg, .5 ))var(--kendo-color-base-subtle-hover, #ebebeb)if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), rgba( $kendo-button-border, .16 ))color-mix(in srgb, var(--kendo-color-border, #cacaca) 16%, transparent)
Description
The background color of the hovered PanelBar items.
+
Description
The border color of the flat hovered Picker components.
$kendo-panelbar-item-hover-text$kendo-picker-flat-focus-bg Null null null
Description
The text color of the hovered PanelBar items.
+
Description
The background color of the flat focused Picker components.
$kendo-panelbar-item-hover-border$kendo-picker-flat-focus-text Null null null
Description
The border color of the hovered PanelBar items.
+
Description
The text color of the flat focused Picker components.
$kendo-panelbar-item-hover-gradient$kendo-picker-flat-focus-border Null null null
Description
The gradient of the hovered PanelBar items.
+
Description
The border color of the flat focused Picker components.
$kendo-panelbar-item-focus-bgNullnullnull$kendo-picker-flat-focus-shadowList$kendo-picker-focus-shadow0 0 4px 0 color-mix(in srgb, var(--kendo-color-border, #cacaca) 75%, transparent)
Description
The background color of the focused PanelBar items.
+
Description
The shadow of the flat focused Picker components.
$kendo-panelbar-item-focus-text$kendo-picker-flat-hover-focus-bg Null null null
Description
The text color of the focused PanelBar items.
+
Description
The background color of the flat hovered and focused Picker components.
$kendo-panelbar-item-focus-border$kendo-picker-flat-hover-focus-text Null null null
Description
The border color of the focused PanelBar items.
+
Description
The text color of the flat hovered and focused Picker components.
$kendo-panelbar-item-focus-gradient$kendo-picker-flat-hover-focus-border Null null null
Description
The gradient of the focused PanelBar items.
+
Description
The border color of the flat hovered and focused Picker components.
+
+ +### Pivotgrid + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - - -
NameTypeDefault valueComputed value
$kendo-pivotgrid-spacerStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacer of the PivotGrid.
$kendo-panelbar-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-pivotgrid-padding-xNullnullnull
Description
The box shadow of the focused PanelBar items.
+
Description
The horizontal padding of the PivotGrid.
$kendo-panelbar-item-hover-focus-bg$kendo-pivotgrid-padding-y Null null null
Description
The background color of the focused and hovered PanelBar items.
+
Description
The vertical of the PivotGrid.
$kendo-panelbar-item-hover-focus-textNullnullnull$kendo-pivotgrid-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The text color of the focused and hovered PanelBar items.
+
Description
The font family of the PivotGrid.
$kendo-panelbar-item-hover-focus-borderNullnullnull$kendo-pivotgrid-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The border color of the focused and hovered PanelBar items.
+
Description
The font size of the PivotGrid.
$kendo-panelbar-item-hover-focus-gradientNullnullnull$kendo-pivotgrid-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The gradient of the focused and hovered PanelBar items.
+
Description
The line height of the PivotGrid.
$kendo-panelbar-item-selected-bgString$kendo-selected-bgvar(--kendo-color-primary, #f35800)$kendo-pivotgrid-border-widthNumber1px1px
Description
The background color of the selected PanelBar items.
+
Description
The border width of the PivotGrid.
$kendo-panelbar-item-selected-text$kendo-pivotgrid-icon-spacing String$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The text color of the selected PanelBar items.
+
Description
The icon spacing of the PivotGrid.
$kendo-panelbar-item-selected-borderNullnullnull$kendo-pivotgrid-row-header-widthNumber300px300px
Description
The border color of the selected PanelBar items.
+
Description
The default width of the PivotGrid row header.
$kendo-panelbar-item-selected-gradientNullnullnull$kendo-pivotgrid-column-header-heightNumber75px75px
Description
The gradient of the selected PanelBar items.
+
Description
The default height of the PivotGrid column header.
$kendo-panelbar-item-selected-hover-bg$kendo-pivotgrid-cell-padding-x Stringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg ))var(--kendo-color-primary-hover, #e05100)$kendo-table-md-cell-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The background color of the selected and hovered PanelBar items.
+
Description
The horizontal padding of the PivotGrid cell.
$kendo-panelbar-item-selected-hover-textNullnullnull$kendo-pivotgrid-cell-padding-yString$kendo-table-md-cell-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The text color of the selected and hovered PanelBar items.
+
Description
The vertical padding of the PivotGrid cell.
$kendo-panelbar-item-selected-hover-borderNullnullnull$kendo-pivotgrid-cell-border-widthNumber1px1px
Description
The border color of the selected and hovered PanelBar items.
+
Description
The border width of the PivotGrid cell.
$kendo-panelbar-item-selected-hover-gradientNullnullnull$kendo-pivotgrid-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The gradient of the selected and hovered PanelBar items.
+
Description
The background color of the PivotGrid.
$kendo-panelbar-item-selected-focus-bgNullnullnull$kendo-pivotgrid-textString$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The background color of the selected and focused PanelBar items.
+
Description
The text color of the PivotGrid.
$kendo-panelbar-item-selected-focus-textNullnullnull$kendo-pivotgrid-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The text color of the selected and focused PanelBar items.
+
Description
The border color of the PivotGrid.
$kendo-panelbar-item-selected-focus-borderNullnullnull$kendo-pivotgrid-alt-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 ))var(--kendo-color-border-alt, #b6b6b6)
Description
The border color of the selected and focused PanelBar items.
+
Description
The alt border color of the PivotGrid.
$kendo-panelbar-item-selected-focus-gradientNullnullnull$kendo-pivotgrid-headers-bgString$kendo-component-header-bgvar(--kendo-color-surface, #f0f0f0)
Description
The gradient of the selected and focused PanelBar items.
+
Description
The background color of the PivotGrid header.
$kendo-panelbar-item-selected-hover-focus-bgNullnullnull$kendo-pivotgrid-headers-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #272727)
Description
The background color of the selected, hovered and focused PanelBar items.
+
Description
The text color of the PivotGrid header.
$kendo-panelbar-item-selected-hover-focus-textNullnullnull$kendo-pivotgrid-headers-borderString$kendo-component-header-bordervar(--kendo-color-border, #cacaca)
Description
The text color of the selected, hovered and focused PanelBar items.
+
Description
The border color of the PivotGrid header.
$kendo-panelbar-item-selected-hover-focus-borderNullnullnull$kendo-pivotgrid-total-bgStringif($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-pivotgrid-bg, 1 ))var(--kendo-color-base, #ebebeb)
Description
The border color of the selected, hovered and focused PanelBar items.
+
Description
The background color of the PivotGrid total cells.
$kendo-panelbar-item-selected-hover-focus-gradientNullnullnull$kendo-pivotgrid-total-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #272727)
Description
The gradient of the selected, hovered and focused PanelBar items.
+
Description
The text color of the PivotGrid total cells.
$kendo-panelbar-header-expanded-bgNullnullnull$kendo-pivotgrid-total-borderString$kendo-component-header-bordervar(--kendo-color-border, #cacaca)
Description
The background color of the expanded PanelBar header.
+
Description
The border color of the PivotGrid total cells.
$kendo-panelbar-header-expanded-textNullnullnull$kendo-pivotgrid-hover-bgStringif($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% ))var(--kendo-color-base-subtle-hover, #ebebeb)
Description
The text color of the expanded PanelBar header.
+
Description
The hover background color of the PivotGrid.
$kendo-panelbar-header-expanded-border$kendo-pivotgrid-hover-text Null null null
Description
The border color of the expanded PanelBar header.
+
Description
The hover text color of the PivotGrid.
$kendo-panelbar-header-expanded-gradient$kendo-pivotgrid-hover-border Null null null
Description
The gradient of the expanded PanelBar header.
-
- -### Picker - - - - - - - - - - - - - - - - - - - - - - - - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - @@ -18710,7 +19970,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18720,7 +19980,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18730,7 +19990,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18740,7 +20000,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18750,7 +20010,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18760,7 +20020,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18770,7 +20030,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18780,7 +20040,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18790,7 +20050,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18800,7 +20060,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18810,7 +20070,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18820,7 +20080,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18830,7 +20090,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18840,7 +20100,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18850,7 +20110,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18860,7 +20120,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18870,7 +20130,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18880,7 +20140,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18890,7 +20150,7 @@ The following table lists the available variables for customizing the Classic th - @@ -18900,7 +20160,7 @@ The following table lists the available variables for customizing the Classic th - diff --git a/packages/classic/package.json b/packages/classic/package.json index e62edb50bac..4116c90f38a 100644 --- a/packages/classic/package.json +++ b/packages/classic/package.json @@ -1,7 +1,7 @@ { "name": "@progress/kendo-theme-classic", "description": "Sass port of less based themes for Kendo UI theme", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "author": "Progress", "license": "Apache-2.0", "keywords": [ @@ -53,9 +53,9 @@ }, "dependencies": { "@progress/kendo-svg-icons": "3.0.0", - "@progress/kendo-theme-core": "8.1.0-dev.2", - "@progress/kendo-theme-default": "8.1.0-dev.2", - "@progress/kendo-theme-utils": "8.1.0-dev.2" + "@progress/kendo-theme-core": "8.2.0-dev.0", + "@progress/kendo-theme-default": "8.2.0-dev.0", + "@progress/kendo-theme-utils": "8.2.0-dev.0" }, "directories": { "doc": "docs", diff --git a/packages/classic/scss/chart-wizard/_index.scss b/packages/classic/scss/chart-wizard/_index.scss new file mode 100644 index 00000000000..c1bcaf00a99 --- /dev/null +++ b/packages/classic/scss/chart-wizard/_index.scss @@ -0,0 +1,57 @@ +@import "../core/_index.scss"; +@import "../utils/_index.scss"; + + +// Module meta +$_kendo-module-meta: ( + name: "chart-wizard", + dependencies: ( + "icon", + "window", + "splitter", + "dataviz", + "expansion-panel", + "grid", + "tabstrip", + "listview", + "forms", + "combobox" + ) +); + + +// Dependencies +@import "../icons/_index.scss"; +@import "../window/_index.scss"; +@import "../splitter/_index.scss"; +@import "../dataviz/_index.scss"; +@import "../expansion-panel/_index.scss"; +@import "../grid/_index.scss"; +@import "../tabstrip/_index.scss"; +@import "../listview/_index.scss"; +@import "../forms/_index.scss"; +@import "../combobox/_index.scss"; + + +// Component +@import "./_variables.scss"; +@import "./_layout.scss"; +@import "./_theme.scss"; + + +// Register +@import "../core/module-system/index.import.scss"; +@include module-register( $_kendo-module-meta... ); + + +// Expose +@mixin kendo-chart-wizard--styles() { + @include module-render( "chart-wizard" ) { + @include kendo-chart-wizard--layout(); + @include kendo-chart-wizard--theme(); + } +} + +@if $kendo-auto-bootstrap { + @include kendo-chart-wizard--styles(); +} diff --git a/packages/classic/scss/chart-wizard/_layout.scss b/packages/classic/scss/chart-wizard/_layout.scss new file mode 100644 index 00000000000..9f8ffd1a5e4 --- /dev/null +++ b/packages/classic/scss/chart-wizard/_layout.scss @@ -0,0 +1,5 @@ +@import "@progress/kendo-theme-default/scss/chart-wizard/_layout.scss"; + +@mixin kendo-chart-wizard--layout() { + @include kendo-chart-wizard--layout-base(); +} diff --git a/packages/classic/scss/chart-wizard/_theme.scss b/packages/classic/scss/chart-wizard/_theme.scss new file mode 100644 index 00000000000..a870e71d7e5 --- /dev/null +++ b/packages/classic/scss/chart-wizard/_theme.scss @@ -0,0 +1,5 @@ +@import "@progress/kendo-theme-default/scss/chart-wizard/_theme.scss"; + +@mixin kendo-chart-wizard--theme() { + @include kendo-chart-wizard--theme-base(); +} diff --git a/packages/classic/scss/chart-wizard/_variables.scss b/packages/classic/scss/chart-wizard/_variables.scss new file mode 100644 index 00000000000..547faca9d24 --- /dev/null +++ b/packages/classic/scss/chart-wizard/_variables.scss @@ -0,0 +1,38 @@ +// Chart wizard + +/// The color of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default; +/// The background color of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-bg: if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle) !default; +/// The border radius of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-border-radius: k-border-radius(md) !default; +/// The padding of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-padding: k-spacing(4) !default; +/// The box shadow of the focused area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis) !default; +/// The box shadow of the selected area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-selected-shadow: inset 0 0 0 1px $kendo-chart-wizard-icon-area-color !default; + +/// The color of the selected chart type items in the Property panel. +/// @group chart-wizard +$kendo-chart-wizard-chart-type-selected-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default; + +/// The padding of the preview pane. +/// @group chart-wizard +$kendo-chart-wizard-preview-pane-padding: k-spacing(4) !default; +/// The padding of the property pane. +/// @group chart-wizard +$kendo-chart-wizard-property-pane-padding: k-spacing(4) !default; + +/// The gap between the chart type items in the Property panel. +/// @group chart-wizard +$kendo-chart-wizard-chart-type-spacing: k-spacing(4) !default; +/// The gap between the icon area and its text. +/// @group chart-wizard +$kendo-chart-wizard-icon-text-gap: k-spacing(3) !default; diff --git a/packages/classic/scss/chat/_variables.scss b/packages/classic/scss/chat/_variables.scss index 569efd761d9..2528ed04636 100644 --- a/packages/classic/scss/chat/_variables.scss +++ b/packages/classic/scss/chat/_variables.scss @@ -199,3 +199,13 @@ $kendo-chat-quick-reply-hover-text: $kendo-color-primary-contrast !default; /// The border color of the hovered Chat quick reply. /// @group chat $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default; + +/// The shadow blur of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-blur: 4px !default; +/// The shadow spread of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-spread: 0px !default; +/// The shadow opacity of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-opacity: .75 !default; diff --git a/packages/classic/scss/index.scss b/packages/classic/scss/index.scss index b8aa9bc22a7..fe7a48d64ca 100644 --- a/packages/classic/scss/index.scss +++ b/packages/classic/scss/index.scss @@ -122,6 +122,7 @@ @import "./splitter/_index.scss"; @import "./tilelayout/_index.scss"; @import "./dock-manager/_index.scss"; +@import "./chart-wizard/_index.scss"; // Data management @@ -293,6 +294,7 @@ @include kendo-splitter--styles(); @include kendo-tile-layout--styles(); @include kendo-dock-manager--styles(); + @include kendo-chart-wizard--styles(); // Data management diff --git a/packages/classic/scss/map/_variables.scss b/packages/classic/scss/map/_variables.scss index bf46400692f..26a3e25c128 100644 --- a/packages/classic/scss/map/_variables.scss +++ b/packages/classic/scss/map/_variables.scss @@ -2,29 +2,69 @@ // Map +/// The border width of the Map. +/// @group map $kendo-map-border-width: 0px !default; +/// The font size of the Map. +/// @group map $kendo-map-font-size: var( --kendo-font-size, inherit ) !default; +/// The line height of the Map. +/// @group map $kendo-map-line-height: var( --kendo-line-height, normal ) !default; +/// The font family of the Map. +/// @group map $kendo-map-font-family: var( --kendo-font-family, inherit ) !default; +/// The background color of the Map. +/// @group map $kendo-map-bg: $kendo-component-bg !default; +/// The text color of the Map. +/// @group map $kendo-map-text: $kendo-component-text !default; +/// The border color of the Map. +/// @group map $kendo-map-border: $kendo-component-border !default; +/// The margin of the Map navigator. +/// @group map $kendo-map-navigator-margin: k-spacing(4) !default; +/// The padding of the Map navigator. +/// @group map $kendo-map-navigator-padding: k-spacing(0.5) !default; +/// The width of the Map navigator. +/// @group map $kendo-map-navigator-width: calc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) ) !default; +/// The height of the Map navigator. +/// @group map $kendo-map-navigator-height: $kendo-map-navigator-width !default; +/// The border width of the Map navigator. +/// @group map $kendo-map-navigator-border-width: 1px !default; +/// The margin of the Map zoom control. +/// @group map $kendo-map-zoom-control-margin: k-spacing(4) !default; +/// The horizontal padding of the Map zoom control. +/// @group map $kendo-map-zoom-control-button-padding-x: $kendo-button-padding-y !default; +/// The vertical padding of the Map zoom control. +/// @group map $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-x !default; +/// The horizontal padding of the Map attribution. +/// @group map $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default; +/// The vertical padding of the Map attribution. +/// @group map $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default; +/// The font size of the Map attribution. +/// @group map $kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default; +/// The background color of the Map attribution. +/// @group map $kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) !default; +/// The fill color of the Map marker. +/// @group map $kendo-map-marker-fill: $kendo-color-primary !default; diff --git a/packages/classic/scss/mediaplayer/_variables.scss b/packages/classic/scss/mediaplayer/_variables.scss index b9691b5143a..f6f278c4d6b 100644 --- a/packages/classic/scss/mediaplayer/_variables.scss +++ b/packages/classic/scss/mediaplayer/_variables.scss @@ -1,16 +1,43 @@ // Media player + +/// The border width of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-border-width: 1px !default; +/// The font family of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-font-family: var( --kendo-font-family, inherit ) !default; +/// The font size of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-font-size: var( --kendo-font-size, inherit ) !default; +/// The line height of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-line-height: var( --kendo-line-height, normal ) !default; +/// The background color of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-bg: $kendo-component-bg !default; +/// The text color of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-text: $kendo-component-text !default; +/// The border color of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-border: $kendo-component-border !default; +/// The horizontal padding of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-padding-x: k-spacing(2) !default; +/// The vertical padding of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-padding-y: k-spacing(2) !default; +/// The background color of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-bg: null !default; +/// The text color of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-text: $kendo-media-player-bg !default; +/// The border color of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-border: null !default; +/// The gradient of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default; diff --git a/packages/classic/scss/pivotgrid/_variables.scss b/packages/classic/scss/pivotgrid/_variables.scss index 751678fa0c0..d0c66f24c10 100644 --- a/packages/classic/scss/pivotgrid/_variables.scss +++ b/packages/classic/scss/pivotgrid/_variables.scss @@ -2,101 +2,243 @@ // Pivot grid +/// The spacer of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-spacer: k-spacing(4) !default; +/// The horizontal padding of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-padding-x: null !default; +/// The vertical of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-padding-y: null !default; +/// The font family of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-font-family: var( --kendo-font-family, inherit ) !default; +/// The font size of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-font-size: var( --kendo-font-size, inherit ) !default; +/// The line height of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default; +/// The border width of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-border-width: 1px !default; +/// The icon spacing of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-icon-spacing: k-spacing(1) !default; +/// The default width of the PivotGrid row header. +/// @group pivotgrid $kendo-pivotgrid-row-header-width: 300px !default; +/// The default height of the PivotGrid column header. +/// @group pivotgrid $kendo-pivotgrid-column-header-height: 75px !default; +/// The horizontal padding of the PivotGrid cell. +/// @group pivotgrid $kendo-pivotgrid-cell-padding-x: $kendo-table-md-cell-padding-x !default; +/// The vertical padding of the PivotGrid cell. +/// @group pivotgrid $kendo-pivotgrid-cell-padding-y: $kendo-table-md-cell-padding-y !default; +/// The border width of the PivotGrid cell. +/// @group pivotgrid $kendo-pivotgrid-cell-border-width: 1px !default; +/// The background color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-bg: $kendo-component-bg !default; +/// The text color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-text: $kendo-component-text !default; +/// The border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-border: $kendo-component-border !default; +/// The alt border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 )) !default; +/// The background color of the PivotGrid header. +/// @group pivotgrid $kendo-pivotgrid-headers-bg: $kendo-component-header-bg !default; +/// The text color of the PivotGrid header. +/// @group pivotgrid $kendo-pivotgrid-headers-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid header. +/// @group pivotgrid $kendo-pivotgrid-headers-border: $kendo-component-header-border !default; +/// The background color of the PivotGrid total cells. +/// @group pivotgrid $kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default; +/// The text color of the PivotGrid total cells. +/// @group pivotgrid $kendo-pivotgrid-total-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid total cells. +/// @group pivotgrid $kendo-pivotgrid-total-border: $kendo-component-header-border !default; +/// The hover background color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% )) !default; +/// The hover text color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-hover-text: null !default; +/// The hover border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-hover-border: null !default; +/// The selected background color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default; +/// The selected text color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-selected-text: null !default; +/// The selected border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-selected-border: null !default; +/// The focus shadow of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-focus-shadow: $kendo-list-item-focus-shadow !default; // Pivotgrid Configurator +/// The horizontal padding of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-padding-x: null !default; +/// The vertical padding of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-padding-y: null !default; +/// The border width of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-border-width: 1px !default; +/// The horizontal padding of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-padding-y: calc( #{$kendo-pivotgrid-spacer} * .75 ) !default; +/// The font size of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-font-size: 18px !default; +/// The font weight of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-font-weight: 500 !default; +/// The horizontal padding of the PivotGrid configurator content. +/// @group pivotgrid $kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid configurator content. +/// @group pivotgrid $kendo-pivotgrid-configurator-content-padding-y: k-spacing(0) !default; +/// The horizontal margin of the PivotGrid configurator fields. +/// @group pivotgrid $kendo-pivotgrid-configurator-fields-margin-x: k-spacing(0) !default; +/// The vertical margin of the PivotGrid configurator fields. +/// @group pivotgrid $kendo-pivotgrid-configurator-fields-margin-y: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default; +/// The default width of the PivotGrid vertical configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-vertical-width: 320px !default; +/// The default height of the PivotGrid horizontal configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-horizontal-height: 420px !default; +/// The background color of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-bg: $kendo-component-bg !default; +/// The text color of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-text: $kendo-component-text !default; +/// The border color of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-border: $kendo-component-border !default; +/// The background color of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-bg: null !default; +/// The text color of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-border: null !default; +/// The shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-shadow: k-elevation(3); +/// The end shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-end-shadow: $kendo-pivotgrid-configurator-shadow !default; +/// The start shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-start-shadow: $kendo-pivotgrid-configurator-shadow !default; +/// The top shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-top-shadow: $kendo-pivotgrid-configurator-shadow !default; +/// The bottom shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-bottom-shadow: $kendo-pivotgrid-configurator-shadow !default; +/// The horizontal padding of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-padding-x: k-spacing(1) !default; +/// The vertical padding of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-padding-y: k-spacing(1) !default; +/// The border width of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-border-width: 1px !default; +/// The size of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-size: calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) ) !default; // Calculated fields +/// The horizontal padding of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default; +/// The border width of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-border-width: 1px !default; +/// The border radius of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-border-radius: k-border-radius(sm) !default; +/// The spacing of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default; +/// The background color of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-bg: $kendo-component-bg !default; +/// The text color of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-text: $kendo-component-text !default; +/// The border color of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-border: $kendo-component-border !default; +/// The background color of the PivotGrid calculated field header. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-bg: null !default; +/// The text color of the PivotGrid calculated field header. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid calculated field header. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-border: null !default; +/// The horizontal padding of the PivotGrid treeview. +/// @group pivotgrid $kendo-pivotgrid-treeview-padding-x: calc( #{$kendo-pivotgrid-spacer} / 2) !default; +/// The vertical padding of the PivotGrid treeview. +/// @group pivotgrid $kendo-pivotgrid-treeview-padding-y: k-spacing(0) !default; // Legacy variables diff --git a/packages/classic/scss/prompt/_variables.scss b/packages/classic/scss/prompt/_variables.scss index 7b4c0ed1777..3cbd5c39501 100644 --- a/packages/classic/scss/prompt/_variables.scss +++ b/packages/classic/scss/prompt/_variables.scss @@ -1,66 +1,66 @@ -// Prompt +// AIPrompt -/// The text color of the Prompt. +/// The text color of the AIPrompt. /// @group prompt $kendo-prompt-text: $kendo-component-text !default; -/// The background color of the Prompt. +/// The background color of the AIPrompt. /// @group prompt $kendo-prompt-bg: $kendo-component-bg !default; -/// The border color of the Prompt. +/// The border color of the AIPrompt. /// @group prompt $kendo-prompt-border: $kendo-component-border !default; -/// The text color of the Prompt header. +/// The text color of the AIPrompt header. /// @group prompt $kendo-prompt-header-text: $kendo-component-header-text !default; -/// The background color of the Prompt header. +/// The background color of the AIPrompt header. /// @group prompt $kendo-prompt-header-bg: $kendo-component-bg !default; -/// The border color of the Prompt header. +/// The border color of the AIPrompt header. /// @group prompt $kendo-prompt-header-border: $kendo-component-header-border !default; -/// The vertical padding of the Prompt content. +/// The vertical padding of the AIPrompt content. /// @group prompt $kendo-prompt-content-padding-y: k-spacing(4) !default; -/// The horizontal padding of the Prompt content. +/// The horizontal padding of the AIPrompt content. /// @group prompt $kendo-prompt-content-padding-x: k-spacing(4) !default; -/// The spacing between the items of the Prompt content. +/// The spacing between the items of the AIPrompt content. /// @group prompt $kendo-prompt-content-spacing: k-spacing(4) !default; -/// The text color of the Prompt content. +/// The text color of the AIPrompt content. /// @group prompt $kendo-prompt-content-text: $kendo-component-header-text !default; -/// The background color of the Prompt content. +/// The background color of the AIPrompt content. /// @group prompt $kendo-prompt-content-bg: $kendo-component-header-bg !default; -/// The text border of the Prompt content. +/// The text border of the AIPrompt content. /// @group prompt $kendo-prompt-content-border: $kendo-component-header-border !default; -/// The spacing between the items of the Prompt content expander. +/// The spacing between the items of the AIPrompt content expander. /// @group prompt $kendo-prompt-expander-spacing: k-spacing(2) !default; -/// The vertical padding of the Prompt suggestion container. +/// The vertical padding of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-padding-y: k-spacing(2) !default; -/// The horizontal padding of the Prompt suggestion container. +/// The horizontal padding of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-padding-x: k-spacing(2) !default; -/// The border radius of the Prompt suggestion container. +/// The border radius of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-border-radius: k-border-radius(md) !default; -/// The text color of the Prompt suggestion container. +/// The text color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-text: $kendo-component-text !default; -/// The background color of the Prompt suggestion container. +/// The background color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-bg: $kendo-body-bg !default; -/// The border color of the Prompt suggestion container. +/// The border color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-border: $kendo-component-border !default; -/// The elevation of the Prompt suggestion container. +/// The elevation of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-shadow: k-elevation(1) !default; diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 118bc4821bb..0627096a771 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,33 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [8.2.0-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.1-dev.0...v8.2.0-dev.0) (2024-07-15) + + +### Features + +* **chart-wizard:** add chart wizard component styles ([fb94657](https://github.com/telerik/kendo-themes/commit/fb9465737f7f7e64a20baefb715be976b0ab5fb6)) + + + + + +## [8.1.1-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.0...v8.1.1-dev.0) (2024-07-08) + +**Note:** Version bump only for package @progress/kendo-theme-core + + + + + +# [8.1.0](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.2...v8.1.0) (2024-07-03) + +**Note:** Version bump only for package @progress/kendo-theme-core + + + + + # [8.1.0-dev.2](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.1...v8.1.0-dev.2) (2024-07-01) **Note:** Version bump only for package @progress/kendo-theme-core diff --git a/packages/core/package.json b/packages/core/package.json index dccd292d643..b793e99cacf 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@progress/kendo-theme-core", "description": "A collection of functions and mixins used for building themes for Kendo UI", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "author": "Progress", "license": "Apache-2.0", "keywords": [ diff --git a/packages/core/scss/module-system/_components.scss b/packages/core/scss/module-system/_components.scss index 884354e13c5..3c60b2d9329 100644 --- a/packages/core/scss/module-system/_components.scss +++ b/packages/core/scss/module-system/_components.scss @@ -107,6 +107,7 @@ $kendo-components: ( "splitter", "tile-layout", "dock-manager", + "chart-wizard", // Data management "grid", diff --git a/packages/core/scss/module-system/_dependencies.scss b/packages/core/scss/module-system/_dependencies.scss index fc1d20e3b1a..48d6c9f3aa4 100644 --- a/packages/core/scss/module-system/_dependencies.scss +++ b/packages/core/scss/module-system/_dependencies.scss @@ -138,6 +138,18 @@ $_kendo-dependencies: ( "toolbar", "tabstrip" ), + chart-wizard: ( + "icon", + "window", + "splitter", + "dataviz", + "expansion-panel", + "grid", + "tabstrip", + "listview", + "forms", + "combobox" + ), editor: ( "button", "checkbox", diff --git a/packages/default/CHANGELOG.md b/packages/default/CHANGELOG.md index dc7feaec443..06bc44cacc3 100644 --- a/packages/default/CHANGELOG.md +++ b/packages/default/CHANGELOG.md @@ -3,6 +3,34 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [8.2.0-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.1-dev.0...v8.2.0-dev.0) (2024-07-15) + + +### Features + +* **chart-wizard:** add chart wizard component styles ([fb94657](https://github.com/telerik/kendo-themes/commit/fb9465737f7f7e64a20baefb715be976b0ab5fb6)) +* **chat:** add focus styles on quick replies ([c427ea1](https://github.com/telerik/kendo-themes/commit/c427ea1d65e0d53dd81142d09f54b4632d353833)) + + + + + +## [8.1.1-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.0...v8.1.1-dev.0) (2024-07-08) + +**Note:** Version bump only for package @progress/kendo-theme-default + + + + + +# [8.1.0](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.2...v8.1.0) (2024-07-03) + +**Note:** Version bump only for package @progress/kendo-theme-default + + + + + # [8.1.0-dev.2](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.1...v8.1.0-dev.2) (2024-07-01) diff --git a/packages/default/docs/customization-chart-wizard.md b/packages/default/docs/customization-chart-wizard.md new file mode 100644 index 00000000000..8d66c0810ed --- /dev/null +++ b/packages/default/docs/customization-chart-wizard.md @@ -0,0 +1,148 @@ +--- +title: Customizing ChartWizard +description: "Refer to the list of the Kendo UI Default theme variables available for customization." +slug: variables_kendothemedefault_chart-wizard +position: 9 +--- + +# Customizing ChartWizard + +## Variables + +The following table lists the available variables for customization. + +
NameTypeDefault valueComputed value
$kendo-picker-bgString$kendo-button-bgvar(--kendo-color-base, #ebebeb)
Description
The background color of the Picker components.
+
Description
The hover border color of the PivotGrid.
$kendo-picker-text$kendo-pivotgrid-selected-bg String$kendo-button-textvar(--kendo-color-on-base, #272727)if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 ))color-mix(in srgb, var(--kendo-color-primary, #f35800) 25%, transparent)
Description
The text color of the Picker components.
+
Description
The selected background color of the PivotGrid.
$kendo-picker-borderString$kendo-button-bordervar(--kendo-color-border, #cacaca)$kendo-pivotgrid-selected-textNullnullnull
Description
The border color of the Picker components.
+
Description
The selected text color of the PivotGrid.
$kendo-picker-gradient$kendo-pivotgrid-selected-border Null$kendo-button-gradientnull null
Description
The gradient of the Picker components.
+
Description
The selected border color of the PivotGrid.
$kendo-picker-shadowNull$kendo-button-shadownull$kendo-pivotgrid-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The shadow of the Picker components.
+
Description
The focus shadow of the PivotGrid.
$kendo-picker-hover-bgString$kendo-button-hover-bgvar(--kendo-color-base-hover, #dddddd)$kendo-pivotgrid-configurator-padding-xNullnullnull
Description
The background color of the hovered Picker components.
+
Description
The horizontal padding of the PivotGrid configurator.
$kendo-picker-hover-text$kendo-pivotgrid-configurator-padding-y Null$kendo-button-hover-textnull null
Description
The text color of the hovered Picker components.
+
Description
The vertical padding of the PivotGrid configurator.
$kendo-picker-hover-borderString$kendo-button-hover-bordervar(--kendo-color-border-alt, #b6b6b6)$kendo-pivotgrid-configurator-border-widthNumber1px1px
Description
The border color of the hovered Picker components.
+
Description
The border width of the PivotGrid configurator.
$kendo-picker-hover-gradientNull$kendo-button-hover-gradientnull$kendo-pivotgrid-configurator-header-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The gradient of the hovered Picker components.
+
Description
The horizontal padding of the PivotGrid configurator header.
$kendo-picker-hover-shadowNull$kendo-button-hover-shadownull$kendo-pivotgrid-configurator-header-padding-yCalculationcalc( #{$kendo-pivotgrid-spacer} * .75 )calc(var(--kendo-spacing-4, 1rem) * 0.75)
Description
The shadow of the hovered Picker components.
+
Description
The vertical padding of the PivotGrid configurator header.
$kendo-picker-focus-bgNull$kendo-button-focus-bgnull$kendo-pivotgrid-configurator-header-font-sizeNumber18px18px
Description
The background color of the focused Picker components.
+
Description
The font size of the PivotGrid configurator header.
$kendo-picker-focus-textNull$kendo-button-focus-textnull$kendo-pivotgrid-configurator-header-font-weightNumber500500
Description
The text color of the focused Picker components.
+
Description
The font weight of the PivotGrid configurator header.
$kendo-picker-focus-borderNull$kendo-button-focus-bordernull$kendo-pivotgrid-configurator-content-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The border color of the focused Picker components.
+
Description
The horizontal padding of the PivotGrid configurator content.
$kendo-picker-focus-gradientNull$kendo-button-focus-gradientnull$kendo-pivotgrid-configurator-content-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The gradient of the focused Picker components.
+
Description
The vertical padding of the PivotGrid configurator content.
$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 4px 0 color-mix(in srgb, var(--kendo-color-border, #cacaca) 75%, transparent)$kendo-pivotgrid-configurator-fields-margin-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The shadow of the focused Picker components.
+
Description
The horizontal margin of the PivotGrid configurator fields.
$kendo-picker-disabled-bgNullnullnull$kendo-pivotgrid-configurator-fields-margin-yCalculationcalc( #{$kendo-pivotgrid-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The background color of the disabled Picker components.
+
Description
The vertical margin of the PivotGrid configurator fields.
$kendo-picker-disabled-textNullnullnull$kendo-pivotgrid-configurator-vertical-widthNumber320px320px
Description
The text color of the disabled Picker components.
+
Description
The default width of the PivotGrid vertical configurator.
$kendo-picker-disabled-borderNullnullnull$kendo-pivotgrid-configurator-horizontal-heightNumber420px420px
Description
The border color of the disabled Picker components.
+
Description
The default height of the PivotGrid horizontal configurator.
$kendo-picker-disabled-gradientNullnullnull$kendo-pivotgrid-configurator-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The gradient of the disabled Picker components.
+
Description
The background color of the PivotGrid configurator.
$kendo-picker-disabled-shadowNullnullnull$kendo-pivotgrid-configurator-textString$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The shadow of the disabled Picker components.
+
Description
The text color of the PivotGrid configurator.
$kendo-picker-outline-bgNullnullnull$kendo-pivotgrid-configurator-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The background color of the outline Picker components.
+
Description
The border color of the PivotGrid configurator.
$kendo-picker-outline-textString$kendo-button-textvar(--kendo-color-on-base, #272727)$kendo-pivotgrid-configurator-header-bgNullnullnull
Description
The text color of the outline Picker components.
+
Description
The background color of the PivotGrid configurator header.
$kendo-picker-outline-border$kendo-pivotgrid-configurator-header-text Stringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))color-mix(in srgb, var(--kendo-color-on-app-surface, #272727) 50%, transparent)$kendo-component-header-textvar(--kendo-color-on-app-surface, #272727)
Description
The border color of the outline Picker components.
+
Description
The text color of the PivotGrid configurator header.
$kendo-picker-outline-hover-bgString$kendo-picker-outline-textvar(--kendo-color-on-base, #272727)$kendo-pivotgrid-configurator-header-borderNullnullnull
Description
The background color of the outline hovered Picker components.
+
Description
The border color of the PivotGrid configurator header.
$kendo-picker-outline-hover-text$kendo-pivotgrid-configurator-shadow Stringif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))var(--kendo-color-base-subtle, #f0f0f0)k-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The text color of the outline hovered Picker components.
+
Description
The shadow of the PivotGrid configurator.
$kendo-picker-outline-hover-border$kendo-pivotgrid-configurator-end-shadow String$kendo-picker-outline-hover-bgvar(--kendo-color-on-base, #272727)$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The border color of the outline hovered Picker components.
+
Description
The end shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-bgNullnullnull$kendo-pivotgrid-configurator-start-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The background color of the outline focused Picker components.
+
Description
The start shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-textNullnullnull$kendo-pivotgrid-configurator-top-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The text color of the outline focused Picker components.
+
Description
The top shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-borderNullnullnull$kendo-pivotgrid-configurator-bottom-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The border color of the outline focused Picker components.
+
Description
The bottom shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 4px 0 color-mix(in srgb, var(--kendo-color-border, #cacaca) 75%, transparent)$kendo-pivotgrid-configurator-button-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The shadow of the outline focused Picker components.
+
Description
The horizontal padding of the PivotGrid configurator button.
$kendo-picker-outline-hover-focus-bgNullnullnull$kendo-pivotgrid-configurator-button-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The background color of the outline hovered and focused Picker components.
+
Description
The vertical padding of the PivotGrid configurator button.
$kendo-picker-outline-hover-focus-textNullnullnull$kendo-pivotgrid-configurator-button-border-widthNumber1px1px
Description
The text color of the outline hovered and focused Picker components.
+
Description
The border width of the PivotGrid configurator button.
$kendo-picker-outline-hover-focus-borderNullnullnull$kendo-pivotgrid-configurator-button-sizeCalculationcalc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) )calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
Description
The border color of the outline hovered and focused Picker components.
+
Description
The size of the PivotGrid configurator button.
$kendo-picker-flat-bgNullnullnull$kendo-pivotgrid-calculated-field-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The background color of the flat Picker components.
+
Description
The horizontal padding of the PivotGrid calculated field.
$kendo-picker-flat-text$kendo-pivotgrid-calculated-field-padding-y String$kendo-button-textvar(--kendo-color-on-base, #272727)$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The text color of the flat Picker components.
+
Description
The vertical padding of the PivotGrid calculated field.
$kendo-picker-flat-borderString$kendo-button-bordervar(--kendo-color-border, #cacaca)$kendo-pivotgrid-calculated-field-border-widthNumber1px1px
Description
The border color of the flat Picker components.
+
Description
The border width of the PivotGrid calculated field.
$kendo-picker-flat-hover-bg$kendo-pivotgrid-calculated-field-border-radius Stringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( $kendo-button-text, .04 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #272727) 4%, transparent)k-border-radius(sm)var(--kendo-border-radius-sm, 0.125rem)
Description
The background color of the flat hovered Picker components.
+
Description
The border radius of the PivotGrid calculated field.
$kendo-picker-flat-hover-textNullnullnull$kendo-pivotgrid-calculated-field-gapString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The text color of the flat hovered Picker components.
+
Description
The spacing of the PivotGrid calculated field.
$kendo-picker-flat-hover-border$kendo-pivotgrid-calculated-field-bg Stringif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), rgba( $kendo-button-border, .16 ))color-mix(in srgb, var(--kendo-color-border, #cacaca) 16%, transparent)$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The border color of the flat hovered Picker components.
+
Description
The background color of the PivotGrid calculated field.
$kendo-picker-flat-focus-bgNullnullnull$kendo-pivotgrid-calculated-field-textString$kendo-component-textvar(--kendo-color-on-app-surface, #272727)
Description
The background color of the flat focused Picker components.
+
Description
The text color of the PivotGrid calculated field.
$kendo-picker-flat-focus-textNullnullnull$kendo-pivotgrid-calculated-field-borderString$kendo-component-bordervar(--kendo-color-border, #cacaca)
Description
The text color of the flat focused Picker components.
+
Description
The border color of the PivotGrid calculated field.
$kendo-picker-flat-focus-border$kendo-pivotgrid-calculated-field-header-bg Null null null
Description
The border color of the flat focused Picker components.
+
Description
The background color of the PivotGrid calculated field header.
$kendo-picker-flat-focus-shadowList$kendo-picker-focus-shadow0 0 4px 0 color-mix(in srgb, var(--kendo-color-border, #cacaca) 75%, transparent)$kendo-pivotgrid-calculated-field-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #272727)
Description
The shadow of the flat focused Picker components.
+
Description
The text color of the PivotGrid calculated field header.
$kendo-picker-flat-hover-focus-bg$kendo-pivotgrid-calculated-field-header-border Null null null
Description
The background color of the flat hovered and focused Picker components.
+
Description
The border color of the PivotGrid calculated field header.
$kendo-picker-flat-hover-focus-textNullnullnull$kendo-pivotgrid-treeview-padding-xCalculationcalc( #{$kendo-pivotgrid-spacer} / 2)calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The text color of the flat hovered and focused Picker components.
+
Description
The horizontal padding of the PivotGrid treeview.
$kendo-picker-flat-hover-focus-borderNullnullnull$kendo-pivotgrid-treeview-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The border color of the flat hovered and focused Picker components.
+
Description
The vertical padding of the PivotGrid treeview.
var(--kendo-color-on-app-surface, #272727)
Description
The text color of the Prompt.
+
Description
The text color of the AIPrompt.
var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Prompt.
+
Description
The background color of the AIPrompt.
var(--kendo-color-border, #cacaca)
Description
The border color of the Prompt.
+
Description
The border color of the AIPrompt.
var(--kendo-color-on-app-surface, #272727)
Description
The text color of the Prompt header.
+
Description
The text color of the AIPrompt header.
var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Prompt header.
+
Description
The background color of the AIPrompt header.
var(--kendo-color-border, #cacaca)
Description
The border color of the Prompt header.
+
Description
The border color of the AIPrompt header.
var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the Prompt content.
+
Description
The vertical padding of the AIPrompt content.
var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Prompt content.
+
Description
The horizontal padding of the AIPrompt content.
var(--kendo-spacing-4, 1rem)
Description
The spacing between the items of the Prompt content.
+
Description
The spacing between the items of the AIPrompt content.
var(--kendo-color-on-app-surface, #272727)
Description
The text color of the Prompt content.
+
Description
The text color of the AIPrompt content.
var(--kendo-color-surface, #f0f0f0)
Description
The background color of the Prompt content.
+
Description
The background color of the AIPrompt content.
var(--kendo-color-border, #cacaca)
Description
The text border of the Prompt content.
+
Description
The text border of the AIPrompt content.
var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the items of the Prompt content expander.
+
Description
The spacing between the items of the AIPrompt content expander.
var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Prompt suggestion container.
+
Description
The vertical padding of the AIPrompt suggestion container.
var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The horizontal padding of the AIPrompt suggestion container.
var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Prompt suggestion container.
+
Description
The border radius of the AIPrompt suggestion container.
var(--kendo-color-on-app-surface, #272727)
Description
The text color of the Prompt suggestion container.
+
Description
The text color of the AIPrompt suggestion container.
var(--kendo-color-app-surface, #ffffff)
Description
The background color of the Prompt suggestion container.
+
Description
The background color of the AIPrompt suggestion container.
var(--kendo-color-border, #cacaca)
Description
The border color of the Prompt suggestion container.
+
Description
The border color of the AIPrompt suggestion container.
var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The elevation of the Prompt suggestion container.
+
Description
The elevation of the AIPrompt suggestion container.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chart-wizard-icon-area-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #ff6358)
Description
The color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-bgStringif($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)var(--kendo-color-primary-subtle, #ffeceb)
Description
The background color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-focus-shadowListinset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)inset 0 0 0 1px var(--kendo-color-primary-emphasis, #ff9d97)
Description
The box shadow of the focused area around the chart type icon.
+
$kendo-chart-wizard-icon-area-selected-shadowListinset 0 0 0 1px $kendo-chart-wizard-icon-area-colorinset 0 0 0 1px var(--kendo-color-primary, #ff6358)
Description
The box shadow of the selected area around the chart type icon.
+
$kendo-chart-wizard-chart-type-selected-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #ff6358)
Description
The color of the selected chart type items in the Property panel.
+
$kendo-chart-wizard-preview-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the preview pane.
+
$kendo-chart-wizard-property-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the property pane.
+
$kendo-chart-wizard-chart-type-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The gap between the chart type items in the Property panel.
+
$kendo-chart-wizard-icon-text-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The gap between the icon area and its text.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/default/docs/customization-chat.md b/packages/default/docs/customization-chat.md index 61e86cf1a7f..63e4dfcaf2d 100644 --- a/packages/default/docs/customization-chat.md +++ b/packages/default/docs/customization-chat.md @@ -637,6 +637,36 @@ The following table lists the available variables for customization.
Description
The border color of the hovered Chat quick reply.
+ + $kendo-chat-quick-reply-shadow-blur + Number + 0px + 0px + + +
Description
The shadow blur of the focused Chat quick reply.
+ + + + $kendo-chat-quick-reply-shadow-spread + Number + 2px + 2px + + +
Description
The shadow spread of the focused Chat quick reply.
+ + + + $kendo-chat-quick-reply-shadow-opacity + Number + .3 + 0.3 + + +
Description
The shadow opacity of the focused Chat quick reply.
+ + diff --git a/packages/default/docs/customization-map.md b/packages/default/docs/customization-map.md new file mode 100644 index 00000000000..395006a842b --- /dev/null +++ b/packages/default/docs/customization-map.md @@ -0,0 +1,238 @@ +--- +title: Customizing Map +description: "Refer to the list of the Kendo UI Default theme variables available for customization." +slug: variables_kendothemedefault_map +position: 9 +--- + +# Customizing Map + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-map-border-widthNumber0px0px
Description
The border width of the Map.
+
$kendo-map-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Map.
+
$kendo-map-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Map.
+
$kendo-map-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Map.
+
$kendo-map-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Map.
+
$kendo-map-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the Map.
+
$kendo-map-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the Map.
+
$kendo-map-navigator-marginStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The margin of the Map navigator.
+
$kendo-map-navigator-paddingStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The padding of the Map navigator.
+
$kendo-map-navigator-widthCalculationcalc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) )calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The width of the Map navigator.
+
$kendo-map-navigator-heightCalculation$kendo-map-navigator-widthcalc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The height of the Map navigator.
+
$kendo-map-navigator-border-widthNumber1px1px
Description
The border width of the Map navigator.
+
$kendo-map-zoom-control-marginStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The margin of the Map zoom control.
+
$kendo-map-zoom-control-button-padding-xString$kendo-button-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the Map zoom control.
+
$kendo-map-zoom-control-button-padding-yString$kendo-map-zoom-control-button-padding-xvar(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Map zoom control.
+
$kendo-map-attribution-padding-xString$kendo-padding-sm-xvar(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the Map attribution.
+
$kendo-map-attribution-padding-yString$kendo-padding-sm-yvar(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the Map attribution.
+
$kendo-map-attribution-font-sizeCalculationcalc( #{$kendo-map-font-size} * .75)calc(var(--kendo-font-size, inherit) * 0.75)
Description
The font size of the Map attribution.
+
$kendo-map-attribution-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 ))color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent)
Description
The background color of the Map attribution.
+
$kendo-map-marker-fillString$kendo-color-primaryvar(--kendo-color-primary, #ff6358)
Description
The fill color of the Map marker.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/default/docs/customization-mediaplayer.md b/packages/default/docs/customization-mediaplayer.md new file mode 100644 index 00000000000..4883aa03908 --- /dev/null +++ b/packages/default/docs/customization-mediaplayer.md @@ -0,0 +1,168 @@ +--- +title: Customizing Mediaplayer +description: "Refer to the list of the Kendo UI Default theme variables available for customization." +slug: variables_kendothemedefault_mediaplayer +position: 9 +--- + +# Customizing Mediaplayer + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-media-player-border-widthNumber1px1px
Description
The border width of the MediaPlayer.
+
$kendo-media-player-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the MediaPlayer.
+
$kendo-media-player-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the MediaPlayer.
+
$kendo-media-player-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the MediaPlayer.
+
$kendo-media-player-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the MediaPlayer.
+
$kendo-media-player-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the MediaPlayer.
+
$kendo-media-player-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the MediaPlayer.
+
$kendo-media-player-titlebar-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the MediaPlayer title.
+
$kendo-media-player-titlebar-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the MediaPlayer title.
+
$kendo-media-player-titlebar-bgNullnullnull
Description
The background color of the MediaPlayer title.
+
$kendo-media-player-titlebar-textString$kendo-media-player-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The text color of the MediaPlayer title.
+
$kendo-media-player-titlebar-borderNullnullnull
Description
The border color of the MediaPlayer title.
+
$kendo-media-player-titlebar-gradientListif($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) ))color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 0%, transparent)
Description
The gradient of the MediaPlayer title.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/default/docs/customization-pivotgrid.md b/packages/default/docs/customization-pivotgrid.md new file mode 100644 index 00000000000..6e42c8b5ccc --- /dev/null +++ b/packages/default/docs/customization-pivotgrid.md @@ -0,0 +1,748 @@ +--- +title: Customizing Pivotgrid +description: "Refer to the list of the Kendo UI Default theme variables available for customization." +slug: variables_kendothemedefault_pivotgrid +position: 9 +--- + +# Customizing Pivotgrid + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-pivotgrid-spacerStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacer of the PivotGrid.
+
$kendo-pivotgrid-padding-xNullnullnull
Description
The horizontal padding of the PivotGrid.
+
$kendo-pivotgrid-padding-yNullnullnull
Description
The vertical of the PivotGrid.
+
$kendo-pivotgrid-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the PivotGrid.
+
$kendo-pivotgrid-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the PivotGrid.
+
$kendo-pivotgrid-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the PivotGrid.
+
$kendo-pivotgrid-border-widthNumber1px1px
Description
The border width of the PivotGrid.
+
$kendo-pivotgrid-icon-spacingStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The icon spacing of the PivotGrid.
+
$kendo-pivotgrid-row-header-widthNumber300px300px
Description
The default width of the PivotGrid row header.
+
$kendo-pivotgrid-column-header-heightNumber75px75px
Description
The default height of the PivotGrid column header.
+
$kendo-pivotgrid-cell-padding-xString$kendo-table-md-cell-padding-xvar(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the PivotGrid cell.
+
$kendo-pivotgrid-cell-padding-yString$kendo-table-md-cell-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the PivotGrid cell.
+
$kendo-pivotgrid-cell-border-widthNumber1px1px
Description
The border width of the PivotGrid cell.
+
$kendo-pivotgrid-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PivotGrid.
+
$kendo-pivotgrid-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PivotGrid.
+
$kendo-pivotgrid-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the PivotGrid.
+
$kendo-pivotgrid-alt-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-try-shade($kendo-pivotgrid-border, 2))var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))
Description
The alt border color of the PivotGrid.
+
$kendo-pivotgrid-headers-bgString$kendo-component-header-bgvar(--kendo-color-surface, #fafafa)
Description
The background color of the PivotGrid header.
+
$kendo-pivotgrid-headers-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PivotGrid header.
+
$kendo-pivotgrid-headers-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the PivotGrid header.
+
$kendo-pivotgrid-total-bgStringif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 ))var(--kendo-color-base-subtle, #ebebeb)
Description
The background color of the PivotGrid total cells.
+
$kendo-pivotgrid-total-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PivotGrid total cells.
+
$kendo-pivotgrid-total-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the PivotGrid total cells.
+
$kendo-pivotgrid-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-pivotgrid-bg, 7%))var(--kendo-color-base-hover, #ebebeb)
Description
The hover background color of the PivotGrid.
+
$kendo-pivotgrid-hover-textNullnullnull
Description
The hover text color of the PivotGrid.
+
$kendo-pivotgrid-hover-borderNullnullnull
Description
The hover border color of the PivotGrid.
+
$kendo-pivotgrid-selected-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)
Description
The selected background color of the PivotGrid.
+
$kendo-pivotgrid-selected-textNullnullnull
Description
The selected text color of the PivotGrid.
+
$kendo-pivotgrid-selected-borderNullnullnull
Description
The selected border color of the PivotGrid.
+
$kendo-pivotgrid-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The focus shadow of the PivotGrid.
+
$kendo-pivotgrid-configurator-padding-xNullnullnull
Description
The horizontal padding of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-padding-yNullnullnull
Description
The vertical padding of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-border-widthNumber1px1px
Description
The border width of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-header-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-padding-yCalculationcalc( #{$kendo-pivotgrid-spacer} * .75 )calc(var(--kendo-spacing-4, 1rem) * 0.75)
Description
The vertical padding of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-font-sizeNumber18px18px
Description
The font size of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-font-weightNumber500500
Description
The font weight of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-content-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid configurator content.
+
$kendo-pivotgrid-configurator-content-padding-yStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the PivotGrid configurator content.
+
$kendo-pivotgrid-configurator-fields-margin-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal margin of the PivotGrid configurator fields.
+
$kendo-pivotgrid-configurator-fields-margin-yCalculationcalc( #{$kendo-pivotgrid-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The vertical margin of the PivotGrid configurator fields.
+
$kendo-pivotgrid-configurator-vertical-widthNumber320px320px
Description
The default width of the PivotGrid vertical configurator.
+
$kendo-pivotgrid-configurator-horizontal-heightNumber420px420px
Description
The default height of the PivotGrid horizontal configurator.
+
$kendo-pivotgrid-configurator-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-header-bgNullnullnull
Description
The background color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-borderNullnullnull
Description
The border color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-end-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The end shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-start-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The start shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-top-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The top shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-bottom-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The bottom shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-button-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the PivotGrid configurator button.
+
$kendo-pivotgrid-configurator-button-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the PivotGrid configurator button.
+
$kendo-pivotgrid-configurator-button-border-widthNumber1px1px
Description
The border width of the PivotGrid configurator button.
+
$kendo-pivotgrid-configurator-button-sizeCalculationcalc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) )calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
Description
The size of the PivotGrid configurator button.
+
$kendo-pivotgrid-calculated-field-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-padding-yString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-border-widthNumber1px1px
Description
The border width of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-gapString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The spacing of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-header-bgNullnullnull
Description
The background color of the PivotGrid calculated field header.
+
$kendo-pivotgrid-calculated-field-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PivotGrid calculated field header.
+
$kendo-pivotgrid-calculated-field-header-borderNullnullnull
Description
The border color of the PivotGrid calculated field header.
+
$kendo-pivotgrid-treeview-padding-xCalculationcalc( #{$kendo-pivotgrid-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The horizontal padding of the PivotGrid treeview.
+
$kendo-pivotgrid-treeview-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the PivotGrid treeview.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/default/docs/customization-prompt.md b/packages/default/docs/customization-prompt.md index a97894e6b6c..afa467e992d 100644 --- a/packages/default/docs/customization-prompt.md +++ b/packages/default/docs/customization-prompt.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #3d3d3d) -
Description
The text color of the Prompt.
+
Description
The text color of the AIPrompt.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. var(--kendo-color-surface-alt, #ffffff) -
Description
The background color of the Prompt.
+
Description
The background color of the AIPrompt.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, rgba(0, 0, 0, 0.08)) -
Description
The border color of the Prompt.
+
Description
The border color of the AIPrompt.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #3d3d3d) -
Description
The text color of the Prompt header.
+
Description
The text color of the AIPrompt header.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. var(--kendo-color-surface-alt, #ffffff) -
Description
The background color of the Prompt header.
+
Description
The background color of the AIPrompt header.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, rgba(0, 0, 0, 0.08)) -
Description
The border color of the Prompt header.
+
Description
The border color of the AIPrompt header.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The vertical padding of the Prompt content.
+
Description
The vertical padding of the AIPrompt content.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The horizontal padding of the Prompt content.
+
Description
The horizontal padding of the AIPrompt content.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The spacing between the items of the Prompt content.
+
Description
The spacing between the items of the AIPrompt content.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #3d3d3d) -
Description
The text color of the Prompt content.
+
Description
The text color of the AIPrompt content.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. var(--kendo-color-surface, #fafafa) -
Description
The background color of the Prompt content.
+
Description
The background color of the AIPrompt content.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, rgba(0, 0, 0, 0.08)) -
Description
The text border of the Prompt content.
+
Description
The text border of the AIPrompt content.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The spacing between the items of the Prompt content expander.
+
Description
The spacing between the items of the AIPrompt content expander.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The vertical padding of the Prompt suggestion container.
+
Description
The vertical padding of the AIPrompt suggestion container.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The horizontal padding of the AIPrompt suggestion container.
@@ -184,7 +184,7 @@ The following table lists the available variables for customization. var(--kendo-border-radius-md, 0.25rem) -
Description
The border radius of the Prompt suggestion container.
+
Description
The border radius of the AIPrompt suggestion container.
@@ -194,7 +194,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #3d3d3d) -
Description
The text color of the Prompt suggestion container.
+
Description
The text color of the AIPrompt suggestion container.
@@ -204,7 +204,7 @@ The following table lists the available variables for customization. var(--kendo-color-app-surface, #ffffff) -
Description
The background color of the Prompt suggestion container.
+
Description
The background color of the AIPrompt suggestion container.
@@ -214,7 +214,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, rgba(0, 0, 0, 0.08)) -
Description
The border color of the Prompt suggestion container.
+
Description
The border color of the AIPrompt suggestion container.
@@ -224,7 +224,7 @@ The following table lists the available variables for customization. var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)) -
Description
The elevation of the Prompt suggestion container.
+
Description
The elevation of the AIPrompt suggestion container.
diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md index c1f494eeaae..61645f55e7f 100644 --- a/packages/default/docs/customization.md +++ b/packages/default/docs/customization.md @@ -4448,6 +4448,136 @@ The following table lists the available variables for customizing the Default th +### ChartWizard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chart-wizard-icon-area-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #ff6358)
Description
The color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-bgStringif($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)var(--kendo-color-primary-subtle, #ffeceb)
Description
The background color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-focus-shadowListinset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)inset 0 0 0 1px var(--kendo-color-primary-emphasis, #ff9d97)
Description
The box shadow of the focused area around the chart type icon.
+
$kendo-chart-wizard-icon-area-selected-shadowListinset 0 0 0 1px $kendo-chart-wizard-icon-area-colorinset 0 0 0 1px var(--kendo-color-primary, #ff6358)
Description
The box shadow of the selected area around the chart type icon.
+
$kendo-chart-wizard-chart-type-selected-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #ff6358)
Description
The color of the selected chart type items in the Property panel.
+
$kendo-chart-wizard-preview-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the preview pane.
+
$kendo-chart-wizard-property-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the property pane.
+
$kendo-chart-wizard-chart-type-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The gap between the chart type items in the Property panel.
+
$kendo-chart-wizard-icon-text-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The gap between the icon area and its text.
+
+ ### Charts @@ -5185,6 +5315,36 @@ The following table lists the available variables for customizing the Default th + + + + + + + + + + + + + + + + + + + + + + + + + + +
Description
The border color of the hovered Chat quick reply.
$kendo-chat-quick-reply-shadow-blurNumber0px0px
Description
The shadow blur of the focused Chat quick reply.
+
$kendo-chat-quick-reply-shadow-spreadNumber2px2px
Description
The shadow spread of the focused Chat quick reply.
+
$kendo-chat-quick-reply-shadow-opacityNumber.30.3
Description
The shadow opacity of the focused Chat quick reply.
+
@@ -14853,7 +15013,7 @@ The following table lists the available variables for customizing the Default th -### Menu +### Map @@ -14871,319 +15031,209 @@ The following table lists the available variables for customizing the Default th - - - - - - - - - - - - - - - - - - - + - - + + - - + - - + - - + - + + + + + + + + + + - - + - + - - + - + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
$kendo-menu-popup-padding-xNullnullnull
Description
Horizontal padding of the menu popup.
-
$kendo-menu-popup-padding-yNullnullnull
Description
Vertical padding of the menu popup.
-
$kendo-menu-popup-border-width$kendo-map-border-width Number$kendo-popup-border-width1px0px0px
Description
Width of the border around the menu popup.
+
Description
The border width of the Map.
$kendo-menu-popup-font-size$kendo-map-font-size String var( --kendo-font-size, inherit ) var(--kendo-font-size, inherit)
Description
Font sizes of the menu popup.
+
Description
The font size of the Map.
$kendo-menu-popup-line-height$kendo-map-line-height String var( --kendo-line-height, normal ) var(--kendo-line-height, normal)
Description
Line heights used along with $kendo-font-size.
+
Description
The line height of the Map.
$kendo-menu-popup-bg$kendo-map-font-family String$kendo-popup-bgvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Map.
+
$kendo-map-bgString$kendo-component-bg var(--kendo-color-surface-alt, #ffffff)
Description
The background of the menu popup.
+
Description
The background color of the Map.
$kendo-menu-popup-text$kendo-map-text String$kendo-popup-text$kendo-component-text var(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the menu popup.
+
Description
The text color of the Map.
$kendo-menu-popup-border$kendo-map-border String$kendo-popup-border$kendo-component-border var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the menu popup.
+
Description
The border color of the Map.
$kendo-menu-popup-gradientNullnullnull$kendo-map-navigator-marginStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The background gradient of the menu popup.
+
Description
The margin of the Map navigator.
$kendo-menu-popup-item-padding-x$kendo-map-navigator-padding Stringk-spacing(2)var(--kendo-spacing-2, 0.5rem)k-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
Horizontal padding of the menu item in popup.
+
Description
The padding of the Map navigator.
$kendo-menu-popup-item-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)$kendo-map-navigator-widthCalculationcalc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) )calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
Vertical padding of the menu item in popup.
+
Description
The width of the Map navigator.
$kendo-menu-popup-item-padding-end$kendo-map-navigator-height Calculationcalc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px)$kendo-map-navigator-widthcalc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The end padding of the menu item in popup.
+
Description
The height of the Map navigator.
$kendo-menu-popup-sm-item-icon-margin-startString$kendo-menu-popup-sm-item-padding-xvar(--kendo-spacing-2, 0.5rem)$kendo-map-navigator-border-widthNumber1px1px
Description
The start margin of the menu item expand icon.
+
Description
The border width of the Map navigator.
$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px) - var(--kendo-spacing-2, 0.5rem)/2))$kendo-map-zoom-control-marginStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The end margin of the menu item expand icon.
+
Description
The margin of the Map zoom control.
$kendo-menu-popup-item-spacing$kendo-map-zoom-control-button-padding-x Stringk-spacing(0)var(--kendo-spacing-0, 0px)$kendo-button-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The spacing between the menu items in popup.
+
Description
The horizontal padding of the Map zoom control.
$kendo-menu-popup-item-bgNullnullnull$kendo-map-zoom-control-button-padding-yString$kendo-map-zoom-control-button-padding-xvar(--kendo-spacing-1, 0.25rem)
Description
The background of the menu item in popup.
+
Description
The vertical padding of the Map zoom control.
$kendo-menu-popup-item-textNullnullnull$kendo-map-attribution-padding-xString$kendo-padding-sm-xvar(--kendo-spacing-1, 0.25rem)
Description
The text color of the menu item in popup.
+
Description
The horizontal padding of the Map attribution.
$kendo-menu-popup-item-borderNullnullnull$kendo-map-attribution-padding-yString$kendo-padding-sm-yvar(--kendo-spacing-0\.5, 0.125rem)
Description
The border color of the menu item in popup.
+
Description
The vertical padding of the Map attribution.
$kendo-menu-popup-item-gradientNullnullnull$kendo-map-attribution-font-sizeCalculationcalc( #{$kendo-map-font-size} * .75)calc(var(--kendo-font-size, inherit) * 0.75)
Description
The background gradient of the menu item in popup.
+
Description
The font size of the Map attribution.
$kendo-menu-popup-item-hover-bg$kendo-map-attribution-bg String$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #ebebeb)if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 ))color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent)
Description
The background of hovered menu item in popup.
+
Description
The background color of the Map attribution.
$kendo-menu-popup-item-hover-text$kendo-map-marker-fill String$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of hovered menu item in popup.
-
$kendo-menu-popup-item-hover-borderNullnullnull
Description
The border color of hovered menu item in popup.
-
$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The background gradient of hovered menu item in popup.
-
$kendo-menu-popup-item-expanded-bgString$kendo-list-item-selected-bg$kendo-color-primary var(--kendo-color-primary, #ff6358)
Description
The background of expanded menu item in popup.
-
$kendo-menu-popup-item-expanded-textString$kendo-list-item-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of expanded menu item in popup.
-
$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The border color of expanded menu item in popup.
-
$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The background gradient of expanded menu item in popup.
-
$kendo-menu-popup-item-focus-shadowList$kendo-menu-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The base shadow of focused menu item in popup.
-
- -### MenuButton - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xString$kendo-button-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the button arrow in the Menu Button..
+
Description
The fill color of the Map marker.
-### Notification +### Mediaplayer @@ -15201,159 +15251,139 @@ The following table lists the available variables for customizing the Default th - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - + - - + - - + + - - + - - + + - - + - - + - - + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + +
$kendo-notification-group-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The row-gap between the elements in the Notification group.
-
$kendo-notification-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Notification.
-
$kendo-notification-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Notification.
-
$kendo-notification-border-width$kendo-media-player-border-width Number 1px 1px
Description
The width of the border around the Notification.
-
$kendo-notification-border-radiusStringk-border-radius(md)!defaultvar(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Notification.
+
Description
The border width of the MediaPlayer.
$kendo-notification-font-family$kendo-media-player-font-family String var( --kendo-font-family, inherit ) var(--kendo-font-family, inherit)
Description
The font family of the Notification.
+
Description
The font family of the MediaPlayer.
$kendo-notification-font-size$kendo-media-player-font-size Stringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)var( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Notification.
+
Description
The font size of the MediaPlayer.
$kendo-notification-line-height$kendo-media-player-line-height Stringva( --kendo-line-height, normal )va(--kendo-line-height, normal)var( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Notification.
+
Description
The line height of the MediaPlayer.
$kendo-notification-bg$kendo-media-player-bg String $kendo-component-bg var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Notification.
+
Description
The background color of the MediaPlayer.
$kendo-notification-text$kendo-media-player-text String $kendo-component-text var(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the Notification.
+
Description
The text color of the MediaPlayer.
$kendo-notification-border$kendo-media-player-border String $kendo-component-border var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the Notification.
+
Description
The border color of the MediaPlayer.
$kendo-notification-shadow$kendo-media-player-titlebar-padding-x String$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The box shadow of the Notification.
+
Description
The horizontal padding of the MediaPlayer title.
$kendo-notification-icon-spacing$kendo-media-player-titlebar-padding-y String$kendo-icon-spacingvar(--kendo-spacing-1, 0.25rem)k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal spacing of the Notification icon.
+
Description
The vertical padding of the MediaPlayer title.
$kendo-notification-theme-colorsMap$kendo-theme-colors
  • primary: var(--kendo-color-primary, #ff6358)
  • secondary: var(--kendo-color-secondary, #666666)
  • tertiary: var(--kendo-color-tertiary, #03a9f4)
  • info: var(--kendo-color-info, #0058e9)
  • success: var(--kendo-color-success, #37b400)
  • warning: var(--kendo-color-warning, #ffc000)
  • error: var(--kendo-color-error, #f31700)
  • dark: var(--kendo-color-dark, #3d3d3d)
  • light: var(--kendo-color-light, #ebebeb)
  • inverse: var(--kendo-color-dark, #3d3d3d)
$kendo-media-player-titlebar-bgNullnullnull
Description
The theme colors map for the Notification.
+
Description
The background color of the MediaPlayer title.
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )
  • inverse: "color":"var(--kendo-color-on-inverse, #ffffff)","background-color":"var(--kendo-color-dark, #3d3d3d)","border":"var(--kendo-color-dark, #3d3d3d)"
  • light: "color":"var(--kendo-color-on-light, #000000)","background-color":"var(--kendo-color-light, #ebebeb)","border":"var(--kendo-color-light, #ebebeb)"
  • dark: "color":"var(--kendo-color-on-dark, #ffffff)","background-color":"var(--kendo-color-dark, #3d3d3d)","border":"var(--kendo-color-dark, #3d3d3d)"
  • error: "color":"var(--kendo-color-on-error, #ffffff)","background-color":"var(--kendo-color-error, #f31700)","border":"var(--kendo-color-error, #f31700)"
  • warning: "color":"var(--kendo-color-on-warning, #3d3d3d)","background-color":"var(--kendo-color-warning, #ffc000)","border":"var(--kendo-color-warning, #ffc000)"
  • success: "color":"var(--kendo-color-on-success, #ffffff)","background-color":"var(--kendo-color-success, #37b400)","border":"var(--kendo-color-success, #37b400)"
  • info: "color":"var(--kendo-color-on-info, #ffffff)","background-color":"var(--kendo-color-info, #0058e9)","border":"var(--kendo-color-info, #0058e9)"
  • tertiary: "color":"var(--kendo-color-on-tertiary, #ffffff)","background-color":"var(--kendo-color-tertiary, #03a9f4)","border":"var(--kendo-color-tertiary, #03a9f4)"
  • secondary: "color":"var(--kendo-color-on-secondary, #ffffff)","background-color":"var(--kendo-color-secondary, #666666)","border":"var(--kendo-color-secondary, #666666)"
  • primary: "color":"var(--kendo-color-on-primary, #ffffff)","background-color":"var(--kendo-color-primary, #ff6358)","border":"var(--kendo-color-primary, #ff6358)"
$kendo-media-player-titlebar-textString$kendo-media-player-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The generated theme colors map for the Notification.
+
Description
The text color of the MediaPlayer title.
+
$kendo-media-player-titlebar-borderNullnullnull
Description
The border color of the MediaPlayer title.
+
$kendo-media-player-titlebar-gradientListif($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) ))color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 0%, transparent)
Description
The gradient of the MediaPlayer title.
-### Orgchart +### Menu @@ -15371,449 +15401,489 @@ The following table lists the available variables for customizing the Default th - - - - - - - - - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - + - + - - + - + - - + - + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - + +
$kendo-orgchart-spacerStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The spacing index of the OrgChart.
-
$kendo-orgchart-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-padding-xNullnullnull
Description
The vertical padding of the OrgChart.
+
Description
Horizontal padding of the menu popup.
$kendo-orgchart-padding-xString$kendo-orgchart-padding-yvar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-padding-yNullnullnull
Description
The horizontal padding of the OrgChart.
+
Description
Vertical padding of the menu popup.
$kendo-orgchart-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)$kendo-menu-popup-border-widthNumber$kendo-popup-border-width1px
Description
The font family of the OrgChart.
+
Description
Width of the border around the menu popup.
$kendo-orgchart-font-size$kendo-menu-popup-font-size String var( --kendo-font-size, inherit ) var(--kendo-font-size, inherit)
Description
The font size of the OrgChart.
+
Description
Font sizes of the menu popup.
$kendo-orgchart-line-height$kendo-menu-popup-line-height String var( --kendo-line-height, normal ) var(--kendo-line-height, normal)
Description
The line height of the OrgChart.
+
Description
Line heights used along with $kendo-font-size.
$kendo-orgchart-bg$kendo-menu-popup-bg String$kendo-component-bg$kendo-popup-bg var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the OrgChart.
+
Description
The background of the menu popup.
$kendo-orgchart-text$kendo-menu-popup-text String$kendo-component-text$kendo-popup-text var(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the OrgChart.
+
Description
The text color of the menu popup.
$kendo-orgchart-border$kendo-menu-popup-border String$kendo-component-border$kendo-popup-border var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the OrgChart.
+
Description
The border color of the menu popup.
$kendo-orgchart-node-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-gradientNullnullnull
Description
The spacing of the OrgChart node.
+
Description
The background gradient of the menu popup.
$kendo-orgchart-group-gap$kendo-menu-popup-item-padding-x String$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing of the OrgChart group.
+
Description
Horizontal padding of the menu item in popup.
$kendo-orgchart-node-container-gap$kendo-menu-popup-item-padding-y String$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The spacing of the OrgChart node container.
+
Description
Vertical padding of the menu item in popup.
$kendo-orgchart-node-group-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px)
Description
The vertical padding of the OrgChart node group.
+
Description
The end padding of the menu item in popup.
$kendo-orgchart-node-group-padding-x$kendo-menu-popup-sm-item-icon-margin-start String$kendo-orgchart-node-group-padding-yvar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-sm-item-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the OrgChart node group.
+
Description
The start margin of the menu item expand icon.
$kendo-orgchart-node-group-border-widthNumber1px1px$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px) - var(--kendo-spacing-2, 0.5rem)/2))
Description
The border width of the OrgChart node group.
+
Description
The end margin of the menu item expand icon.
$kendo-orgchart-node-group-border-radius$kendo-menu-popup-item-spacing Stringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)k-spacing(0)var(--kendo-spacing-0, 0px)
Description
The border radius of the OrgChart node group.
+
Description
The spacing between the menu items in popup.
$kendo-orgchart-node-group-bgString$kendo-base-bgvar(--kendo-color-surface, #fafafa)$kendo-menu-popup-item-bgNullnullnull
Description
The background color of the OrgChart node group.
+
Description
The background of the menu item in popup.
$kendo-orgchart-node-group-textString$kendo-base-textvar(--kendo-color-on-app-surface, #3d3d3d)$kendo-menu-popup-item-textNullnullnull
Description
The text color of the OrgChart node group.
+
Description
The text color of the menu item in popup.
$kendo-orgchart-node-group-borderString$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))$kendo-menu-popup-item-borderNullnullnull
Description
The border color of the OrgChart node group.
+
Description
The border color of the menu item in popup.
$kendo-orgchart-node-group-focus-borderColor$kendo-card-focus-borderrgba(0, 0, 0, 0.15)$kendo-menu-popup-item-gradientNullnullnull
Description
The border color of the focused OrgChart node group.
+
Description
The background gradient of the menu item in popup.
$kendo-orgchart-node-group-focus-shadow$kendo-menu-popup-item-hover-bg Stringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The shadow of the focused OrgChart node group.
+
Description
The background of hovered menu item in popup.
$kendo-orgchart-node-group-title-font-size$kendo-menu-popup-item-hover-text Stringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The font size of the OrgChart node group title.
+
Description
The text color of hovered menu item in popup.
$kendo-orgchart-node-group-title-margin-bottomCalculationcalc( #{$kendo-orgchart-spacer} / 3 )calc(var(--kendo-spacing-6, 1.5rem) / 3)$kendo-menu-popup-item-hover-borderNullnullnull
Description
The bottom margin of the OrgChart node group title.
+
Description
The border color of hovered menu item in popup.
$kendo-orgchart-node-group-title-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The line height of the OrgChart node group title.
+
Description
The background gradient of hovered menu item in popup.
$kendo-orgchart-node-group-subtitle-font-size$kendo-menu-popup-item-expanded-bg Stringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)$kendo-list-item-selected-bgvar(--kendo-color-primary, #ff6358)
Description
The font size of the OrgChart node group subtitle.
+
Description
The background of expanded menu item in popup.
$kendo-orgchart-node-group-subtitle-margin-bottom$kendo-menu-popup-item-expanded-text String$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-list-item-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The bottom margin of the OrgChart node group subtitle.
+
Description
The text color of expanded menu item in popup.
$kendo-orgchart-node-group-subtitle-textString$kendo-subtle-textvar(--kendo-color-subtle, #666666)$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The line height of the OrgChart node group subtitle.
+
Description
The border color of expanded menu item in popup.
$kendo-orgchart-card-widthNumber300px300px$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The width of the OrgChart Card.
+
Description
The background gradient of expanded menu item in popup.
$kendo-orgchart-card-padding-yString$kendo-card-padding-yvar(--kendo-spacing-3, 0.75rem)$kendo-menu-popup-item-focus-shadowList$kendo-menu-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The vertical padding of the OrgChart Card.
+
Description
The base shadow of focused menu item in popup.
$kendo-orgchart-card-padding-x
+ +### MenuButton + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - + + - - - - - - + +
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-x String$kendo-orgchart-card-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the OrgChart Card.
-
$kendo-orgchart-card-border-widthNumber$kendo-card-border-width1px
Description
The border width of the OrgChart Card.
-
$kendo-orgchart-card-shadowNull$kendo-card-shadownull$kendo-button-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The shadow of the OrgChart Card.
+
Description
The horizontal padding of the button arrow in the Menu Button..
$kendo-orgchart-card-focus-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
+ +### Notification + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-notification-group-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The shadow of the focused OrgChart Card.
+
Description
The row-gap between the elements in the Notification group.
$kendo-orgchart-card-title-margin-bottom$kendo-notification-padding-x Stringk-spacing(0)var(--kendo-spacing-0, 0px)k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The bottom margin of the OrgChart Card title.
+
Description
The horizontal padding of the Notification.
$kendo-orgchart-card-title-font-sizeNullnullnull$kendo-notification-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The font size of the OrgChart Card title.
+
Description
The vertical padding of the Notification.
$kendo-orgchart-card-subtitle-margin-bottomStringk-spacing(0)var(--kendo-spacing-0, 0px)$kendo-notification-border-widthNumber1px1px
Description
The bottom margin of the OrgChart Card subtitle.
+
Description
The width of the border around the Notification.
$kendo-orgchart-card-subtitle-font-sizeNullnullnull$kendo-notification-border-radiusStringk-border-radius(md)!defaultvar(--kendo-border-radius-md, 0.25rem)
Description
The font size of the OrgChart Card subtitle.
+
Description
The border radius of the Notification.
$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0$kendo-notification-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The border width of the OrgChart Card body.
+
Description
The font family of the Notification.
$kendo-orgchart-card-body-border-colorColortransparenttransparent$kendo-notification-font-sizeStringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)
Description
The border color of the OrgChart Card body.
+
Description
The font size of the Notification.
$kendo-orgchart-card-body-vbox-margin-right$kendo-notification-line-height Stringk-math-div( $kendo-orgchart-spacer, 2 )var(--kendo-spacing-6, 1.5rem)/2va( --kendo-line-height, normal )va(--kendo-line-height, normal)
Description
The right margin of the OrgChart Card body title wrap.
+
Description
The line height of the Notification.
$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px$kendo-notification-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The min height of the OrgChart Card body title wrap.
+
Description
The background color of the Notification.
$kendo-orgchart-line-sizeNumber1px1px$kendo-notification-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The size of the OrgChart connecting line.
+
Description
The text color of the Notification.
$kendo-orgchart-line-fill$kendo-notification-border String$kendo-base-border$kendo-component-border var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The fill color of the OrgChart connecting line.
+
Description
The border color of the Notification.
$kendo-orgchart-line-v-heightNumber25px25px$kendo-notification-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The height of the OrgChart connecting line.
+
Description
The box shadow of the Notification.
+
$kendo-notification-icon-spacingString$kendo-icon-spacingvar(--kendo-spacing-1, 0.25rem)
Description
The horizontal spacing of the Notification icon.
+
$kendo-notification-theme-colorsMap$kendo-theme-colors
  • primary: var(--kendo-color-primary, #ff6358)
  • secondary: var(--kendo-color-secondary, #666666)
  • tertiary: var(--kendo-color-tertiary, #03a9f4)
  • info: var(--kendo-color-info, #0058e9)
  • success: var(--kendo-color-success, #37b400)
  • warning: var(--kendo-color-warning, #ffc000)
  • error: var(--kendo-color-error, #f31700)
  • dark: var(--kendo-color-dark, #3d3d3d)
  • light: var(--kendo-color-light, #ebebeb)
  • inverse: var(--kendo-color-dark, #3d3d3d)
Description
The theme colors map for the Notification.
+
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )
  • inverse: "color":"var(--kendo-color-on-inverse, #ffffff)","background-color":"var(--kendo-color-dark, #3d3d3d)","border":"var(--kendo-color-dark, #3d3d3d)"
  • light: "color":"var(--kendo-color-on-light, #000000)","background-color":"var(--kendo-color-light, #ebebeb)","border":"var(--kendo-color-light, #ebebeb)"
  • dark: "color":"var(--kendo-color-on-dark, #ffffff)","background-color":"var(--kendo-color-dark, #3d3d3d)","border":"var(--kendo-color-dark, #3d3d3d)"
  • error: "color":"var(--kendo-color-on-error, #ffffff)","background-color":"var(--kendo-color-error, #f31700)","border":"var(--kendo-color-error, #f31700)"
  • warning: "color":"var(--kendo-color-on-warning, #3d3d3d)","background-color":"var(--kendo-color-warning, #ffc000)","border":"var(--kendo-color-warning, #ffc000)"
  • success: "color":"var(--kendo-color-on-success, #ffffff)","background-color":"var(--kendo-color-success, #37b400)","border":"var(--kendo-color-success, #37b400)"
  • info: "color":"var(--kendo-color-on-info, #ffffff)","background-color":"var(--kendo-color-info, #0058e9)","border":"var(--kendo-color-info, #0058e9)"
  • tertiary: "color":"var(--kendo-color-on-tertiary, #ffffff)","background-color":"var(--kendo-color-tertiary, #03a9f4)","border":"var(--kendo-color-tertiary, #03a9f4)"
  • secondary: "color":"var(--kendo-color-on-secondary, #ffffff)","background-color":"var(--kendo-color-secondary, #666666)","border":"var(--kendo-color-secondary, #666666)"
  • primary: "color":"var(--kendo-color-on-primary, #ffffff)","background-color":"var(--kendo-color-primary, #ff6358)","border":"var(--kendo-color-primary, #ff6358)"
Description
The generated theme colors map for the Notification.
-### PDFViewer +### Orgchart @@ -15831,821 +15901,799 @@ The following table lists the available variables for customizing the Default th - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - - + - - + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - -
$kendo-pdf-viewer-border-widthNumber1px1px$kendo-orgchart-spacerStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The border width of the PDFViewer.
+
Description
The spacing index of the OrgChart.
$kendo-pdf-viewer-font-family$kendo-orgchart-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the OrgChart.
+
$kendo-orgchart-padding-xString$kendo-orgchart-padding-yvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the OrgChart.
+
$kendo-orgchart-font-family String var( --kendo-font-family, inherit ) var(--kendo-font-family, inherit)
Description
The font family of the PDFViewer.
+
Description
The font family of the OrgChart.
$kendo-pdf-viewer-font-size$kendo-orgchart-font-size String var( --kendo-font-size, inherit ) var(--kendo-font-size, inherit)
Description
The font size of the PDFViewer.
+
Description
The font size of the OrgChart.
$kendo-pdf-viewer-line-height$kendo-orgchart-line-height String var( --kendo-line-height, normal ) var(--kendo-line-height, normal)
Description
The line height of the PDFViewer.
+
Description
The line height of the OrgChart.
$kendo-pdf-viewer-bg$kendo-orgchart-bg String $kendo-component-bg var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PDFViewer.
+
Description
The background color of the OrgChart.
$kendo-pdf-viewer-text$kendo-orgchart-text String $kendo-component-text var(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PDFViewer.
+
Description
The text color of the OrgChart.
$kendo-pdf-viewer-border$kendo-orgchart-border String $kendo-component-border var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the PDFViewer.
+
Description
The border color of the OrgChart.
$kendo-pdf-viewer-toolbar-bgNullnullnull$kendo-orgchart-node-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The background color of the PDFViewer Toolbar.
+
Description
The spacing of the OrgChart node.
$kendo-pdf-viewer-toolbar-textNullnullnull$kendo-orgchart-group-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The text color of the PDFViewer Toolbar.
+
Description
The spacing of the OrgChart group.
$kendo-pdf-viewer-toolbar-borderNullnullnull$kendo-orgchart-node-container-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The border color of the PDFViewer Toolbar.
+
Description
The spacing of the OrgChart node container.
$kendo-pdf-viewer-toolbar-gradientNullnullnull$kendo-orgchart-node-group-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The gradient of the PDFViewer Toolbar.
+
Description
The vertical padding of the OrgChart node group.
$kendo-pdf-viewer-canvas-bg$kendo-orgchart-node-group-padding-x String$kendo-app-bgvar(--kendo-color-surface, #fafafa)$kendo-orgchart-node-group-padding-yvar(--kendo-spacing-6, 1.5rem)
Description
The background color of the PDFViewer canvas.
+
Description
The horizontal padding of the OrgChart node group.
$kendo-pdf-viewer-canvas-textNullnullnull$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The text color of the PDFViewer canvas.
+
Description
The border width of the OrgChart node group.
$kendo-pdf-viewer-canvas-borderNullnullnull$kendo-orgchart-node-group-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border color of the PDFViewer canvas.
+
Description
The border radius of the OrgChart node group.
$kendo-pdf-viewer-page-spacing$kendo-orgchart-node-group-bg Stringk-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)$kendo-base-bgvar(--kendo-color-surface, #fafafa)
Description
The spacing of the PDFViewer page.
+
Description
The background color of the OrgChart node group.
$kendo-pdf-viewer-page-bgColorwhitewhite$kendo-orgchart-node-group-textString$kendo-base-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The background color of the PDFViewer page.
+
Description
The text color of the OrgChart node group.
$kendo-pdf-viewer-page-text$kendo-orgchart-node-group-border String$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The text color of the PDFViewer page.
+
Description
The border color of the OrgChart node group.
$kendo-pdf-viewer-page-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))$kendo-orgchart-node-group-focus-borderColor$kendo-card-focus-borderrgba(0, 0, 0, 0.15)
Description
The border color of the PDFViewer page.
+
Description
The border color of the focused OrgChart node group.
$kendo-pdf-viewer-page-shadow$kendo-orgchart-node-group-focus-shadow Stringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))k-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the PDFViewer page.
+
Description
The shadow of the focused OrgChart node group.
$kendo-pdf-viewer-search-panel-padding-x$kendo-orgchart-node-group-title-font-size String$kendo-toolbar-md-padding-xvar(--kendo-spacing-2, 0.5rem)var( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The horizontal padding of the PDFViewer search panel.
+
Description
The font size of the OrgChart node group title.
$kendo-pdf-viewer-search-panel-padding-y$kendo-orgchart-node-group-title-margin-bottom Calculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(var(--kendo-spacing-2, 0.5rem) * 2)calc( #{$kendo-orgchart-spacer} / 3 )calc(var(--kendo-spacing-6, 1.5rem) / 3)
Description
The vertical padding of the PDFViewer search panel.
+
Description
The bottom margin of the OrgChart node group title.
$kendo-pdf-viewer-search-panel-spacing$kendo-orgchart-node-group-title-line-height String$kendo-toolbar-md-spacingvar(--kendo-spacing-2, 0.5rem)var( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The spacing of the PDFViewer search panel.
+
Description
The line height of the OrgChart node group title.
$kendo-pdf-viewer-search-panel-border-widthNumber1px1px$kendo-orgchart-node-group-subtitle-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The border width of the PDFViewer search panel.
+
Description
The font size of the OrgChart node group subtitle.
$kendo-pdf-viewer-search-panel-border-radiusNumber00$kendo-orgchart-node-group-subtitle-margin-bottomString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The border radius of the PDFViewer search panel.
+
Description
The bottom margin of the OrgChart node group subtitle.
$kendo-pdf-viewer-search-panel-bg$kendo-orgchart-node-group-subtitle-text String$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)$kendo-subtle-textvar(--kendo-color-subtle, #666666)
Description
The background color of the PDFViewer search panel.
+
Description
The line height of the OrgChart node group subtitle.
$kendo-pdf-viewer-search-panel-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)$kendo-orgchart-card-widthNumber300px300px
Description
The text color of the PDFViewer search panel.
+
Description
The width of the OrgChart Card.
$kendo-pdf-viewer-search-panel-border$kendo-orgchart-card-padding-y String$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))$kendo-card-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The border color of the PDFViewer search panel.
+
Description
The vertical padding of the OrgChart Card.
$kendo-pdf-viewer-search-panel-shadow$kendo-orgchart-card-padding-x String$kendo-window-shadowvar(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))$kendo-orgchart-card-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The shadow of the PDFViewer search panel.
+
Description
The horizontal padding of the OrgChart Card.
$kendo-pdf-viewer-search-panel-matches-spacingString$kendo-padding-sm-xvar(--kendo-spacing-1, 0.25rem)$kendo-orgchart-card-border-widthNumber$kendo-card-border-width1px
Description
The spacing of the matches container in the PDFViewer search panel.
+
Description
The border width of the OrgChart Card.
$kendo-pdf-viewer-selection-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)$kendo-orgchart-card-shadowNull$kendo-card-shadownull
Description
The line height of the PDFViewer selection.
+
Description
The shadow of the OrgChart Card.
$kendo-pdf-viewer-search-highlight-bg$kendo-orgchart-card-focus-shadow String$kendo-body-textvar(--kendo-color-on-app-surface, #3d3d3d)k-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The background color of the PDFViewer highlight.
+
Description
The shadow of the focused OrgChart Card.
$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow$kendo-orgchart-card-title-margin-bottomStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The background color of the PDFViewer highlight mark.
+
Description
The bottom margin of the OrgChart Card title.
$kendo-pdf-viewer-icon-textString$kendo-dropzone-icon-textvar(--kendo-color-subtle, #666666)$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The text color of the PDFViewer icon.
+
Description
The font size of the OrgChart Card title.
- -### Pager - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - + +
NameTypeDefault valueComputed value
$kendo-pager-padding-x
$kendo-orgchart-card-subtitle-margin-bottom Stringk-spacing(2)var(--kendo-spacing-2, 0.5rem)k-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the Pager.
+
Description
The bottom margin of the OrgChart Card subtitle.
$kendo-pager-sm-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The horizontal padding of the small Pager.
+
Description
The font size of the OrgChart Card subtitle.
$kendo-pager-md-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The horizontal padding of the medium Pager.
+
Description
The border width of the OrgChart Card body.
$kendo-pager-lg-padding-xStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)$kendo-orgchart-card-body-border-colorColortransparenttransparent
Description
The horizontal padding of the large Pager.
-
$kendo-pager-padding-yString$kendo-pager-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Pager.
-
$kendo-pager-sm-padding-yString$kendo-pager-sm-padding-xvar(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the small Pager.
-
$kendo-pager-md-padding-yString$kendo-pager-md-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the medium Pager.
+
Description
The border color of the OrgChart Card body.
$kendo-pager-lg-padding-y$kendo-orgchart-card-body-vbox-margin-right String$kendo-pager-lg-padding-xvar(--kendo-spacing-2\.5, 0.625rem)
Description
The vertical padding of the large Pager.
-
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px)
Description
The minimum width of the items in the small Pager.
-
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)k-math-div( $kendo-orgchart-spacer, 2 )var(--kendo-spacing-6, 1.5rem)/2
Description
The minimum width of the items in the medium Pagers.
+
Description
The right margin of the OrgChart Card body title wrap.
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px
Description
The minimum width of the items in the large Pagers.
+
Description
The min height of the OrgChart Card body title wrap.
$kendo-pager-sm-item-group-spacingStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)$kendo-orgchart-line-sizeNumber1px1px
Description
The margin between the item groups in the small Pager.
+
Description
The size of the OrgChart connecting line.
$kendo-pager-md-item-group-spacing$kendo-orgchart-line-fill Stringk-spacing(3.5)var(--kendo-spacing-3\.5, 0.875rem)$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The margin between the item groups in the medium Pager.
+
Description
The fill color of the OrgChart connecting line.
$kendo-pager-lg-item-group-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)$kendo-orgchart-line-v-heightNumber25px25px
Description
The margin between the item groups in the large Pager.
+
Description
The height of the OrgChart connecting line.
$kendo-pager-border-width
+ +### PDFViewer + + + + + + + + + + + + + + + + + + - - + - - + - - + - - + - - + + - - + - + - - + - - + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-pdf-viewer-border-width Number 1px 1px
Description
The border width of the Pager.
+
Description
The border width of the PDFViewer.
$kendo-pager-font-family$kendo-pdf-viewer-font-family String var( --kendo-font-family, inherit ) var(--kendo-font-family, inherit)
Description
The font family of the Pager.
+
Description
The font family of the PDFViewer.
$kendo-pager-font-size$kendo-pdf-viewer-font-size String var( --kendo-font-size, inherit ) var(--kendo-font-size, inherit)
Description
The font size of the Pager.
+
Description
The font size of the PDFViewer.
$kendo-pager-line-height$kendo-pdf-viewer-line-height String var( --kendo-line-height, normal ) var(--kendo-line-height, normal)
Description
The line height of the Pager.
+
Description
The line height of the PDFViewer.
$kendo-pager-bg$kendo-pdf-viewer-bg String$kendo-component-header-bgvar(--kendo-color-surface, #fafafa)$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Pager.
+
Description
The background color of the PDFViewer.
$kendo-pager-text$kendo-pdf-viewer-text String$kendo-component-header-text$kendo-component-text var(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the Pager.
+
Description
The text color of the PDFViewer.
$kendo-pager-border$kendo-pdf-viewer-border String $kendo-component-border var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the Pager.
+
Description
The border color of the PDFViewer.
$kendo-pager-focus-bg$kendo-pdf-viewer-toolbar-bg Null null null
Description
The background color of the focused Pager.
+
Description
The background color of the PDFViewer Toolbar.
$kendo-pager-focus-shadowList$kendo-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)$kendo-pdf-viewer-toolbar-textNullnullnull
Description
The box shadow of the focused Pager.
+
Description
The text color of the PDFViewer Toolbar.
$kendo-pager-item-border-widthNumber0px0px$kendo-pdf-viewer-toolbar-borderNullnullnull
Description
The border width of the Pager items.
+
Description
The border color of the PDFViewer Toolbar.
$kendo-pager-item-border-radius$kendo-pdf-viewer-toolbar-gradient Null null null
Description
The border radius of the Pager items.
+
Description
The gradient of the PDFViewer Toolbar.
$kendo-pager-item-spacingNullnullnull$kendo-pdf-viewer-canvas-bgString$kendo-app-bgvar(--kendo-color-surface, #fafafa)
Description
The spacing around the Pager items.
+
Description
The background color of the PDFViewer canvas.
$kendo-pager-item-bg$kendo-pdf-viewer-canvas-text Null null null
Description
The background color of the Pager items.
+
Description
The text color of the PDFViewer canvas.
$kendo-pager-item-text$kendo-pdf-viewer-canvas-border Null null null
Description
The text color of the Pager items.
+
Description
The border color of the PDFViewer canvas.
$kendo-pager-item-borderNullnullnull$kendo-pdf-viewer-page-spacingStringk-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)
Description
The border color of the Pager items.
+
Description
The spacing of the PDFViewer page.
$kendo-pager-item-hover-bgString$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #ebebeb)$kendo-pdf-viewer-page-bgColorwhitewhite
Description
The background color of the hovered Pager items.
+
Description
The background color of the PDFViewer page.
$kendo-pager-item-hover-text$kendo-pdf-viewer-page-text String$kendo-list-item-hover-text$kendo-component-text var(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the hovered Pager items.
+
Description
The text color of the PDFViewer page.
$kendo-pager-item-hover-borderNullnullnull$kendo-pdf-viewer-page-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the hovered Pager items.
+
Description
The border color of the PDFViewer page.
$kendo-pager-item-selected-bg$kendo-pdf-viewer-page-shadow String$kendo-list-item-selected-bgvar(--kendo-color-primary, #ff6358)k-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The background color of the selected Pager items.
+
Description
The shadow of the PDFViewer page.
$kendo-pager-item-selected-text$kendo-pdf-viewer-search-panel-padding-x String$kendo-list-item-selected-textvar(--kendo-color-on-primary, #ffffff)$kendo-toolbar-md-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The text color of the selected Pager items.
+
Description
The horizontal padding of the PDFViewer search panel.
$kendo-pager-item-selected-borderNullnullnull$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(var(--kendo-spacing-2, 0.5rem) * 2)
Description
The border color of the selected Pager items.
+
Description
The vertical padding of the PDFViewer search panel.
$kendo-pager-item-focus-opacityNullnullnull$kendo-pdf-viewer-search-panel-spacingString$kendo-toolbar-md-spacingvar(--kendo-spacing-2, 0.5rem)
Description
The opacity of the focused Pager items.
+
Description
The spacing of the PDFViewer search panel.
$kendo-pager-item-focus-bgColortransparenttransparent$kendo-pdf-viewer-search-panel-border-widthNumber1px1px
Description
The background color of the focused Pager items.
+
Description
The border width of the PDFViewer search panel.
$kendo-pager-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-pdf-viewer-search-panel-border-radiusNumber00
Description
The box shadow of the focused Pager items.
+
Description
The border radius of the PDFViewer search panel.
$kendo-pager-number-border-radiusNullnullnull$kendo-pdf-viewer-search-panel-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The border radius of the Pager numbers.
+
Description
The background color of the PDFViewer search panel.
$kendo-pager-input-widthNumber5em5em$kendo-pdf-viewer-search-panel-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The width of the Inputs in the Pager.
+
Description
The text color of the PDFViewer search panel.
$kendo-pager-sm-dropdown-widthNumber5em5em$kendo-pdf-viewer-search-panel-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The width of the DropDowns in the small Pager.
+
Description
The border color of the PDFViewer search panel.
$kendo-pager-md-dropdown-widthNumber5em5em$kendo-pdf-viewer-search-panel-shadowString$kendo-window-shadowvar(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The width of the DropDowns in the medium Pager.
+
Description
The shadow of the PDFViewer search panel.
$kendo-pager-lg-dropdown-widthNumber5em5em$kendo-pdf-viewer-search-panel-matches-spacingString$kendo-padding-sm-xvar(--kendo-spacing-1, 0.25rem)
Description
The width of the DropDowns in the large Pager.
+
Description
The spacing of the matches container in the PDFViewer search panel.
$kendo-pager-sizesMap( - sm: ( - padding-x: $kendo-pager-sm-padding-x, - padding-y: $kendo-pager-sm-padding-y, - item-group-spacing: $kendo-pager-sm-item-group-spacing, - item-min-width: $kendo-pager-sm-item-min-width, - pager-dropdown-width: $kendo-pager-sm-dropdown-width - ), - md: ( - padding-x: $kendo-pager-md-padding-x, - padding-y: $kendo-pager-md-padding-y, - item-group-spacing: $kendo-pager-md-item-group-spacing, - item-min-width: $kendo-pager-md-item-min-width, - pager-dropdown-width: $kendo-pager-md-dropdown-width - ), - lg: ( - padding-x: $kendo-pager-lg-padding-x, - padding-y: $kendo-pager-lg-padding-y, - item-group-spacing: $kendo-pager-lg-item-group-spacing, - item-min-width: $kendo-pager-lg-item-min-width, - pager-dropdown-width: $kendo-pager-lg-dropdown-width - ) -)
  • sm: "padding-x":"var(--kendo-spacing-1, 0.25rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","item-group-spacing":"var(--kendo-spacing-3, 0.75rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\\.5, 0.125rem) * 2 + 2px)","pager-dropdown-width":"5em"
  • md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","item-group-spacing":"var(--kendo-spacing-3\\.5, 0.875rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)","pager-dropdown-width":"5em"
  • lg: "padding-x":"var(--kendo-spacing-2\\.5, 0.625rem)","padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","item-group-spacing":"var(--kendo-spacing-4, 1rem)","item-min-width":"calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)","pager-dropdown-width":"5em"
$kendo-pdf-viewer-selection-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The sizes map of the Pager.
+
Description
The line height of the PDFViewer selection.
+
$kendo-pdf-viewer-search-highlight-bgString$kendo-body-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The background color of the PDFViewer highlight.
+
$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow
Description
The background color of the PDFViewer highlight mark.
+
$kendo-pdf-viewer-icon-textString$kendo-dropzone-icon-textvar(--kendo-color-subtle, #666666)
Description
The text color of the PDFViewer icon.
-### Palette +### Pager @@ -16663,1573 +16711,2785 @@ The following table lists the available variables for customizing the Default th - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - + + + + - - -
$kendo-palette-grayMap$_default-palette-gray
  • 1: #fafafa
  • 2: #f5f5f5
  • 3: #ebebeb
  • 4: #e0e0e0
  • 5: #d6d6d6
  • 6: #c2c2c2
  • 7: #adadad
  • 8: #999999
  • 9: #808080
  • 10: #666666
  • 11: #525252
  • 12: #3d3d3d
  • 13: #292929
  • 14: #1f1f1f
  • 15: #141414
  • white: #ffffff
  • black: #000000
$kendo-pager-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
+
Description
The horizontal padding of the Pager.
$kendo-palette-coralMap$_default-palette-coral
  • 1: #fff6f5
  • 2: #ffeceb
  • 3: #ffdedb
  • 4: #ffc8c4
  • 5: #ffb1ac
  • 6: #ff9d97
  • 7: #ff8a82
  • 8: #ff766d
  • 9: #ff6358
  • 10: #ea5a51
  • 11: #d45349
  • 12: #bf4a42
  • 13: #a33f38
  • 14: #80322c
  • 15: #5c201c
$kendo-pager-sm-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The Coral Palette provides colors to the Primary and Series A variable groups.
+
Description
The horizontal padding of the small Pager.
$kendo-palette-sky-blueMap$_default-palette-sky-blue
  • 1: #ebf8fe
  • 2: #d8f1fd
  • 3: #c5eafc
  • 4: #a3dffb
  • 5: #81d4fA
  • 6: #61c9f9
  • 7: #42bff7
  • 8: #22b3f5
  • 9: #03a9f4
  • 10: #039ae0
  • 11: #028ccb
  • 12: #027fb7
  • 13: #026999
  • 14: #02557a
  • 15: #023f5c
$kendo-pager-md-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The Sky Blue Palette provides colors to the Tertiary variable group.
+
Description
The horizontal padding of the medium Pager.
$kendo-palette-greenMap$_default-palette-green
  • 1: #edf8e9
  • 2: #dcf0d3
  • 3: #cbe9bf
  • 4: #b7e1a5
  • 5: #9bda80
  • 6: #81d15f
  • 7: #69c740
  • 8: #4ebe1f
  • 9: #37b400
  • 10: #32a500
  • 11: #2d9600
  • 12: #298700
  • 13: #227100
  • 14: #1c5a00
  • 15: #1c5a00
$kendo-pager-lg-padding-xStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The Green Palette provides colors to the Success variable group.
+
Description
The horizontal padding of the large Pager.
$kendo-palette-blueMap$_default-palette-blue
  • 1: #e9f0fd
  • 2: #d2e2fb
  • 3: #bdd4f8
  • 4: #9ec0f6
  • 5: #80acf4
  • 6: #6098f2
  • 7: #4082ef
  • 8: #206eec
  • 9: #0058e9
  • 10: #0052d6
  • 11: #004ac2
  • 12: #0042af
  • 13: #003892
  • 14: #002c75
  • 15: #002259
$kendo-pager-padding-yString$kendo-pager-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The Blue Palette provides colors to the Info variable group.
+
Description
The vertical padding of the Pager.
$kendo-palette-yellowMap$_default-palette-yellow
  • 1: #fffae9
  • 2: #fff4d3
  • 3: #ffeebd
  • 4: #ffe79e
  • 5: #ffe080
  • 6: #ffd760
  • 7: #ffd040
  • 8: #ffc720
  • 9: #ffc000
  • 10: #eaaf00
  • 11: #d49f00
  • 12: #bf9000
  • 13: #a07800
  • 14: #806000
  • 15: #5e4700
$kendo-pager-sm-padding-yString$kendo-pager-sm-padding-xvar(--kendo-spacing-1, 0.25rem)
Description
The Yellow Palette provides colors to the Warning variable group.
+
Description
The vertical padding of the small Pager.
$kendo-palette-redMap$_default-palette-red
  • 1: #feeeed
  • 2: #fcddda
  • 3: #fbc8c3
  • 4: #faaaa2
  • 5: #f98b80
  • 6: #f76f60
  • 7: #f65140
  • 8: #f43520
  • 9: #f31700
  • 10: #df1600
  • 11: #ca1400
  • 12: #b61100
  • 13: #980f00
  • 14: #7a0c00
  • 15: #7a0c00
$kendo-pager-md-padding-yString$kendo-pager-md-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The Red Palette provides colors to the Error variable group.
+
Description
The vertical padding of the medium Pager.
$kendo-palette-lemon-yellowMap$_default-palette-lemon-yellow
  • 1: #fffcf1
  • 2: #fffae2
  • 3: #fff7d4
  • 4: #fff4c2
  • 5: #fff0b1
  • 6: #ffed9d
  • 7: #ffe989
  • 8: #ffe676
  • 9: #ffe162
  • 10: #ead05a
  • 11: #d4bc52
  • 12: #bfa94a
  • 13: #a3913f
  • 14: #807131
  • 15: #5c5223
$kendo-pager-lg-padding-yString$kendo-pager-lg-padding-xvar(--kendo-spacing-2\.5, 0.625rem)
Description
The Lemon Yellow Palette provides colors to the Series B variable group.
+
Description
The vertical padding of the large Pager.
$kendo-palette-spring-greenMap$_default-palette-spring-green
  • 1: #effaf3
  • 2: #e0f6e8
  • 3: #d1f1dd
  • 4: #c0edd1
  • 5: #a6e8c0
  • 6: #8fe2af
  • 7: #79dda0
  • 8: #62d78f
  • 9: #4cd180
  • 10: #46c074
  • 11: #3fae6a
  • 12: #399d60
  • 13: #2f834f
  • 14: #266940
  • 15: #1c4f30
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px)
Description
The Spring Green Palette provides colors to the Series C variable group.
+
Description
The minimum width of the items in the small Pager.
$kendo-palette-royal-blueMap$_default-palette-royal-blue
  • 1: #f0f2ff
  • 2: #e1e4fe
  • 3: #d2d7fe
  • 4: #bbc3fd
  • 5: #a5affd
  • 6: #8e9bfc
  • 7: #7887fb
  • 8: #6173fb
  • 9: #4b5ffa
  • 10: #4558e5
  • 11: #3f50d1
  • 12: #3847bc
  • 13: #2f3c9d
  • 14: #26307d
  • 15: #1c245e
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)
Description
The Royal Blue Palette provides colors to the Series D variable group.
+
Description
The minimum width of the items in the medium Pagers.
$kendo-palette-lavender-purpleMap$_default-palette-lavender-purple
  • 1: #f7f0ff
  • 2: #f0e0ff
  • 3: #e8d1ff
  • 4: #dfbfff
  • 5: #d6acff
  • 6: #cc97ff
  • 7: #c182ff
  • 8: #b76dff
  • 9: #ac58ff
  • 10: #9e51ea
  • 11: #8f49d4
  • 12: #8142bf
  • 13: #6b37a0
  • 14: #562c80
  • 15: #3f205e
Description
The Lavender Purple Palette provides colors to the Series E variable group.
-
$kendo-palette-flamingo-pinkMap$_default-palette-flamingo-pink
  • 1: #fff0f5
  • 2: #ffe1eb
  • 3: #ffd1e1
  • 4: #ffbfd6
  • 5: #ffacc9
  • 6: #ff97bb
  • 7: #ff82ae
  • 8: #ff6da0
  • 9: #ff5892
  • 10: #ea5186
  • 11: #d4497a
  • 12: #bf426e
  • 13: #a0375c
  • 14: #802c49
  • 15: #5e2036
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)
Description
The Flamingo Pink Palette provides colors to the Series F variable group.
+
Description
The minimum width of the items in the large Pagers.
- -### Panel - - - - - - - - - - - - - - - - - - + + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - -
NameTypeDefault valueComputed value
$kendo-panel-border-radius
$kendo-pager-sm-item-group-spacing Stringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)k-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The border radius of the Panel.
+
Description
The margin between the item groups in the small Pager.
$kendo-panel-border-widthNumber1px1px$kendo-pager-md-item-group-spacingStringk-spacing(3.5)var(--kendo-spacing-3\.5, 0.875rem)
Description
The width of the border around the Panel.
+
Description
The margin between the item groups in the medium Pager.
$kendo-panel-border-style$kendo-pager-lg-item-group-spacing Stringsolidsolidk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The style of the border around the Panel.
+
Description
The margin between the item groups in the large Pager.
$kendo-panel-header-padding-inlineStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-pager-border-widthNumber1px1px
Description
The inline padding of the Panel header.
+
Description
The border width of the Pager.
$kendo-panel-header-padding-block$kendo-pager-font-family Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)var( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The block padding of the Panel header.
+
Description
The font family of the Pager.
$kendo-panel-content-padding-inline$kendo-pager-font-size Stringk-spacing(2)var(--kendo-spacing-2, 0.5rem)var( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The inline padding of the Panel content.
+
Description
The font size of the Pager.
$kendo-panel-content-padding-block$kendo-pager-line-height Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)var( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The block padding of the Panel content.
+
Description
The line height of the Pager.
$kendo-panel-text$kendo-pager-bg Stringvar(--kendo-component-text, #{$kendo-component-text})var(--kendo-component-text, var(--kendo-color-on-app-surface, #3d3d3d))$kendo-component-header-bgvar(--kendo-color-surface, #fafafa)
Description
The text color of the Panel.
+
Description
The background color of the Pager.
$kendo-panel-bg$kendo-pager-text Stringvar(--kendo-component-bg, #{$kendo-component-bg})var(--kendo-component-bg, var(--kendo-color-surface-alt, #ffffff))$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The background color of the Panel.
+
Description
The text color of the Pager.
$kendo-panel-border$kendo-pager-border Stringvar(--kendo-component-border, #{$kendo-component-border})var(--kendo-component-border, var(--kendo-color-border, rgba(0, 0, 0, 0.08)))$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The color of the border around the Panel.
+
Description
The border color of the Pager.
- -### Panelbar - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-panelbar-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
$kendo-pager-focus-bgNullnullnull
Description
The horizontal padding of the PanelBar.
+
Description
The background color of the focused Pager.
$kendo-panelbar-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)$kendo-pager-focus-shadowList$kendo-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The vertical padding of the PanelBar.
+
Description
The box shadow of the focused Pager.
$kendo-panelbar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)$kendo-pager-item-border-widthNumber0px0px
Description
The font family of the PanelBar.
+
Description
The border width of the Pager items.
$kendo-panelbar-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)$kendo-pager-item-border-radiusNullnullnull
Description
The font size of the PanelBar.
+
Description
The border radius of the Pager items.
$kendo-panelbar-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)$kendo-pager-item-spacingNullnullnull
Description
The line height of the PanelBar.
+
Description
The spacing around the Pager items.
$kendo-panelbar-border-widthNumber1px1px$kendo-pager-item-bgNullnullnull
Description
The width of the border around the PanelBar.
+
Description
The background color of the Pager items.
$kendo-panelbar-border-styleStringsolidsolid$kendo-pager-item-textNullnullnull
Description
The border style around the the PanelBar.
+
Description
The text color of the Pager items.
$kendo-panelbar-item-border-widthNumber1px1px$kendo-pager-item-borderNullnullnull
Description
The width of the border around the PanelBar items.
+
Description
The border color of the Pager items.
$kendo-panelbar-item-border-style$kendo-pager-item-hover-bg Stringsolidsolid$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The style of the border around the PanelBar items.
+
Description
The background color of the hovered Pager items.
$kendo-panelbar-header-padding-x$kendo-pager-item-hover-text Stringk-spacing(4)var(--kendo-spacing-4, 1rem)$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The horizontal padding of the PanelBar header.
+
Description
The text color of the hovered Pager items.
$kendo-panelbar-header-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)$kendo-pager-item-hover-borderNullnullnull
Description
The vertical padding of the PanelBar header.
+
Description
The border color of the hovered Pager items.
$kendo-panelbar-item-padding-x$kendo-pager-item-selected-bg Stringk-spacing(4)var(--kendo-spacing-4, 1rem)$kendo-list-item-selected-bgvar(--kendo-color-primary, #ff6358)
Description
The horizontal padding of the PanelBar items.
+
Description
The background color of the selected Pager items.
+
$kendo-pager-item-selected-textString$kendo-list-item-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected Pager items.
+
$kendo-pager-item-selected-borderNullnullnull
Description
The border color of the selected Pager items.
+
$kendo-pager-item-focus-opacityNullnullnull
Description
The opacity of the focused Pager items.
+
$kendo-pager-item-focus-bgColortransparenttransparent
Description
The background color of the focused Pager items.
+
$kendo-pager-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused Pager items.
+
$kendo-pager-number-border-radiusNullnullnull
Description
The border radius of the Pager numbers.
+
$kendo-pager-input-widthNumber5em5em
Description
The width of the Inputs in the Pager.
+
$kendo-pager-sm-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the small Pager.
+
$kendo-pager-md-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the medium Pager.
+
$kendo-pager-lg-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the large Pager.
+
$kendo-pager-sizesMap( + sm: ( + padding-x: $kendo-pager-sm-padding-x, + padding-y: $kendo-pager-sm-padding-y, + item-group-spacing: $kendo-pager-sm-item-group-spacing, + item-min-width: $kendo-pager-sm-item-min-width, + pager-dropdown-width: $kendo-pager-sm-dropdown-width + ), + md: ( + padding-x: $kendo-pager-md-padding-x, + padding-y: $kendo-pager-md-padding-y, + item-group-spacing: $kendo-pager-md-item-group-spacing, + item-min-width: $kendo-pager-md-item-min-width, + pager-dropdown-width: $kendo-pager-md-dropdown-width + ), + lg: ( + padding-x: $kendo-pager-lg-padding-x, + padding-y: $kendo-pager-lg-padding-y, + item-group-spacing: $kendo-pager-lg-item-group-spacing, + item-min-width: $kendo-pager-lg-item-min-width, + pager-dropdown-width: $kendo-pager-lg-dropdown-width + ) +)
  • sm: "padding-x":"var(--kendo-spacing-1, 0.25rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","item-group-spacing":"var(--kendo-spacing-3, 0.75rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\\.5, 0.125rem) * 2 + 2px)","pager-dropdown-width":"5em"
  • md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","item-group-spacing":"var(--kendo-spacing-3\\.5, 0.875rem)","item-min-width":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)","pager-dropdown-width":"5em"
  • lg: "padding-x":"var(--kendo-spacing-2\\.5, 0.625rem)","padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","item-group-spacing":"var(--kendo-spacing-4, 1rem)","item-min-width":"calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)","pager-dropdown-width":"5em"
Description
The sizes map of the Pager.
+
+ +### Palette + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-palette-grayMap$_default-palette-gray
  • 1: #fafafa
  • 2: #f5f5f5
  • 3: #ebebeb
  • 4: #e0e0e0
  • 5: #d6d6d6
  • 6: #c2c2c2
  • 7: #adadad
  • 8: #999999
  • 9: #808080
  • 10: #666666
  • 11: #525252
  • 12: #3d3d3d
  • 13: #292929
  • 14: #1f1f1f
  • 15: #141414
  • white: #ffffff
  • black: #000000
Description
The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
+
$kendo-palette-coralMap$_default-palette-coral
  • 1: #fff6f5
  • 2: #ffeceb
  • 3: #ffdedb
  • 4: #ffc8c4
  • 5: #ffb1ac
  • 6: #ff9d97
  • 7: #ff8a82
  • 8: #ff766d
  • 9: #ff6358
  • 10: #ea5a51
  • 11: #d45349
  • 12: #bf4a42
  • 13: #a33f38
  • 14: #80322c
  • 15: #5c201c
Description
The Coral Palette provides colors to the Primary and Series A variable groups.
+
$kendo-palette-sky-blueMap$_default-palette-sky-blue
  • 1: #ebf8fe
  • 2: #d8f1fd
  • 3: #c5eafc
  • 4: #a3dffb
  • 5: #81d4fA
  • 6: #61c9f9
  • 7: #42bff7
  • 8: #22b3f5
  • 9: #03a9f4
  • 10: #039ae0
  • 11: #028ccb
  • 12: #027fb7
  • 13: #026999
  • 14: #02557a
  • 15: #023f5c
Description
The Sky Blue Palette provides colors to the Tertiary variable group.
+
$kendo-palette-greenMap$_default-palette-green
  • 1: #edf8e9
  • 2: #dcf0d3
  • 3: #cbe9bf
  • 4: #b7e1a5
  • 5: #9bda80
  • 6: #81d15f
  • 7: #69c740
  • 8: #4ebe1f
  • 9: #37b400
  • 10: #32a500
  • 11: #2d9600
  • 12: #298700
  • 13: #227100
  • 14: #1c5a00
  • 15: #1c5a00
Description
The Green Palette provides colors to the Success variable group.
+
$kendo-palette-blueMap$_default-palette-blue
  • 1: #e9f0fd
  • 2: #d2e2fb
  • 3: #bdd4f8
  • 4: #9ec0f6
  • 5: #80acf4
  • 6: #6098f2
  • 7: #4082ef
  • 8: #206eec
  • 9: #0058e9
  • 10: #0052d6
  • 11: #004ac2
  • 12: #0042af
  • 13: #003892
  • 14: #002c75
  • 15: #002259
Description
The Blue Palette provides colors to the Info variable group.
+
$kendo-palette-yellowMap$_default-palette-yellow
  • 1: #fffae9
  • 2: #fff4d3
  • 3: #ffeebd
  • 4: #ffe79e
  • 5: #ffe080
  • 6: #ffd760
  • 7: #ffd040
  • 8: #ffc720
  • 9: #ffc000
  • 10: #eaaf00
  • 11: #d49f00
  • 12: #bf9000
  • 13: #a07800
  • 14: #806000
  • 15: #5e4700
Description
The Yellow Palette provides colors to the Warning variable group.
+
$kendo-palette-redMap$_default-palette-red
  • 1: #feeeed
  • 2: #fcddda
  • 3: #fbc8c3
  • 4: #faaaa2
  • 5: #f98b80
  • 6: #f76f60
  • 7: #f65140
  • 8: #f43520
  • 9: #f31700
  • 10: #df1600
  • 11: #ca1400
  • 12: #b61100
  • 13: #980f00
  • 14: #7a0c00
  • 15: #7a0c00
Description
The Red Palette provides colors to the Error variable group.
+
$kendo-palette-lemon-yellowMap$_default-palette-lemon-yellow
  • 1: #fffcf1
  • 2: #fffae2
  • 3: #fff7d4
  • 4: #fff4c2
  • 5: #fff0b1
  • 6: #ffed9d
  • 7: #ffe989
  • 8: #ffe676
  • 9: #ffe162
  • 10: #ead05a
  • 11: #d4bc52
  • 12: #bfa94a
  • 13: #a3913f
  • 14: #807131
  • 15: #5c5223
Description
The Lemon Yellow Palette provides colors to the Series B variable group.
+
$kendo-palette-spring-greenMap$_default-palette-spring-green
  • 1: #effaf3
  • 2: #e0f6e8
  • 3: #d1f1dd
  • 4: #c0edd1
  • 5: #a6e8c0
  • 6: #8fe2af
  • 7: #79dda0
  • 8: #62d78f
  • 9: #4cd180
  • 10: #46c074
  • 11: #3fae6a
  • 12: #399d60
  • 13: #2f834f
  • 14: #266940
  • 15: #1c4f30
Description
The Spring Green Palette provides colors to the Series C variable group.
+
$kendo-palette-royal-blueMap$_default-palette-royal-blue
  • 1: #f0f2ff
  • 2: #e1e4fe
  • 3: #d2d7fe
  • 4: #bbc3fd
  • 5: #a5affd
  • 6: #8e9bfc
  • 7: #7887fb
  • 8: #6173fb
  • 9: #4b5ffa
  • 10: #4558e5
  • 11: #3f50d1
  • 12: #3847bc
  • 13: #2f3c9d
  • 14: #26307d
  • 15: #1c245e
Description
The Royal Blue Palette provides colors to the Series D variable group.
+
$kendo-palette-lavender-purpleMap$_default-palette-lavender-purple
  • 1: #f7f0ff
  • 2: #f0e0ff
  • 3: #e8d1ff
  • 4: #dfbfff
  • 5: #d6acff
  • 6: #cc97ff
  • 7: #c182ff
  • 8: #b76dff
  • 9: #ac58ff
  • 10: #9e51ea
  • 11: #8f49d4
  • 12: #8142bf
  • 13: #6b37a0
  • 14: #562c80
  • 15: #3f205e
Description
The Lavender Purple Palette provides colors to the Series E variable group.
+
$kendo-palette-flamingo-pinkMap$_default-palette-flamingo-pink
  • 1: #fff0f5
  • 2: #ffe1eb
  • 3: #ffd1e1
  • 4: #ffbfd6
  • 5: #ffacc9
  • 6: #ff97bb
  • 7: #ff82ae
  • 8: #ff6da0
  • 9: #ff5892
  • 10: #ea5186
  • 11: #d4497a
  • 12: #bf426e
  • 13: #a0375c
  • 14: #802c49
  • 15: #5e2036
Description
The Flamingo Pink Palette provides colors to the Series F variable group.
+
+ +### Panel + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-panel-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Panel.
+
$kendo-panel-border-widthNumber1px1px
Description
The width of the border around the Panel.
+
$kendo-panel-border-styleStringsolidsolid
Description
The style of the border around the Panel.
+
$kendo-panel-header-padding-inlineStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The inline padding of the Panel header.
+
$kendo-panel-header-padding-blockStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The block padding of the Panel header.
+
$kendo-panel-content-padding-inlineStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The inline padding of the Panel content.
+
$kendo-panel-content-padding-blockStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The block padding of the Panel content.
+
$kendo-panel-textStringvar(--kendo-component-text, #{$kendo-component-text})var(--kendo-component-text, var(--kendo-color-on-app-surface, #3d3d3d))
Description
The text color of the Panel.
+
$kendo-panel-bgStringvar(--kendo-component-bg, #{$kendo-component-bg})var(--kendo-component-bg, var(--kendo-color-surface-alt, #ffffff))
Description
The background color of the Panel.
+
$kendo-panel-borderStringvar(--kendo-component-border, #{$kendo-component-border})var(--kendo-component-border, var(--kendo-color-border, rgba(0, 0, 0, 0.08)))
Description
The color of the border around the Panel.
+
+ +### Panelbar + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-panelbar-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the PanelBar.
+
$kendo-panelbar-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the PanelBar.
+
$kendo-panelbar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the PanelBar.
+
$kendo-panelbar-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the PanelBar.
+
$kendo-panelbar-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the PanelBar.
+
$kendo-panelbar-border-widthNumber1px1px
Description
The width of the border around the PanelBar.
+
$kendo-panelbar-border-styleStringsolidsolid
Description
The border style around the the PanelBar.
+
$kendo-panelbar-item-border-widthNumber1px1px
Description
The width of the border around the PanelBar items.
+
$kendo-panelbar-item-border-styleStringsolidsolid
Description
The style of the border around the PanelBar items.
+
$kendo-panelbar-header-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PanelBar header.
+
$kendo-panelbar-header-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the PanelBar header.
+
$kendo-panelbar-item-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PanelBar items.
$kendo-panelbar-item-padding-y Stringk-spacing(2)var(--kendo-spacing-2, 0.5rem)k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the PanelBar items.
+
$kendo-panelbar-item-level-countNumber44
Description
The maximum nesting of the PanelBar items.
+
$kendo-panelbar-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PanelBar.
+
$kendo-panelbar-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PanelBar.
+
$kendo-panelbar-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the PanelBar.
+
$kendo-panelbar-header-bgString$kendo-panelbar-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PanelBar header.
+
$kendo-panelbar-header-textString$kendo-link-textvar(--kendo-color-primary, #ff6358)
Description
The text color of the PanelBar header.
+
$kendo-panelbar-header-borderNullnullnull
Description
The border color of the PanelBar header.
+
$kendo-panelbar-header-gradientNullnullnull
Description
The gradient of the PanelBar header.
+
$kendo-panelbar-header-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 ))var(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered PanelBar header.
+
$kendo-panelbar-header-hover-textNullnullnull
Description
The text color of the hovered PanelBar header.
+
$kendo-panelbar-header-hover-borderNullnullnull
Description
The border color of the hovered PanelBar header.
+
$kendo-panelbar-header-hover-gradientNullnullnull
Description
The gradient of the hovered PanelBar header.
+
$kendo-panelbar-header-focus-bgNullnullnull
Description
The background color of the focused PanelBar header.
+
$kendo-panelbar-header-focus-textNullnullnull
Description
The text color of the focused PanelBar header.
+
$kendo-panelbar-header-focus-borderNullnullnull
Description
The border color of the focused PanelBar header.
+
$kendo-panelbar-header-focus-gradientNullnullnull
Description
The gradient of the focused PanelBar header.
+
$kendo-panelbar-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The shadow of the focused PanelBar header.
+
$kendo-panelbar-header-hover-focus-bgNullnullnull
Description
The background color of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-hover-focus-textNullnullnull
Description
The text color of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-hover-focus-borderNullnullnull
Description
The border color of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-hover-focus-gradientNullnullnull
Description
The gradient of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-selected-bgString$kendo-selected-bgvar(--kendo-color-primary, #ff6358)
Description
The background color of the selected PanelBar header.
+
$kendo-panelbar-header-selected-textString$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected PanelBar header.
+
$kendo-panelbar-header-selected-borderNullnullnull
Description
The border color of the selected PanelBar header.
+
$kendo-panelbar-header-selected-gradientNullnullnull
Description
The gradient of the selected PanelBar header.
+
$kendo-panelbar-header-selected-hover-bgStringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg ))var(--kendo-color-primary-hover, #ea5a51)
Description
The background color of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-hover-textNullnullnull
Description
The text color of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-hover-borderNullnullnull
Description
The border color of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-hover-gradientNullnullnull
Description
The gradient of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-focus-bgNullnullnull
Description
The background color of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-focus-textNullnullnull
Description
The text color of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-focus-borderNullnullnull
Description
The border color of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-focus-gradientNullnullnull
Description
The gradient of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-bgNullnullnull
Description
The background color of the selected, hovered and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-textNullnullnull
Description
The text color of the selected, hovered and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-borderNullnullnull
Description
The border color of the selected, hovered and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-gradientNullnullnull
Description
The gradient of the selected, hovered and focused PanelBar header.
+
$kendo-panelbar-item-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 ))var(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered PanelBar items.
+
$kendo-panelbar-item-hover-textNullnullnull
Description
The text color of the hovered PanelBar items.
+
$kendo-panelbar-item-hover-borderNullnullnull
Description
The border color of the hovered PanelBar items.
+
$kendo-panelbar-item-hover-gradientNullnullnull
Description
The gradient of the hovered PanelBar items.
+
$kendo-panelbar-item-focus-bgNullnullnull
Description
The background color of the focused PanelBar items.
+
$kendo-panelbar-item-focus-textNullnullnull
Description
The text color of the focused PanelBar items.
+
$kendo-panelbar-item-focus-borderNullnullnull
Description
The border color of the focused PanelBar items.
+
$kendo-panelbar-item-focus-gradientNullnullnull
Description
The gradient of the focused PanelBar items.
+
$kendo-panelbar-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused PanelBar items.
+
$kendo-panelbar-item-hover-focus-bgNullnullnull
Description
The background color of the focused and hovered PanelBar items.
+
$kendo-panelbar-item-hover-focus-textNullnullnull
Description
The text color of the focused and hovered PanelBar items.
+
$kendo-panelbar-item-hover-focus-borderNullnullnull
Description
The border color of the focused and hovered PanelBar items.
+
$kendo-panelbar-item-hover-focus-gradientNullnullnull
Description
The gradient of the focused and hovered PanelBar items.
+
$kendo-panelbar-item-selected-bgString$kendo-selected-bgvar(--kendo-color-primary, #ff6358)
Description
The background color of the selected PanelBar items.
+
$kendo-panelbar-item-selected-textString$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected PanelBar items.
+
$kendo-panelbar-item-selected-borderNullnullnull
Description
The border color of the selected PanelBar items.
+
$kendo-panelbar-item-selected-gradientNullnullnull
Description
The gradient of the selected PanelBar items.
+
$kendo-panelbar-item-selected-hover-bgStringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg ))var(--kendo-color-primary-hover, #ea5a51)
Description
The vertical padding of the PanelBar items.
+
Description
The background color of the selected and hovered PanelBar items.
$kendo-panelbar-item-level-countNumber44$kendo-panelbar-item-selected-hover-textNullnullnull
Description
The maximum nesting of the PanelBar items.
+
Description
The text color of the selected and hovered PanelBar items.
$kendo-panelbar-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)$kendo-panelbar-item-selected-hover-borderNullnullnull
Description
The background color of the PanelBar.
+
Description
The border color of the selected and hovered PanelBar items.
$kendo-panelbar-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)$kendo-panelbar-item-selected-hover-gradientNullnullnull
Description
The text color of the PanelBar.
+
Description
The gradient of the selected and hovered PanelBar items.
$kendo-panelbar-border$kendo-panelbar-item-selected-focus-bgNullnullnull
Description
The background color of the selected and focused PanelBar items.
+
$kendo-panelbar-item-selected-focus-textNullnullnull
Description
The text color of the selected and focused PanelBar items.
+
$kendo-panelbar-item-selected-focus-borderNullnullnull
Description
The border color of the selected and focused PanelBar items.
+
$kendo-panelbar-item-selected-focus-gradientNullnullnull
Description
The gradient of the selected and focused PanelBar items.
+
$kendo-panelbar-item-selected-hover-focus-bgNullnullnull
Description
The background color of the selected, hovered and focused PanelBar items.
+
$kendo-panelbar-item-selected-hover-focus-textNullnullnull
Description
The text color of the selected, hovered and focused PanelBar items.
+
$kendo-panelbar-item-selected-hover-focus-borderNullnullnull
Description
The border color of the selected, hovered and focused PanelBar items.
+
$kendo-panelbar-item-selected-hover-focus-gradientNullnullnull
Description
The gradient of the selected, hovered and focused PanelBar items.
+
$kendo-panelbar-header-expanded-bgNullnullnull
Description
The background color of the expanded PanelBar header.
+
$kendo-panelbar-header-expanded-textNullnullnull
Description
The text color of the expanded PanelBar header.
+
$kendo-panelbar-header-expanded-borderNullnullnull
Description
The border color of the expanded PanelBar header.
+
$kendo-panelbar-header-expanded-gradientNullnullnull
Description
The gradient of the expanded PanelBar header.
+
+ +### Picker + + + + + + + + + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - + - + - - + - + - - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - - + - + - - + - + - - + - + - - + - + - - - - - + + + + - - + - - - - - + + + + - - + - - + - - + - - + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + - - + - - - - - + + + + - - + - - + - - + - - + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + - - + - - + + - - + - - + - - + - - - - - + + + + - - + - - + - - + - + + +
NameTypeDefault valueComputed value
$kendo-picker-bg String$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))$kendo-button-bgvar(--kendo-color-base, #f5f5f5)
Description
The border color of the PanelBar.
+
Description
The background color of the Picker components.
$kendo-panelbar-header-bg$kendo-picker-text String$kendo-panelbar-bgvar(--kendo-color-surface-alt, #ffffff)$kendo-button-textvar(--kendo-color-on-base, #3d3d3d)
Description
The background color of the PanelBar header.
+
Description
The text color of the Picker components.
$kendo-panelbar-header-text$kendo-picker-border String$kendo-link-textvar(--kendo-color-primary, #ff6358)$kendo-button-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The text color of the PanelBar header.
+
Description
The border color of the Picker components.
$kendo-panelbar-header-border$kendo-picker-gradient Nullnull$kendo-button-gradient null
Description
The border color of the PanelBar header.
+
Description
The gradient of the Picker components.
$kendo-panelbar-header-gradient$kendo-picker-shadow Nullnull$kendo-button-shadow null
Description
The gradient of the PanelBar header.
+
Description
The shadow of the Picker components.
$kendo-panelbar-header-hover-bg$kendo-picker-hover-bg Stringif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 ))$kendo-button-hover-bg var(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered PanelBar header.
+
Description
The background color of the hovered Picker components.
+
$kendo-picker-hover-textNull$kendo-button-hover-textnull
Description
The text color of the hovered Picker components.
+
$kendo-picker-hover-borderNull$kendo-button-hover-bordernull
Description
The border color of the hovered Picker components.
+
$kendo-picker-hover-gradientNull$kendo-button-hover-gradientnull
Description
The gradient of the hovered Picker components.
$kendo-panelbar-header-hover-text$kendo-picker-hover-shadow Nullnull$kendo-button-hover-shadow null
Description
The text color of the hovered PanelBar header.
+
Description
The shadow of the hovered Picker components.
$kendo-panelbar-header-hover-border$kendo-picker-focus-bg Nullnull$kendo-button-focus-bg null
Description
The border color of the hovered PanelBar header.
+
Description
The background color of the focused Picker components.
$kendo-panelbar-header-hover-gradient$kendo-picker-focus-text Nullnull$kendo-button-focus-text null
Description
The gradient of the hovered PanelBar header.
+
Description
The text color of the focused Picker components.
$kendo-panelbar-header-focus-bg$kendo-picker-focus-border Nullnull$kendo-button-focus-border null
Description
The background color of the focused PanelBar header.
+
Description
The border color of the focused Picker components.
$kendo-panelbar-header-focus-text$kendo-picker-focus-gradient Nullnull$kendo-button-focus-gradient null
Description
The text color of the focused PanelBar header.
+
Description
The gradient of the focused Picker components.
$kendo-panelbar-header-focus-borderNullnullnull$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)
Description
The border color of the focused PanelBar header.
+
Description
The shadow of the focused Picker components.
$kendo-panelbar-header-focus-gradient$kendo-picker-disabled-bg Null null null
Description
The gradient of the focused PanelBar header.
+
Description
The background color of the disabled Picker components.
$kendo-panelbar-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-picker-disabled-textNullnullnull
Description
The shadow of the focused PanelBar header.
+
Description
The text color of the disabled Picker components.
$kendo-panelbar-header-hover-focus-bg$kendo-picker-disabled-border Null null null
Description
The background color of the focused and hovered PanelBar header.
+
Description
The border color of the disabled Picker components.
$kendo-panelbar-header-hover-focus-text$kendo-picker-disabled-gradient Null null null
Description
The text color of the focused and hovered PanelBar header.
+
Description
The gradient of the disabled Picker components.
$kendo-panelbar-header-hover-focus-border$kendo-picker-disabled-shadow Null null null
Description
The border color of the focused and hovered PanelBar header.
+
Description
The shadow of the disabled Picker components.
$kendo-panelbar-header-hover-focus-gradient$kendo-picker-outline-bg Null null null
Description
The gradient of the focused and hovered PanelBar header.
+
Description
The background color of the outline Picker components.
$kendo-panelbar-header-selected-bg$kendo-picker-outline-text String$kendo-selected-bgvar(--kendo-color-primary, #ff6358)$kendo-button-textvar(--kendo-color-on-base, #3d3d3d)
Description
The background color of the selected PanelBar header.
+
Description
The text color of the outline Picker components.
$kendo-panelbar-header-selected-text$kendo-picker-outline-border String$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent)
Description
The text color of the selected PanelBar header.
+
Description
The border color of the outline Picker components.
$kendo-panelbar-header-selected-borderNullnullnull$kendo-picker-outline-hover-bgString$kendo-picker-outline-textvar(--kendo-color-on-base, #3d3d3d)
Description
The border color of the selected PanelBar header.
+
Description
The background color of the outline hovered Picker components.
$kendo-panelbar-header-selected-gradientNullnullnull$kendo-picker-outline-hover-textStringif($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))var(--kendo-color-base, #f5f5f5)
Description
The gradient of the selected PanelBar header.
+
Description
The text color of the outline hovered Picker components.
$kendo-panelbar-header-selected-hover-bg$kendo-picker-outline-hover-border Stringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg ))var(--kendo-color-primary-hover, #ea5a51)$kendo-picker-outline-hover-bgvar(--kendo-color-on-base, #3d3d3d)
Description
The background color of the selected and hovered PanelBar header.
+
Description
The border color of the outline hovered Picker components.
$kendo-panelbar-header-selected-hover-text$kendo-picker-outline-focus-bg Null null null
Description
The text color of the selected and hovered PanelBar header.
+
Description
The background color of the outline focused Picker components.
$kendo-panelbar-header-selected-hover-border$kendo-picker-outline-focus-text Null null null
Description
The border color of the selected and hovered PanelBar header.
+
Description
The text color of the outline focused Picker components.
$kendo-panelbar-header-selected-hover-gradient$kendo-picker-outline-focus-border Null null null
Description
The gradient of the selected and hovered PanelBar header.
+
Description
The border color of the outline focused Picker components.
$kendo-panelbar-header-selected-focus-bgNullnullnull$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)
Description
The background color of the selected and focused PanelBar header.
+
Description
The shadow of the outline focused Picker components.
$kendo-panelbar-header-selected-focus-text$kendo-picker-outline-hover-focus-bg Null null null
Description
The text color of the selected and focused PanelBar header.
+
Description
The background color of the outline hovered and focused Picker components.
$kendo-panelbar-header-selected-focus-border$kendo-picker-outline-hover-focus-text Null null null
Description
The border color of the selected and focused PanelBar header.
+
Description
The text color of the outline hovered and focused Picker components.
$kendo-panelbar-header-selected-focus-gradient$kendo-picker-outline-hover-focus-border Null null null
Description
The gradient of the selected and focused PanelBar header.
+
Description
The border color of the outline hovered and focused Picker components.
$kendo-panelbar-header-selected-hover-focus-bg$kendo-picker-flat-bg Null null null
Description
The background color of the selected, hovered and focused PanelBar header.
+
Description
The background color of the flat Picker components.
$kendo-panelbar-header-selected-hover-focus-textNullnullnull$kendo-picker-flat-textString$kendo-button-textvar(--kendo-color-on-base, #3d3d3d)
Description
The text color of the selected, hovered and focused PanelBar header.
+
Description
The text color of the flat Picker components.
$kendo-panelbar-header-selected-hover-focus-borderNullnullnull$kendo-picker-flat-borderString$kendo-button-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the selected, hovered and focused PanelBar header.
+
Description
The border color of the flat Picker components.
$kendo-panelbar-header-selected-hover-focus-gradient$kendo-picker-flat-hover-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 ))color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 4%, transparent)
Description
The background color of the flat hovered Picker components.
+
$kendo-picker-flat-hover-text Null null null
Description
The gradient of the selected, hovered and focused PanelBar header.
+
Description
The text color of the flat hovered Picker components.
$kendo-panelbar-item-hover-bg$kendo-picker-flat-hover-border Stringif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 ))var(--kendo-color-base-hover, #ebebeb)if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))
Description
The background color of the hovered PanelBar items.
+
Description
The border color of the flat hovered Picker components.
$kendo-panelbar-item-hover-text$kendo-picker-flat-focus-bg Null null null
Description
The text color of the hovered PanelBar items.
+
Description
The background color of the flat focused Picker components.
$kendo-panelbar-item-hover-border$kendo-picker-flat-focus-text Null null null
Description
The border color of the hovered PanelBar items.
+
Description
The text color of the flat focused Picker components.
$kendo-panelbar-item-hover-gradient$kendo-picker-flat-focus-border Null null null
Description
The gradient of the hovered PanelBar items.
+
Description
The border color of the flat focused Picker components.
$kendo-panelbar-item-focus-bgNullnullnull$kendo-picker-flat-focus-shadowList$kendo-picker-focus-shadow0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)
Description
The background color of the focused PanelBar items.
+
Description
The shadow of the flat focused Picker components.
$kendo-panelbar-item-focus-text$kendo-picker-flat-hover-focus-bg Null null null
Description
The text color of the focused PanelBar items.
+
Description
The background color of the flat hovered and focused Picker components.
$kendo-panelbar-item-focus-border$kendo-picker-flat-hover-focus-text Null null null
Description
The border color of the focused PanelBar items.
+
Description
The text color of the flat hovered and focused Picker components.
$kendo-panelbar-item-focus-gradient$kendo-picker-flat-hover-focus-border Null null null
Description
The gradient of the focused PanelBar items.
+
Description
The border color of the flat hovered and focused Picker components.
+
+ +### Pivotgrid + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - - -
NameTypeDefault valueComputed value
$kendo-pivotgrid-spacerStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacer of the PivotGrid.
$kendo-panelbar-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)$kendo-pivotgrid-padding-xNullnullnull
Description
The box shadow of the focused PanelBar items.
+
Description
The horizontal padding of the PivotGrid.
$kendo-panelbar-item-hover-focus-bg$kendo-pivotgrid-padding-y Null null null
Description
The background color of the focused and hovered PanelBar items.
+
Description
The vertical of the PivotGrid.
$kendo-panelbar-item-hover-focus-textNullnullnull$kendo-pivotgrid-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The text color of the focused and hovered PanelBar items.
+
Description
The font family of the PivotGrid.
$kendo-panelbar-item-hover-focus-borderNullnullnull$kendo-pivotgrid-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The border color of the focused and hovered PanelBar items.
+
Description
The font size of the PivotGrid.
$kendo-panelbar-item-hover-focus-gradientNullnullnull$kendo-pivotgrid-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The gradient of the focused and hovered PanelBar items.
+
Description
The line height of the PivotGrid.
$kendo-panelbar-item-selected-bgString$kendo-selected-bgvar(--kendo-color-primary, #ff6358)$kendo-pivotgrid-border-widthNumber1px1px
Description
The background color of the selected PanelBar items.
+
Description
The border width of the PivotGrid.
$kendo-panelbar-item-selected-text$kendo-pivotgrid-icon-spacing String$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The text color of the selected PanelBar items.
+
Description
The icon spacing of the PivotGrid.
$kendo-panelbar-item-selected-borderNullnullnull$kendo-pivotgrid-row-header-widthNumber300px300px
Description
The border color of the selected PanelBar items.
+
Description
The default width of the PivotGrid row header.
$kendo-panelbar-item-selected-gradientNullnullnull$kendo-pivotgrid-column-header-heightNumber75px75px
Description
The gradient of the selected PanelBar items.
+
Description
The default height of the PivotGrid column header.
$kendo-panelbar-item-selected-hover-bg$kendo-pivotgrid-cell-padding-x Stringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg ))var(--kendo-color-primary-hover, #ea5a51)$kendo-table-md-cell-padding-xvar(--kendo-spacing-3, 0.75rem)
Description
The background color of the selected and hovered PanelBar items.
+
Description
The horizontal padding of the PivotGrid cell.
$kendo-panelbar-item-selected-hover-textNullnullnull$kendo-pivotgrid-cell-padding-yString$kendo-table-md-cell-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The text color of the selected and hovered PanelBar items.
+
Description
The vertical padding of the PivotGrid cell.
$kendo-panelbar-item-selected-hover-borderNullnullnull$kendo-pivotgrid-cell-border-widthNumber1px1px
Description
The border color of the selected and hovered PanelBar items.
+
Description
The border width of the PivotGrid cell.
$kendo-panelbar-item-selected-hover-gradientNullnullnull$kendo-pivotgrid-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The gradient of the selected and hovered PanelBar items.
+
Description
The background color of the PivotGrid.
$kendo-panelbar-item-selected-focus-bgNullnullnull$kendo-pivotgrid-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The background color of the selected and focused PanelBar items.
+
Description
The text color of the PivotGrid.
$kendo-panelbar-item-selected-focus-textNullnullnull$kendo-pivotgrid-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The text color of the selected and focused PanelBar items.
+
Description
The border color of the PivotGrid.
$kendo-panelbar-item-selected-focus-borderNullnullnull$kendo-pivotgrid-alt-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-try-shade($kendo-pivotgrid-border, 2))var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))
Description
The border color of the selected and focused PanelBar items.
+
Description
The alt border color of the PivotGrid.
$kendo-panelbar-item-selected-focus-gradientNullnullnull$kendo-pivotgrid-headers-bgString$kendo-component-header-bgvar(--kendo-color-surface, #fafafa)
Description
The gradient of the selected and focused PanelBar items.
+
Description
The background color of the PivotGrid header.
$kendo-panelbar-item-selected-hover-focus-bgNullnullnull$kendo-pivotgrid-headers-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The background color of the selected, hovered and focused PanelBar items.
+
Description
The text color of the PivotGrid header.
$kendo-panelbar-item-selected-hover-focus-textNullnullnull$kendo-pivotgrid-headers-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The text color of the selected, hovered and focused PanelBar items.
+
Description
The border color of the PivotGrid header.
$kendo-panelbar-item-selected-hover-focus-borderNullnullnull$kendo-pivotgrid-total-bgStringif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 ))var(--kendo-color-base-subtle, #ebebeb)
Description
The border color of the selected, hovered and focused PanelBar items.
+
Description
The background color of the PivotGrid total cells.
$kendo-panelbar-item-selected-hover-focus-gradientNullnullnull$kendo-pivotgrid-total-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The gradient of the selected, hovered and focused PanelBar items.
+
Description
The text color of the PivotGrid total cells.
$kendo-panelbar-header-expanded-bgNullnullnull$kendo-pivotgrid-total-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The background color of the expanded PanelBar header.
+
Description
The border color of the PivotGrid total cells.
$kendo-panelbar-header-expanded-textNullnullnull$kendo-pivotgrid-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-pivotgrid-bg, 7%))var(--kendo-color-base-hover, #ebebeb)
Description
The text color of the expanded PanelBar header.
+
Description
The hover background color of the PivotGrid.
$kendo-panelbar-header-expanded-border$kendo-pivotgrid-hover-text Null null null
Description
The border color of the expanded PanelBar header.
+
Description
The hover text color of the PivotGrid.
$kendo-panelbar-header-expanded-gradient$kendo-pivotgrid-hover-border Null null null
Description
The gradient of the expanded PanelBar header.
-
- -### Picker - - - - - - - - - - - - - - - - - - - - - - - - - + - - + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - + - + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - - - - + + + + - @@ -18919,7 +20179,7 @@ The following table lists the available variables for customizing the Default th - @@ -18929,7 +20189,7 @@ The following table lists the available variables for customizing the Default th - @@ -18939,7 +20199,7 @@ The following table lists the available variables for customizing the Default th - @@ -18949,7 +20209,7 @@ The following table lists the available variables for customizing the Default th - @@ -18959,7 +20219,7 @@ The following table lists the available variables for customizing the Default th - @@ -18969,7 +20229,7 @@ The following table lists the available variables for customizing the Default th - @@ -18979,7 +20239,7 @@ The following table lists the available variables for customizing the Default th - @@ -18989,7 +20249,7 @@ The following table lists the available variables for customizing the Default th - @@ -18999,7 +20259,7 @@ The following table lists the available variables for customizing the Default th - @@ -19009,7 +20269,7 @@ The following table lists the available variables for customizing the Default th - @@ -19019,7 +20279,7 @@ The following table lists the available variables for customizing the Default th - @@ -19029,7 +20289,7 @@ The following table lists the available variables for customizing the Default th - @@ -19039,7 +20299,7 @@ The following table lists the available variables for customizing the Default th - @@ -19049,7 +20309,7 @@ The following table lists the available variables for customizing the Default th - @@ -19059,7 +20319,7 @@ The following table lists the available variables for customizing the Default th - @@ -19069,7 +20329,7 @@ The following table lists the available variables for customizing the Default th - @@ -19079,7 +20339,7 @@ The following table lists the available variables for customizing the Default th - @@ -19089,7 +20349,7 @@ The following table lists the available variables for customizing the Default th - @@ -19099,7 +20359,7 @@ The following table lists the available variables for customizing the Default th - @@ -19109,7 +20369,7 @@ The following table lists the available variables for customizing the Default th - diff --git a/packages/default/package.json b/packages/default/package.json index b89f726bb7e..3ca7b362809 100644 --- a/packages/default/package.json +++ b/packages/default/package.json @@ -1,7 +1,7 @@ { "name": "@progress/kendo-theme-default", "description": "SASS resources for the default Kendo UI theme", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "author": "Progress", "license": "Apache-2.0", "keywords": [ @@ -53,8 +53,8 @@ }, "dependencies": { "@progress/kendo-svg-icons": "3.0.0", - "@progress/kendo-theme-core": "8.1.0-dev.2", - "@progress/kendo-theme-utils": "8.1.0-dev.2" + "@progress/kendo-theme-core": "8.2.0-dev.0", + "@progress/kendo-theme-utils": "8.2.0-dev.0" }, "directories": { "doc": "docs", diff --git a/packages/default/scss/chart-wizard/_index.scss b/packages/default/scss/chart-wizard/_index.scss new file mode 100644 index 00000000000..c1bcaf00a99 --- /dev/null +++ b/packages/default/scss/chart-wizard/_index.scss @@ -0,0 +1,57 @@ +@import "../core/_index.scss"; +@import "../utils/_index.scss"; + + +// Module meta +$_kendo-module-meta: ( + name: "chart-wizard", + dependencies: ( + "icon", + "window", + "splitter", + "dataviz", + "expansion-panel", + "grid", + "tabstrip", + "listview", + "forms", + "combobox" + ) +); + + +// Dependencies +@import "../icons/_index.scss"; +@import "../window/_index.scss"; +@import "../splitter/_index.scss"; +@import "../dataviz/_index.scss"; +@import "../expansion-panel/_index.scss"; +@import "../grid/_index.scss"; +@import "../tabstrip/_index.scss"; +@import "../listview/_index.scss"; +@import "../forms/_index.scss"; +@import "../combobox/_index.scss"; + + +// Component +@import "./_variables.scss"; +@import "./_layout.scss"; +@import "./_theme.scss"; + + +// Register +@import "../core/module-system/index.import.scss"; +@include module-register( $_kendo-module-meta... ); + + +// Expose +@mixin kendo-chart-wizard--styles() { + @include module-render( "chart-wizard" ) { + @include kendo-chart-wizard--layout(); + @include kendo-chart-wizard--theme(); + } +} + +@if $kendo-auto-bootstrap { + @include kendo-chart-wizard--styles(); +} diff --git a/packages/default/scss/chart-wizard/_layout.scss b/packages/default/scss/chart-wizard/_layout.scss new file mode 100644 index 00000000000..0f314d089b6 --- /dev/null +++ b/packages/default/scss/chart-wizard/_layout.scss @@ -0,0 +1,44 @@ +@mixin kendo-chart-wizard--layout-base() { + // Chart wizard + .k-chart-wizard { + .k-icon-text-wrapper { + display: flex; + align-items: center; + gap: $kendo-chart-wizard-icon-text-gap; + } + + .k-icon-background-area { + display: flex; + padding: $kendo-chart-wizard-icon-area-padding; + border-radius: $kendo-chart-wizard-icon-area-border-radius; + } + } + + .k-chart-types-wrapper { + display: flex; + flex-direction: column; + gap: $kendo-chart-wizard-chart-type-spacing; + } + + .k-chart-wizard-splitter { + height: 100%; + + .k-tabstrip { + width: 100%; + height: 100%; + } + } + + .k-chart-wizard-preview-pane { + padding: $kendo-chart-wizard-preview-pane-padding; + } + + .k-chart-wizard-property-pane { + padding: $kendo-chart-wizard-property-pane-padding; + } +} + + +@mixin kendo-chart-wizard--layout() { + @include kendo-chart-wizard--layout-base(); +} diff --git a/packages/default/scss/chart-wizard/_theme.scss b/packages/default/scss/chart-wizard/_theme.scss new file mode 100644 index 00000000000..c4e92e1b22b --- /dev/null +++ b/packages/default/scss/chart-wizard/_theme.scss @@ -0,0 +1,35 @@ +@mixin kendo-chart-wizard--theme-base() { + .k-chart-wizard { + .k-icon-text-wrapper { + &.k-selected { + color: $kendo-chart-wizard-chart-type-selected-color; + + .k-icon-background-area { + box-shadow: $kendo-chart-wizard-icon-area-selected-shadow; + } + } + + &:hover, + &.k-hover { + cursor: pointer; + } + + &:focus, + &.k-focus { + .k-icon-background-area { + box-shadow: $kendo-chart-wizard-icon-area-focus-shadow; + } + } + } + + .k-icon-background-area { + color: $kendo-chart-wizard-icon-area-color; + background-color: $kendo-chart-wizard-icon-area-bg; + } + } +} + + +@mixin kendo-chart-wizard--theme() { + @include kendo-chart-wizard--theme-base(); +} diff --git a/packages/default/scss/chart-wizard/_variables.scss b/packages/default/scss/chart-wizard/_variables.scss new file mode 100644 index 00000000000..547faca9d24 --- /dev/null +++ b/packages/default/scss/chart-wizard/_variables.scss @@ -0,0 +1,38 @@ +// Chart wizard + +/// The color of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default; +/// The background color of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-bg: if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle) !default; +/// The border radius of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-border-radius: k-border-radius(md) !default; +/// The padding of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-padding: k-spacing(4) !default; +/// The box shadow of the focused area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis) !default; +/// The box shadow of the selected area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-selected-shadow: inset 0 0 0 1px $kendo-chart-wizard-icon-area-color !default; + +/// The color of the selected chart type items in the Property panel. +/// @group chart-wizard +$kendo-chart-wizard-chart-type-selected-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default; + +/// The padding of the preview pane. +/// @group chart-wizard +$kendo-chart-wizard-preview-pane-padding: k-spacing(4) !default; +/// The padding of the property pane. +/// @group chart-wizard +$kendo-chart-wizard-property-pane-padding: k-spacing(4) !default; + +/// The gap between the chart type items in the Property panel. +/// @group chart-wizard +$kendo-chart-wizard-chart-type-spacing: k-spacing(4) !default; +/// The gap between the icon area and its text. +/// @group chart-wizard +$kendo-chart-wizard-icon-text-gap: k-spacing(3) !default; diff --git a/packages/default/scss/chat/_theme.scss b/packages/default/scss/chat/_theme.scss index d89cc955558..6df57696388 100644 --- a/packages/default/scss/chat/_theme.scss +++ b/packages/default/scss/chat/_theme.scss @@ -65,15 +65,21 @@ $kendo-chat-quick-reply-bg, $kendo-chat-quick-reply-border ); - } - .k-quick-reply:hover { - @include fill( - $kendo-chat-quick-reply-hover-text, - $kendo-chat-quick-reply-hover-bg, - $kendo-chat-quick-reply-hover-border - ); - } + &:hover, + &.k-hover { + @include fill( + $kendo-chat-quick-reply-hover-text, + $kendo-chat-quick-reply-hover-bg, + $kendo-chat-quick-reply-hover-border + ); + } + + &:focus, + &.k-focus { + @include focus-indicator( 0 0 $kendo-chat-quick-reply-shadow-blur $kendo-chat-quick-reply-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( 'primary' ) ( $kendo-chat-quick-reply-shadow-opacity * 100% ), transparent), rgba( $kendo-color-primary, $kendo-chat-quick-reply-shadow-opacity )), true, true ); + } + } } diff --git a/packages/default/scss/chat/_variables.scss b/packages/default/scss/chat/_variables.scss index 569efd761d9..dd81f43e3c6 100644 --- a/packages/default/scss/chat/_variables.scss +++ b/packages/default/scss/chat/_variables.scss @@ -199,3 +199,13 @@ $kendo-chat-quick-reply-hover-text: $kendo-color-primary-contrast !default; /// The border color of the hovered Chat quick reply. /// @group chat $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default; + +/// The shadow blur of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-blur: 0px !default; +/// The shadow spread of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-spread: 2px !default; +/// The shadow opacity of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-opacity: .3 !default; diff --git a/packages/default/scss/index.scss b/packages/default/scss/index.scss index 551384b8616..bdace64625d 100644 --- a/packages/default/scss/index.scss +++ b/packages/default/scss/index.scss @@ -122,6 +122,7 @@ @import "./splitter/_index.scss"; @import "./tilelayout/_index.scss"; @import "./dock-manager/_index.scss"; +@import "./chart-wizard/_index.scss"; // Data management @@ -295,6 +296,7 @@ @include kendo-splitter--styles(); @include kendo-tile-layout--styles(); @include kendo-dock-manager--styles(); + @include kendo-chart-wizard--styles(); // Data management diff --git a/packages/default/scss/map/_variables.scss b/packages/default/scss/map/_variables.scss index f0bddbe2aad..68384219e5f 100644 --- a/packages/default/scss/map/_variables.scss +++ b/packages/default/scss/map/_variables.scss @@ -2,29 +2,69 @@ // Map +/// The border width of the Map. +/// @group map $kendo-map-border-width: 0px !default; +/// The font size of the Map. +/// @group map $kendo-map-font-size: var( --kendo-font-size, inherit ) !default; +/// The line height of the Map. +/// @group map $kendo-map-line-height: var( --kendo-line-height, normal ) !default; +/// The font family of the Map. +/// @group map $kendo-map-font-family: var( --kendo-font-family, inherit ) !default; +/// The background color of the Map. +/// @group map $kendo-map-bg: $kendo-component-bg !default; +/// The text color of the Map. +/// @group map $kendo-map-text: $kendo-component-text !default; +/// The border color of the Map. +/// @group map $kendo-map-border: $kendo-component-border !default; +/// The margin of the Map navigator. +/// @group map $kendo-map-navigator-margin: k-spacing(4) !default; +/// The padding of the Map navigator. +/// @group map $kendo-map-navigator-padding: k-spacing(0.5) !default; +/// The width of the Map navigator. +/// @group map $kendo-map-navigator-width: calc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) ) !default; +/// The height of the Map navigator. +/// @group map $kendo-map-navigator-height: $kendo-map-navigator-width !default; +/// The border width of the Map navigator. +/// @group map $kendo-map-navigator-border-width: 1px !default; +/// The margin of the Map zoom control. +/// @group map $kendo-map-zoom-control-margin: k-spacing(4) !default; +/// The horizontal padding of the Map zoom control. +/// @group map $kendo-map-zoom-control-button-padding-x: $kendo-button-padding-y !default; +/// The vertical padding of the Map zoom control. +/// @group map $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-x !default; +/// The horizontal padding of the Map attribution. +/// @group map $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default; +/// The vertical padding of the Map attribution. +/// @group map $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default; +/// The font size of the Map attribution. +/// @group map $kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75) !default; +/// The background color of the Map attribution. +/// @group map $kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) !default; +/// The fill color of the Map marker. +/// @group map $kendo-map-marker-fill: $kendo-color-primary !default; diff --git a/packages/default/scss/mediaplayer/_variables.scss b/packages/default/scss/mediaplayer/_variables.scss index b9691b5143a..f6f278c4d6b 100644 --- a/packages/default/scss/mediaplayer/_variables.scss +++ b/packages/default/scss/mediaplayer/_variables.scss @@ -1,16 +1,43 @@ // Media player + +/// The border width of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-border-width: 1px !default; +/// The font family of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-font-family: var( --kendo-font-family, inherit ) !default; +/// The font size of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-font-size: var( --kendo-font-size, inherit ) !default; +/// The line height of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-line-height: var( --kendo-line-height, normal ) !default; +/// The background color of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-bg: $kendo-component-bg !default; +/// The text color of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-text: $kendo-component-text !default; +/// The border color of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-border: $kendo-component-border !default; +/// The horizontal padding of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-padding-x: k-spacing(2) !default; +/// The vertical padding of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-padding-y: k-spacing(2) !default; +/// The background color of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-bg: null !default; +/// The text color of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-text: $kendo-media-player-bg !default; +/// The border color of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-border: null !default; +/// The gradient of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default; diff --git a/packages/default/scss/pivotgrid/_variables.scss b/packages/default/scss/pivotgrid/_variables.scss index 4a8c8fa2b16..2ae07a44d79 100644 --- a/packages/default/scss/pivotgrid/_variables.scss +++ b/packages/default/scss/pivotgrid/_variables.scss @@ -2,101 +2,245 @@ // Pivot grid +/// The spacer of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-spacer: k-spacing(4) !default; +/// The horizontal padding of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-padding-x: null !default; +/// The vertical of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-padding-y: null !default; +/// The font family of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-font-family: var( --kendo-font-family, inherit ) !default; +/// The font size of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-font-size: var( --kendo-font-size, inherit ) !default; +/// The line height of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default; +/// The border width of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-border-width: 1px !default; +/// The icon spacing of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-icon-spacing: k-spacing(1) !default; +/// The default width of the PivotGrid row header. +/// @group pivotgrid $kendo-pivotgrid-row-header-width: 300px !default; +/// The default height of the PivotGrid column header. +/// @group pivotgrid $kendo-pivotgrid-column-header-height: 75px !default; +/// The horizontal padding of the PivotGrid cell. +/// @group pivotgrid $kendo-pivotgrid-cell-padding-x: $kendo-table-md-cell-padding-x !default; +/// The vertical padding of the PivotGrid cell. +/// @group pivotgrid $kendo-pivotgrid-cell-padding-y: $kendo-table-md-cell-padding-y !default; +/// The border width of the PivotGrid cell. +/// @group pivotgrid $kendo-pivotgrid-cell-border-width: 1px !default; +/// The background color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-bg: $kendo-component-bg !default; +/// The text color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-text: $kendo-component-text !default; +/// The border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-border: $kendo-component-border !default; +/// The alt border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade($kendo-pivotgrid-border, 2)) !default; +/// The background color of the PivotGrid header. +/// @group pivotgrid $kendo-pivotgrid-headers-bg: $kendo-component-header-bg !default; +/// The text color of the PivotGrid header. +/// @group pivotgrid $kendo-pivotgrid-headers-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid header. +/// @group pivotgrid $kendo-pivotgrid-headers-border: $kendo-component-header-border !default; +/// The background color of the PivotGrid total cells. +/// @group pivotgrid $kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default; +/// The text color of the PivotGrid total cells. +/// @group pivotgrid $kendo-pivotgrid-total-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid total cells. +/// @group pivotgrid $kendo-pivotgrid-total-border: $kendo-component-header-border !default; +/// The hover background color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-pivotgrid-bg, 7%)) !default; +/// The hover text color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-hover-text: null !default; +/// The hover border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-hover-border: null !default; +/// The selected background color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default; +/// The selected text color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-selected-text: null !default; +/// The selected border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-selected-border: null !default; +/// The focus shadow of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-focus-shadow: $kendo-list-item-focus-shadow !default; + // Pivotgrid Configurator +/// The horizontal padding of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-padding-x: null !default; +/// The vertical padding of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-padding-y: null !default; +/// The border width of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-border-width: 1px !default; +/// The horizontal padding of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-padding-y: calc( #{$kendo-pivotgrid-spacer} * .75 ) !default; +/// The font size of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-font-size: 18px !default; +/// The font weight of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-font-weight: 500 !default; +/// The horizontal padding of the PivotGrid configurator content. +/// @group pivotgrid $kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid configurator content. +/// @group pivotgrid $kendo-pivotgrid-configurator-content-padding-y: k-spacing(0.5) !default; +/// The horizontal margin of the PivotGrid configurator fields. +/// @group pivotgrid $kendo-pivotgrid-configurator-fields-margin-x: k-spacing(0) !default; +/// The vertical margin of the PivotGrid configurator fields. +/// @group pivotgrid $kendo-pivotgrid-configurator-fields-margin-y: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default; +/// The default width of the PivotGrid vertical configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-vertical-width: 320px !default; +/// The default height of the PivotGrid horizontal configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-horizontal-height: 420px !default; +/// The background color of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-bg: $kendo-component-bg !default; +/// The text color of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-text: $kendo-component-text !default; +/// The border color of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-border: $kendo-component-border !default; +/// The background color of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-bg: null !default; +/// The text color of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-border: null !default; +/// The shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-shadow: k-elevation(3) !default; +/// The end shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-end-shadow: $kendo-pivotgrid-configurator-shadow !default; // -3px 0px 6px rgba(0, 0, 0, .16) +/// The start shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-start-shadow: $kendo-pivotgrid-configurator-shadow !default; // 3px 0px 6px rgba(0, 0, 0, .16) +/// The top shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-top-shadow: $kendo-pivotgrid-configurator-shadow !default; // 0px -3px 6px rgba(0, 0, 0, .16) +/// The bottom shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-bottom-shadow: $kendo-pivotgrid-configurator-shadow !default; // 0px 3px 6px rgba(0, 0, 0, .16) +/// The horizontal padding of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-padding-x: k-spacing(1) !default; +/// The vertical padding of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-padding-y: k-spacing(1) !default; +/// The border width of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-border-width: 1px !default; +/// The size of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-size: calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) ) !default; + // Calculated fields +/// The horizontal padding of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default; +/// The border width of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-border-width: 1px !default; +/// The border radius of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-border-radius: k-border-radius(md) !default; +/// The spacing of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default; +/// The background color of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-bg: $kendo-component-bg !default; +/// The text color of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-text: $kendo-component-text !default; +/// The border color of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-border: $kendo-component-border !default; +/// The background color of the PivotGrid calculated field header. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-bg: null !default; +/// The text color of the PivotGrid calculated field header. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid calculated field header. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-border: null !default; +/// The horizontal padding of the PivotGrid treeview. +/// @group pivotgrid $kendo-pivotgrid-treeview-padding-x: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default; +/// The vertical padding of the PivotGrid treeview. +/// @group pivotgrid $kendo-pivotgrid-treeview-padding-y: k-spacing(0) !default; // Legacy variables diff --git a/packages/default/scss/prompt/_variables.scss b/packages/default/scss/prompt/_variables.scss index 7b4c0ed1777..3cbd5c39501 100644 --- a/packages/default/scss/prompt/_variables.scss +++ b/packages/default/scss/prompt/_variables.scss @@ -1,66 +1,66 @@ -// Prompt +// AIPrompt -/// The text color of the Prompt. +/// The text color of the AIPrompt. /// @group prompt $kendo-prompt-text: $kendo-component-text !default; -/// The background color of the Prompt. +/// The background color of the AIPrompt. /// @group prompt $kendo-prompt-bg: $kendo-component-bg !default; -/// The border color of the Prompt. +/// The border color of the AIPrompt. /// @group prompt $kendo-prompt-border: $kendo-component-border !default; -/// The text color of the Prompt header. +/// The text color of the AIPrompt header. /// @group prompt $kendo-prompt-header-text: $kendo-component-header-text !default; -/// The background color of the Prompt header. +/// The background color of the AIPrompt header. /// @group prompt $kendo-prompt-header-bg: $kendo-component-bg !default; -/// The border color of the Prompt header. +/// The border color of the AIPrompt header. /// @group prompt $kendo-prompt-header-border: $kendo-component-header-border !default; -/// The vertical padding of the Prompt content. +/// The vertical padding of the AIPrompt content. /// @group prompt $kendo-prompt-content-padding-y: k-spacing(4) !default; -/// The horizontal padding of the Prompt content. +/// The horizontal padding of the AIPrompt content. /// @group prompt $kendo-prompt-content-padding-x: k-spacing(4) !default; -/// The spacing between the items of the Prompt content. +/// The spacing between the items of the AIPrompt content. /// @group prompt $kendo-prompt-content-spacing: k-spacing(4) !default; -/// The text color of the Prompt content. +/// The text color of the AIPrompt content. /// @group prompt $kendo-prompt-content-text: $kendo-component-header-text !default; -/// The background color of the Prompt content. +/// The background color of the AIPrompt content. /// @group prompt $kendo-prompt-content-bg: $kendo-component-header-bg !default; -/// The text border of the Prompt content. +/// The text border of the AIPrompt content. /// @group prompt $kendo-prompt-content-border: $kendo-component-header-border !default; -/// The spacing between the items of the Prompt content expander. +/// The spacing between the items of the AIPrompt content expander. /// @group prompt $kendo-prompt-expander-spacing: k-spacing(2) !default; -/// The vertical padding of the Prompt suggestion container. +/// The vertical padding of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-padding-y: k-spacing(2) !default; -/// The horizontal padding of the Prompt suggestion container. +/// The horizontal padding of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-padding-x: k-spacing(2) !default; -/// The border radius of the Prompt suggestion container. +/// The border radius of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-border-radius: k-border-radius(md) !default; -/// The text color of the Prompt suggestion container. +/// The text color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-text: $kendo-component-text !default; -/// The background color of the Prompt suggestion container. +/// The background color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-bg: $kendo-body-bg !default; -/// The border color of the Prompt suggestion container. +/// The border color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-border: $kendo-component-border !default; -/// The elevation of the Prompt suggestion container. +/// The elevation of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-shadow: k-elevation(1) !default; diff --git a/packages/fluent/CHANGELOG.md b/packages/fluent/CHANGELOG.md index 79ac2e3e63b..feef575caf8 100644 --- a/packages/fluent/CHANGELOG.md +++ b/packages/fluent/CHANGELOG.md @@ -3,6 +3,34 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [8.2.0-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.1-dev.0...v8.2.0-dev.0) (2024-07-15) + + +### Features + +* **chart-wizard:** add chart wizard component styles ([fb94657](https://github.com/telerik/kendo-themes/commit/fb9465737f7f7e64a20baefb715be976b0ab5fb6)) +* **chat:** add focus styles on quick replies ([c427ea1](https://github.com/telerik/kendo-themes/commit/c427ea1d65e0d53dd81142d09f54b4632d353833)) + + + + + +## [8.1.1-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.0...v8.1.1-dev.0) (2024-07-08) + +**Note:** Version bump only for package @progress/kendo-theme-fluent + + + + + +# [8.1.0](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.2...v8.1.0) (2024-07-03) + +**Note:** Version bump only for package @progress/kendo-theme-fluent + + + + + # [8.1.0-dev.2](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.1...v8.1.0-dev.2) (2024-07-01) diff --git a/packages/fluent/docs/customization-chart-wizard.md b/packages/fluent/docs/customization-chart-wizard.md new file mode 100644 index 00000000000..3cd7d50dd9e --- /dev/null +++ b/packages/fluent/docs/customization-chart-wizard.md @@ -0,0 +1,148 @@ +--- +title: Customizing ChartWizard +description: "Refer to the list of the Kendo UI Fluent theme variables available for customization." +slug: variables_kendothemefluent_chart-wizard +position: 9 +--- + +# Customizing ChartWizard + +## Variables + +The following table lists the available variables for customization. + +
NameTypeDefault valueComputed value
$kendo-picker-bgString$kendo-button-bgvar(--kendo-color-base, #f5f5f5)
Description
The background color of the Picker components.
+
Description
The hover border color of the PivotGrid.
$kendo-picker-text$kendo-pivotgrid-selected-bg String$kendo-button-textvar(--kendo-color-on-base, #3d3d3d)if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)
Description
The text color of the Picker components.
+
Description
The selected background color of the PivotGrid.
$kendo-picker-borderString$kendo-button-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))$kendo-pivotgrid-selected-textNullnullnull
Description
The border color of the Picker components.
+
Description
The selected text color of the PivotGrid.
$kendo-picker-gradient$kendo-pivotgrid-selected-border Null$kendo-button-gradientnull null
Description
The gradient of the Picker components.
+
Description
The selected border color of the PivotGrid.
$kendo-picker-shadowNull$kendo-button-shadownull$kendo-pivotgrid-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The shadow of the Picker components.
+
Description
The focus shadow of the PivotGrid.
$kendo-picker-hover-bgString$kendo-button-hover-bgvar(--kendo-color-base-hover, #ebebeb)$kendo-pivotgrid-configurator-padding-xNullnullnull
Description
The background color of the hovered Picker components.
+
Description
The horizontal padding of the PivotGrid configurator.
$kendo-picker-hover-text$kendo-pivotgrid-configurator-padding-y Null$kendo-button-hover-textnull null
Description
The text color of the hovered Picker components.
+
Description
The vertical padding of the PivotGrid configurator.
$kendo-picker-hover-borderNull$kendo-button-hover-bordernull$kendo-pivotgrid-configurator-border-widthNumber1px1px
Description
The border color of the hovered Picker components.
+
Description
The border width of the PivotGrid configurator.
$kendo-picker-hover-gradientNull$kendo-button-hover-gradientnull$kendo-pivotgrid-configurator-header-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The gradient of the hovered Picker components.
+
Description
The horizontal padding of the PivotGrid configurator header.
$kendo-picker-hover-shadowNull$kendo-button-hover-shadownull$kendo-pivotgrid-configurator-header-padding-yCalculationcalc( #{$kendo-pivotgrid-spacer} * .75 )calc(var(--kendo-spacing-4, 1rem) * 0.75)
Description
The shadow of the hovered Picker components.
+
Description
The vertical padding of the PivotGrid configurator header.
$kendo-picker-focus-bgNull$kendo-button-focus-bgnull$kendo-pivotgrid-configurator-header-font-sizeNumber18px18px
Description
The background color of the focused Picker components.
+
Description
The font size of the PivotGrid configurator header.
$kendo-picker-focus-textNull$kendo-button-focus-textnull$kendo-pivotgrid-configurator-header-font-weightNumber500500
Description
The text color of the focused Picker components.
+
Description
The font weight of the PivotGrid configurator header.
$kendo-picker-focus-borderNull$kendo-button-focus-bordernull$kendo-pivotgrid-configurator-content-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The border color of the focused Picker components.
+
Description
The horizontal padding of the PivotGrid configurator content.
$kendo-picker-focus-gradientNull$kendo-button-focus-gradientnull$kendo-pivotgrid-configurator-content-padding-yStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The gradient of the focused Picker components.
+
Description
The vertical padding of the PivotGrid configurator content.
$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)$kendo-pivotgrid-configurator-fields-margin-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The shadow of the focused Picker components.
+
Description
The horizontal margin of the PivotGrid configurator fields.
$kendo-picker-disabled-bgNullnullnull$kendo-pivotgrid-configurator-fields-margin-yCalculationcalc( #{$kendo-pivotgrid-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The background color of the disabled Picker components.
+
Description
The vertical margin of the PivotGrid configurator fields.
$kendo-picker-disabled-textNullnullnull$kendo-pivotgrid-configurator-vertical-widthNumber320px320px
Description
The text color of the disabled Picker components.
+
Description
The default width of the PivotGrid vertical configurator.
$kendo-picker-disabled-borderNullnullnull$kendo-pivotgrid-configurator-horizontal-heightNumber420px420px
Description
The border color of the disabled Picker components.
+
Description
The default height of the PivotGrid horizontal configurator.
$kendo-picker-disabled-gradientNullnullnull$kendo-pivotgrid-configurator-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The gradient of the disabled Picker components.
+
Description
The background color of the PivotGrid configurator.
$kendo-picker-disabled-shadowNullnullnull$kendo-pivotgrid-configurator-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The shadow of the disabled Picker components.
+
Description
The text color of the PivotGrid configurator.
$kendo-picker-outline-bgNullnullnull$kendo-pivotgrid-configurator-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The background color of the outline Picker components.
+
Description
The border color of the PivotGrid configurator.
$kendo-picker-outline-textString$kendo-button-textvar(--kendo-color-on-base, #3d3d3d)$kendo-pivotgrid-configurator-header-bgNullnullnull
Description
The text color of the outline Picker components.
+
Description
The background color of the PivotGrid configurator header.
$kendo-picker-outline-border$kendo-pivotgrid-configurator-header-text Stringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent)$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The border color of the outline Picker components.
+
Description
The text color of the PivotGrid configurator header.
$kendo-picker-outline-hover-bgString$kendo-picker-outline-textvar(--kendo-color-on-base, #3d3d3d)$kendo-pivotgrid-configurator-header-borderNullnullnull
Description
The background color of the outline hovered Picker components.
+
Description
The border color of the PivotGrid configurator header.
$kendo-picker-outline-hover-text$kendo-pivotgrid-configurator-shadow Stringif($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))var(--kendo-color-base, #f5f5f5)k-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The text color of the outline hovered Picker components.
+
Description
The shadow of the PivotGrid configurator.
$kendo-picker-outline-hover-border$kendo-pivotgrid-configurator-end-shadow String$kendo-picker-outline-hover-bgvar(--kendo-color-on-base, #3d3d3d)$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The border color of the outline hovered Picker components.
+
Description
The end shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-bgNullnullnull$kendo-pivotgrid-configurator-start-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The background color of the outline focused Picker components.
+
Description
The start shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-textNullnullnull$kendo-pivotgrid-configurator-top-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The text color of the outline focused Picker components.
+
Description
The top shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-borderNullnullnull$kendo-pivotgrid-configurator-bottom-shadowString$kendo-pivotgrid-configurator-shadowvar(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The border color of the outline focused Picker components.
+
Description
The bottom shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)$kendo-pivotgrid-configurator-button-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The shadow of the outline focused Picker components.
+
Description
The horizontal padding of the PivotGrid configurator button.
$kendo-picker-outline-hover-focus-bgNullnullnull$kendo-pivotgrid-configurator-button-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The background color of the outline hovered and focused Picker components.
+
Description
The vertical padding of the PivotGrid configurator button.
$kendo-picker-outline-hover-focus-textNullnullnull$kendo-pivotgrid-configurator-button-border-widthNumber1px1px
Description
The text color of the outline hovered and focused Picker components.
+
Description
The border width of the PivotGrid configurator button.
$kendo-picker-outline-hover-focus-borderNullnullnull$kendo-pivotgrid-configurator-button-sizeCalculationcalc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) )calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
Description
The border color of the outline hovered and focused Picker components.
+
Description
The size of the PivotGrid configurator button.
$kendo-picker-flat-bgNullnullnull$kendo-pivotgrid-calculated-field-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The background color of the flat Picker components.
+
Description
The horizontal padding of the PivotGrid calculated field.
$kendo-picker-flat-text$kendo-pivotgrid-calculated-field-padding-y String$kendo-button-textvar(--kendo-color-on-base, #3d3d3d)$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The text color of the flat Picker components.
+
Description
The vertical padding of the PivotGrid calculated field.
$kendo-picker-flat-borderString$kendo-button-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))$kendo-pivotgrid-calculated-field-border-widthNumber1px1px
Description
The border color of the flat Picker components.
+
Description
The border width of the PivotGrid calculated field.
$kendo-picker-flat-hover-bg$kendo-pivotgrid-calculated-field-border-radius Stringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 ))color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 4%, transparent)k-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The background color of the flat hovered Picker components.
+
Description
The border radius of the PivotGrid calculated field.
$kendo-picker-flat-hover-textNullnullnull$kendo-pivotgrid-calculated-field-gapString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The text color of the flat hovered Picker components.
+
Description
The spacing of the PivotGrid calculated field.
$kendo-picker-flat-hover-border$kendo-pivotgrid-calculated-field-bg Stringif($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The border color of the flat hovered Picker components.
+
Description
The background color of the PivotGrid calculated field.
$kendo-picker-flat-focus-bgNullnullnull$kendo-pivotgrid-calculated-field-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The background color of the flat focused Picker components.
+
Description
The text color of the PivotGrid calculated field.
$kendo-picker-flat-focus-textNullnullnull$kendo-pivotgrid-calculated-field-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The text color of the flat focused Picker components.
+
Description
The border color of the PivotGrid calculated field.
$kendo-picker-flat-focus-border$kendo-pivotgrid-calculated-field-header-bg Null null null
Description
The border color of the flat focused Picker components.
+
Description
The background color of the PivotGrid calculated field header.
$kendo-picker-flat-focus-shadowList$kendo-picker-focus-shadow0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)$kendo-pivotgrid-calculated-field-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The shadow of the flat focused Picker components.
+
Description
The text color of the PivotGrid calculated field header.
$kendo-picker-flat-hover-focus-bg$kendo-pivotgrid-calculated-field-header-border Null null null
Description
The background color of the flat hovered and focused Picker components.
+
Description
The border color of the PivotGrid calculated field header.
$kendo-picker-flat-hover-focus-textNullnullnull$kendo-pivotgrid-treeview-padding-xCalculationcalc( #{$kendo-pivotgrid-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The text color of the flat hovered and focused Picker components.
+
Description
The horizontal padding of the PivotGrid treeview.
$kendo-picker-flat-hover-focus-borderNullnullnull$kendo-pivotgrid-treeview-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The border color of the flat hovered and focused Picker components.
+
Description
The vertical padding of the PivotGrid treeview.
var(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the Prompt.
+
Description
The text color of the AIPrompt.
var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Prompt.
+
Description
The background color of the AIPrompt.
var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the Prompt.
+
Description
The border color of the AIPrompt.
var(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the Prompt header.
+
Description
The text color of the AIPrompt header.
var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Prompt header.
+
Description
The background color of the AIPrompt header.
var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the Prompt header.
+
Description
The border color of the AIPrompt header.
var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the Prompt content.
+
Description
The vertical padding of the AIPrompt content.
var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Prompt content.
+
Description
The horizontal padding of the AIPrompt content.
var(--kendo-spacing-4, 1rem)
Description
The spacing between the items of the Prompt content.
+
Description
The spacing between the items of the AIPrompt content.
var(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the Prompt content.
+
Description
The text color of the AIPrompt content.
var(--kendo-color-surface, #fafafa)
Description
The background color of the Prompt content.
+
Description
The background color of the AIPrompt content.
var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The text border of the Prompt content.
+
Description
The text border of the AIPrompt content.
var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the items of the Prompt content expander.
+
Description
The spacing between the items of the AIPrompt content expander.
var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Prompt suggestion container.
+
Description
The vertical padding of the AIPrompt suggestion container.
var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The horizontal padding of the AIPrompt suggestion container.
var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Prompt suggestion container.
+
Description
The border radius of the AIPrompt suggestion container.
var(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the Prompt suggestion container.
+
Description
The text color of the AIPrompt suggestion container.
var(--kendo-color-app-surface, #ffffff)
Description
The background color of the Prompt suggestion container.
+
Description
The background color of the AIPrompt suggestion container.
var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the Prompt suggestion container.
+
Description
The border color of the AIPrompt suggestion container.
var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The elevation of the Prompt suggestion container.
+
Description
The elevation of the AIPrompt suggestion container.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chart-wizard-icon-area-colorStringif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
Description
The color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-bgStringif($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 ))var(--kendo-color-primary-subtle, #deecf9)
Description
The background color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-border-radiusStringk-border-radius(none)var(--kendo-border-radius-none, 0px)
Description
The border radius of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-focus-shadowListinset 0 0 0 1px if($kendo-enable-color-system, k-color( primary-emphasis ), k-get-theme-color-var( primary-130 ))inset 0 0 0 1px var(--kendo-color-primary-emphasis, #004578)
Description
The box shadow of the focused area around the chart type icon.
+
$kendo-chart-wizard-icon-area-selected-shadowListinset 0 0 0 1px $kendo-chart-wizard-icon-area-colorinset 0 0 0 1px var(--kendo-color-primary, #0078d4)
Description
The box shadow of the selected area around the chart type icon.
+
$kendo-chart-wizard-chart-type-selected-colorStringif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
Description
The color of the selected chart type items in the Property panel.
+
$kendo-chart-wizard-preview-pane-paddingStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The padding of the preview pane.
+
$kendo-chart-wizard-property-pane-paddingStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The padding of the property pane.
+
$kendo-chart-wizard-chart-type-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The gap between the chart type items in the Property panel.
+
$kendo-chart-wizard-icon-text-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The gap between the icon area and its text.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/fluent/docs/customization-chat.md b/packages/fluent/docs/customization-chat.md index f8e010ec567..1bde6a7743f 100644 --- a/packages/fluent/docs/customization-chat.md +++ b/packages/fluent/docs/customization-chat.md @@ -707,6 +707,36 @@ The following table lists the available variables for customization.
Description
The border color of the hovered Chat quick reply.
+ + $kendo-chat-quick-reply-focus-offset + String + k-spacing(0.5) + var(--kendo-spacing-0\.5, 0.125rem) + + +
Description
The offset of the focused Chat quick reply.
+ + + + $kendo-chat-quick-reply-focus-outline-width + Number + 1px + 1px + + +
Description
The outline width of the focused Chat quick reply.
+ + + + $kendo-chat-quick-reply-focus-outline-style + String + solid + solid + + +
Description
The outline style of the focused Chat quick reply.
+ + diff --git a/packages/fluent/docs/customization-map.md b/packages/fluent/docs/customization-map.md index fc0566d779d..9106141f285 100644 --- a/packages/fluent/docs/customization-map.md +++ b/packages/fluent/docs/customization-map.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. var(--kendo-font-size, inherit) -
Description
Font size of the map.
+
Description
The font size of the Map.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. var(--kendo-line-height, normal) -
Description
Line height of the map.
+
Description
The line height of the Map.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. var(--kendo-font-family, normal) -
Description
Font family of the map.
+
Description
The font family of the Map.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. var(--kendo-component-bg, transparent) -
Description
Background color of the map.
+
Description
The background color of the Map.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. var(--kendo-component-text, inherit) -
Description
Text color of the map.
+
Description
The text color of the Map.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, #8a8886) -
Description
Border color of the map.
+
Description
The border color of the Map.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. 0px -
Description
Border width of the map.
+
Description
The border width of the Map.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. 600px -
Description
Height of the map.
+
Description
The height of the Map.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
Map navigator horizontal margin.
+
Description
The horizontal margin of the Map navigator.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
Map navigator vertical margin.
+
Description
The vertical margin of the Map navigator.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-0\.5, 0.125rem) -
Description
Map navigator padding.
+
Description
The padding of the Map navigator.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. calc(var(--kendo-icon-size) * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2) -
Description
Map navigator width.
+
Description
The width of the Map navigator.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. calc(var(--kendo-icon-size) * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2) -
Description
Map navigator height.
+
Description
The height of the Map navigator.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. 1px -
Description
Map navigator border width.
+
Description
The border width of the Map navigator.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. var(--kendo-color-app-surface, #ffffff) -
Description
Map navigator background color.
+
Description
The background color of the Map navigator.
@@ -184,7 +184,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #323130) -
Description
Map navigator text color.
+
Description
The text color of the Map navigator.
@@ -194,7 +194,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, #8a8886) -
Description
Map navigator border color.
+
Description
The border color of the Map navigator.
@@ -204,7 +204,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
Map zoom control margin.
+
Description
The margin of the Map zoom control.
@@ -214,7 +214,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-1\.5, 0.375rem) -
Description
Map zoom control horizontal padding.
+
Description
The horizontal padding of the Map zoom control.
@@ -224,7 +224,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-1\.5, 0.375rem) -
Description
Map zoom control vertical padding.
+
Description
The vertical padding of the Map zoom control.
@@ -234,7 +234,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-1, 0.25rem) -
Description
Map attribution horizontal padding.
+
Description
The horizontal padding of the Map attribution.
@@ -244,7 +244,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-0\.5, 0.125rem) -
Description
Map attribution vertical padding.
+
Description
The vertical padding of the Map attribution.
@@ -254,7 +254,7 @@ The following table lists the available variables for customization. calc(var(--kendo-font-size, inherit) * 0.75) -
Description
Map attribution font size.
+
Description
The font size of the Map attribution.
@@ -264,7 +264,7 @@ The following table lists the available variables for customization. var(--kendo-color-app-surface, #ffffff) -
Description
Map attribution background color.
+
Description
The background color of the Map attribution.
@@ -274,7 +274,7 @@ The following table lists the available variables for customization. var(--kendo-color-primary, #0078d4) -
Description
Map marker fill color.
+
Description
The fill color of the Map marker.
diff --git a/packages/fluent/docs/customization-mediaplayer.md b/packages/fluent/docs/customization-mediaplayer.md index f9f66736b96..8f0c81daf97 100644 --- a/packages/fluent/docs/customization-mediaplayer.md +++ b/packages/fluent/docs/customization-mediaplayer.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. 1px -
Description
Border width of the mediaplayer.
+
Description
The border width of the MediaPlayer.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. var(--kendo-font-family, inherit) -
Description
Font family of the mediaplayer.
+
Description
The font family of the MediaPlayer.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. var(--kendo-font-size, inherit) -
Description
Font size of the mediaplayer.
+
Description
The font size of the MediaPlayer.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. var(--kendo-line-height, normal) -
Description
Line height of the mediaplayer.
+
Description
The line height of the MediaPlayer.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. var(--kendo-component-bg, inherit) -
Description
Background color of the mediaplayer.
+
Description
The background color of the MediaPlayer.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. var(--kendo-component-text, inherit) -
Description
Text color of the mediaplayer.
+
Description
The text color of the MediaPlayer.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. var(--kendo-component-border, inherit) -
Description
Border color of the mediaplayer.
+
Description
The border color of the MediaPlayer.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. var(--kendo-color-base-emphasis, #605e5c) -
Description
Mediaplayer overlay background color.
+
Description
The background color of the MediaPlayer overlay.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, #8a8886) -
Description
Mediaplayer quality button border color.
+
Description
The border color of the MediaPlayer button.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. var(--kendo-font-size-xl, inherit) -
Description
Media player title font size.
+
Description
The font size of the MediaPlayer title.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
Mediaplayer titlebar horizontal padding.
+
Description
The horizontal padding of the MediaPlayer title.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
Mediaplayer titlebar vertical padding.
+
Description
The vertical padding of the MediaPlayer title.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 40%, transparent) -
Description
Mediaplayer titlebar background color.
+
Description
The background color of the MediaPlayer title.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. var(--kendo-component-bg, inherit) -
Description
Mediaplayer titlebar text color.
+
Description
The text color of the MediaPlayer title.
diff --git a/packages/fluent/docs/customization-pivotgrid.md b/packages/fluent/docs/customization-pivotgrid.md index 362a673dc69..8be07e7d8ef 100644 --- a/packages/fluent/docs/customization-pivotgrid.md +++ b/packages/fluent/docs/customization-pivotgrid.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-3, 0.75rem) -
Description
Spacer of the PivotGrid.
+
Description
The spacer of the PivotGrid.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-0, 0px) -
Description
Horizontal padding of the PivotGrid.
+
Description
The horizontal padding of the PivotGrid.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-0, 0px) -
Description
Vertical of the PivotGrid.
+
Description
The vertical of the PivotGrid.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. var(--kendo-font-family, inherit) -
Description
Font family of the PivotGrid.
+
Description
The font family of the PivotGrid.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. var(--kendo-font-size, inherit) -
Description
Font size of the PivotGrid.
+
Description
The font size of the PivotGrid.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. var(--kendo-line-height, normal) -
Description
Line height of the PivotGrid.
+
Description
The line height of the PivotGrid.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. 1px -
Description
Border width of the PivotGrid.
+
Description
The border width of the PivotGrid.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-1, 0.25rem) -
Description
Icon spacing of the PivotGrid.
+
Description
The icon spacing of the PivotGrid.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. var(--kendo-component-bg, initial) -
Description
Background color of the PivotGrid.
+
Description
The background color of the PivotGrid.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. var(--kendo-component-text, initial) -
Description
Text color of the PivotGrid.
+
Description
The text color of the PivotGrid.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. var(--kendo-component-border, initial) -
Description
Border color of the PivotGrid.
+
Description
The border color of the PivotGrid.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. var(--kendo-component-border, initial) -
Description
Alt border color of the PivotGrid.
+
Description
The alt border color of the PivotGrid.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. 300px -
Description
Default width of the PivotGrid row header.
+
Description
The default width of the PivotGrid row header.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. 75px -
Description
Default height of the PivotGrid column header.
+
Description
The default height of the PivotGrid column header.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-3, 0.75rem) -
Description
Horizontal padding of the PivotGrid cell.
+
Description
The horizontal padding of the PivotGrid cell.
@@ -184,7 +184,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-3, 0.75rem) -
Description
Vertical padding of the PivotGrid cell.
+
Description
The vertical padding of the PivotGrid cell.
@@ -194,7 +194,7 @@ The following table lists the available variables for customization. 1px -
Description
Border width of the PivotGrid cell.
+
Description
The border width of the PivotGrid cell.
@@ -204,7 +204,7 @@ The following table lists the available variables for customization. var(--kendo-component-bg, inherit) -
Description
Background color of the PivotGrid header.
+
Description
The background color of the PivotGrid header.
@@ -214,7 +214,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #323130) -
Description
Text color of the PivotGrid header.
+
Description
The text color of the PivotGrid header.
@@ -224,7 +224,7 @@ The following table lists the available variables for customization. var(--kendo-component-border, inherit) -
Description
Border color of the PivotGrid header.
+
Description
The border color of the PivotGrid header.
@@ -234,7 +234,7 @@ The following table lists the available variables for customization. var(--kendo-color-base-subtle, #edebe9) -
Description
Background color of the PivotGrid total cells.
+
Description
The background color of the PivotGrid total cells.
@@ -244,7 +244,7 @@ The following table lists the available variables for customization. var(--kendo-component-text, inherit) -
Description
Text color of the PivotGrid total cells.
+
Description
The text color of the PivotGrid total cells.
@@ -254,7 +254,7 @@ The following table lists the available variables for customization. var(--kendo-component-border, inherit) -
Description
Border color of the PivotGrid total cells.
+
Description
The border color of the PivotGrid total cells.
@@ -264,7 +264,7 @@ The following table lists the available variables for customization. var(--kendo-hover-bg, inherit) -
Description
Hover background color of the PivotGrid.
+
Description
The hover background color of the PivotGrid.
@@ -274,7 +274,7 @@ The following table lists the available variables for customization. inherit -
Description
Hover text color of the PivotGrid.
+
Description
The hover text color of the PivotGrid.
@@ -284,7 +284,7 @@ The following table lists the available variables for customization. inherit -
Description
Hover border color of the PivotGrid.
+
Description
The hover border color of the PivotGrid.
@@ -294,7 +294,7 @@ The following table lists the available variables for customization. var(--kendo-selected-bg, inherit) -
Description
Selected background color of the PivotGrid.
+
Description
The selected background color of the PivotGrid.
@@ -304,7 +304,7 @@ The following table lists the available variables for customization. inherit -
Description
Selected text color of the PivotGrid.
+
Description
The selected text color of the PivotGrid.
@@ -314,7 +314,7 @@ The following table lists the available variables for customization. inherit -
Description
Selected border color of the PivotGrid.
+
Description
The selected border color of the PivotGrid.
@@ -324,7 +324,7 @@ The following table lists the available variables for customization. inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c) -
Description
Focus shadow of the PivotGrid.
+
Description
The focus shadow of the PivotGrid.
@@ -334,7 +334,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-0, 0px) -
Description
Horizontal padding of the PivotGrid configurator.
+
Description
The horizontal padding of the PivotGrid configurator.
@@ -344,7 +344,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-0, 0px) -
Description
Vertical padding of the PivotGrid configurator.
+
Description
The vertical padding of the PivotGrid configurator.
@@ -354,7 +354,7 @@ The following table lists the available variables for customization. 1px -
Description
Border width of the PivotGrid configurator.
+
Description
The border width of the PivotGrid configurator.
@@ -364,7 +364,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-3, 0.75rem) -
Description
Horizontal padding of the PivotGrid configurator header.
+
Description
The horizontal padding of the PivotGrid configurator header.
@@ -374,7 +374,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-3, 0.75rem) -
Description
Vertical padding of the PivotGrid configurator header.
+
Description
The vertical padding of the PivotGrid configurator header.
@@ -384,7 +384,7 @@ The following table lists the available variables for customization. calc(var(--kendo-font-size-xl, 2rem) * 0.9) -
Description
Font size of the PivotGrid configurator header.
+
Description
The font size of the PivotGrid configurator header.
@@ -394,7 +394,7 @@ The following table lists the available variables for customization. var(--kendo-font-weight-bold, bold) -
Description
Font weight of the PivotGrid configurator header.
+
Description
The font weight of the PivotGrid configurator header.
@@ -404,7 +404,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-3, 0.75rem) -
Description
Horizontal padding of the PivotGrid configurator content.
+
Description
The horizontal padding of the PivotGrid configurator content.
@@ -414,7 +414,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-0, 0px) -
Description
Vertical padding of the PivotGrid configurator content.
+
Description
The vertical padding of the PivotGrid configurator content.
@@ -424,7 +424,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-0, 0px) -
Description
Horizontal margin of the PivotGrid configurator fields.
+
Description
The horizontal margin of the PivotGrid configurator fields.
@@ -434,7 +434,7 @@ The following table lists the available variables for customization. calc(var(--kendo-spacing-3, 0.75rem) / 2) -
Description
Vertical margin of the PivotGrid configurator fields.
+
Description
The vertical margin of the PivotGrid configurator fields.
@@ -444,7 +444,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
Spacing of the PivotGrid configurator fields.
+
Description
The spacing of the PivotGrid configurator fields.
@@ -454,7 +454,7 @@ The following table lists the available variables for customization. 320px -
Description
Default width of the PivotGrid vertical configurator.
+
Description
The default width of the PivotGrid vertical configurator.
@@ -464,7 +464,7 @@ The following table lists the available variables for customization. 420px -
Description
Default height of the PivotGrid horizontal configurator.
+
Description
The default height of the PivotGrid horizontal configurator.
@@ -474,7 +474,7 @@ The following table lists the available variables for customization. var(--kendo-component-bg, inherit) -
Description
Background color of the PivotGrid configurator.
+
Description
The background color of the PivotGrid configurator.
@@ -484,7 +484,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #323130) -
Description
Text color of the PivotGrid configurator.
+
Description
The text color of the PivotGrid configurator.
@@ -494,7 +494,7 @@ The following table lists the available variables for customization. var(--kendo-component-border, inherit) -
Description
Border color of the PivotGrid configurator.
+
Description
The border color of the PivotGrid configurator.
@@ -504,7 +504,7 @@ The following table lists the available variables for customization. var(--kendo-component-bg, inherit) -
Description
Background color of the PivotGrid configurator header.
+
Description
The background color of the PivotGrid configurator header.
@@ -514,7 +514,7 @@ The following table lists the available variables for customization. var(--kendo-component-text, inherit) -
Description
Text color of the PivotGrid configurator header.
+
Description
The text color of the PivotGrid configurator header.
@@ -524,7 +524,7 @@ The following table lists the available variables for customization. inherit -
Description
Border color of the PivotGrid configurator header.
+
Description
The border color of the PivotGrid configurator header.
@@ -534,7 +534,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-1, 0.25rem) -
Description
Horizontal padding of the PivotGrid configurator button.
+
Description
The horizontal padding of the PivotGrid configurator button.
@@ -544,7 +544,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-1, 0.25rem) -
Description
Vertical padding of the PivotGrid configurator button.
+
Description
The vertical padding of the PivotGrid configurator button.
@@ -554,7 +554,7 @@ The following table lists the available variables for customization. 1px -
Description
Border width of the PivotGrid configurator button.
+
Description
The border width of the PivotGrid configurator button.
@@ -564,7 +564,7 @@ The following table lists the available variables for customization. calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) -
Description
Size of the PivotGrid configurator button.
+
Description
The size of the PivotGrid configurator button.
@@ -574,7 +574,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
Icon spacing of the PivotGrid configurator button.
+
Description
The icon spacing of the PivotGrid configurator button.
@@ -584,7 +584,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-3, 0.75rem) -
Description
Horizontal padding of the PivotGrid calculated field.
+
Description
The horizontal padding of the PivotGrid calculated field.
@@ -594,7 +594,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-3, 0.75rem) -
Description
Vertical padding of the PivotGrid calculated field.
+
Description
The vertical padding of the PivotGrid calculated field.
@@ -604,7 +604,7 @@ The following table lists the available variables for customization. 1px -
Description
Border width of the PivotGrid calculated field.
+
Description
The border width of the PivotGrid calculated field.
@@ -614,7 +614,7 @@ The following table lists the available variables for customization. var(--kendo-border-radius-md, 0.25rem) -
Description
Border radius of the PivotGrid calculated field.
+
Description
The border radius of the PivotGrid calculated field.
@@ -624,7 +624,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-3, 0.75rem) -
Description
Spacing of the PivotGrid calculated field.
+
Description
The spacing of the PivotGrid calculated field.
@@ -634,7 +634,7 @@ The following table lists the available variables for customization. var(--kendo-component-bg, inherit) -
Description
Background color of the PivotGrid calculated field.
+
Description
The background color of the PivotGrid calculated field.
@@ -644,7 +644,7 @@ The following table lists the available variables for customization. var(--kendo-component-text, inherit) -
Description
Text color of the PivotGrid calculated field.
+
Description
The text color of the PivotGrid calculated field.
@@ -654,7 +654,7 @@ The following table lists the available variables for customization. var(--kendo-component-border, inherit) -
Description
Border color of the PivotGrid calculated field.
+
Description
The border color of the PivotGrid calculated field.
@@ -664,7 +664,7 @@ The following table lists the available variables for customization. inherit -
Description
Background color of the PivotGrid calculated field header.
+
Description
The background color of the PivotGrid calculated field header.
@@ -674,7 +674,7 @@ The following table lists the available variables for customization. var(--kendo-component-text, inherit) -
Description
Text color of the PivotGrid calculated field header.
+
Description
The text color of the PivotGrid calculated field header.
@@ -684,7 +684,7 @@ The following table lists the available variables for customization. inherit -
Description
Border color of the PivotGrid calculated field header.
+
Description
The border color of the PivotGrid calculated field header.
@@ -694,7 +694,7 @@ The following table lists the available variables for customization. calc(var(--kendo-spacing-3, 0.75rem) / 2) -
Description
Horizontal padding of the PivotGrid treeview.
+
Description
The horizontal padding of the PivotGrid treeview.
@@ -704,7 +704,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-0, 0px) -
Description
Vertical padding of the PivotGrid treeview.
+
Description
The vertical padding of the PivotGrid treeview.
diff --git a/packages/fluent/docs/customization-prompt.md b/packages/fluent/docs/customization-prompt.md index 6e8f2ac6ddc..92f0adc9b74 100644 --- a/packages/fluent/docs/customization-prompt.md +++ b/packages/fluent/docs/customization-prompt.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. var(--kendo-component-text, initial) -
Description
The text color of the Prompt.
+
Description
The text color of the AIPrompt.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. var(--kendo-component-bg, initial) -
Description
The background color of the Prompt.
+
Description
The background color of the AIPrompt.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. var(--kendo-component-border, initial) -
Description
The border color of the Prompt.
+
Description
The border color of the AIPrompt.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. var(--kendo-component-text, initial) -
Description
The text color of the Prompt header.
+
Description
The text color of the AIPrompt header.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. var(--kendo-component-bg, initial) -
Description
The background color of the Prompt header.
+
Description
The background color of the AIPrompt header.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. var(--kendo-component-border, initial) -
Description
The border color of the Prompt header.
+
Description
The border color of the AIPrompt header.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The vertical padding of the Prompt content.
+
Description
The vertical padding of the AIPrompt content.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The horizontal padding of the Prompt content.
+
Description
The horizontal padding of the AIPrompt content.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The spacing between the items of the Prompt content.
+
Description
The spacing between the items of the AIPrompt content.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. var(--kendo-neutral-190, inherit) -
Description
The text color of the Prompt content.
+
Description
The text color of the AIPrompt content.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. var(--kendo-neutral-10, inherit) -
Description
The background color of the Prompt content.
+
Description
The background color of the AIPrompt content.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. var(--kendo-component-border, initial) -
Description
The text border of the Prompt content.
+
Description
The text border of the AIPrompt content.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The spacing between the items of the Prompt content expander.
+
Description
The spacing between the items of the AIPrompt content expander.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The vertical padding of the Prompt suggestion container.
+
Description
The vertical padding of the AIPrompt suggestion container.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The horizontal padding of the AIPrompt suggestion container.
@@ -184,7 +184,7 @@ The following table lists the available variables for customization. var(--kendo-border-radius-md, 0.25rem) -
Description
The border radius of the Prompt suggestion container.
+
Description
The border radius of the AIPrompt suggestion container.
@@ -194,7 +194,7 @@ The following table lists the available variables for customization. var(--kendo-component-text, initial) -
Description
The text color of the Prompt suggestion container.
+
Description
The text color of the AIPrompt suggestion container.
@@ -204,7 +204,7 @@ The following table lists the available variables for customization. var(--kendo-component-bg, initial) -
Description
The background color of the Prompt suggestion container.
+
Description
The background color of the AIPrompt suggestion container.
@@ -214,7 +214,7 @@ The following table lists the available variables for customization. var(--kendo-component-border, initial) -
Description
The border color of the Prompt suggestion container.
+
Description
The border color of the AIPrompt suggestion container.
@@ -224,7 +224,7 @@ The following table lists the available variables for customization. var(--kendo-elevation-1, 0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13)) -
Description
The elevation of the Prompt suggestion container.
+
Description
The elevation of the AIPrompt suggestion container.
diff --git a/packages/fluent/docs/customization.md b/packages/fluent/docs/customization.md index 35acf910073..c0d98857130 100644 --- a/packages/fluent/docs/customization.md +++ b/packages/fluent/docs/customization.md @@ -4926,6 +4926,136 @@ The following table lists the available variables for customizing the Fluent the +### ChartWizard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chart-wizard-icon-area-colorStringif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
Description
The color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-bgStringif($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 ))var(--kendo-color-primary-subtle, #deecf9)
Description
The background color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-border-radiusStringk-border-radius(none)var(--kendo-border-radius-none, 0px)
Description
The border radius of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-focus-shadowListinset 0 0 0 1px if($kendo-enable-color-system, k-color( primary-emphasis ), k-get-theme-color-var( primary-130 ))inset 0 0 0 1px var(--kendo-color-primary-emphasis, #004578)
Description
The box shadow of the focused area around the chart type icon.
+
$kendo-chart-wizard-icon-area-selected-shadowListinset 0 0 0 1px $kendo-chart-wizard-icon-area-colorinset 0 0 0 1px var(--kendo-color-primary, #0078d4)
Description
The box shadow of the selected area around the chart type icon.
+
$kendo-chart-wizard-chart-type-selected-colorStringif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
Description
The color of the selected chart type items in the Property panel.
+
$kendo-chart-wizard-preview-pane-paddingStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The padding of the preview pane.
+
$kendo-chart-wizard-property-pane-paddingStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The padding of the property pane.
+
$kendo-chart-wizard-chart-type-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The gap between the chart type items in the Property panel.
+
$kendo-chart-wizard-icon-text-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The gap between the icon area and its text.
+
+ ### Charts @@ -6153,6 +6283,36 @@ The following table lists the available variables for customizing the Fluent the + + + + + + + + + + + + + + + + + + + + + + + + + + +
Description
The border color of the hovered Chat quick reply.
$kendo-chat-quick-reply-focus-offsetStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The offset of the focused Chat quick reply.
+
$kendo-chat-quick-reply-focus-outline-widthNumber1px1px
Description
The outline width of the focused Chat quick reply.
+
$kendo-chat-quick-reply-focus-outline-styleStringsolidsolid
Description
The outline style of the focused Chat quick reply.
+
@@ -18957,7 +19117,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-font-size, inherit) -
Description
Font size of the map.
+
Description
The font size of the Map.
@@ -18967,7 +19127,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-line-height, normal) -
Description
Line height of the map.
+
Description
The line height of the Map.
@@ -18977,7 +19137,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-font-family, normal) -
Description
Font family of the map.
+
Description
The font family of the Map.
@@ -18987,7 +19147,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-bg, transparent) -
Description
Background color of the map.
+
Description
The background color of the Map.
@@ -18997,7 +19157,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-text, inherit) -
Description
Text color of the map.
+
Description
The text color of the Map.
@@ -19007,7 +19167,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-color-border, #8a8886) -
Description
Border color of the map.
+
Description
The border color of the Map.
@@ -19017,7 +19177,7 @@ The following table lists the available variables for customizing the Fluent the 0px -
Description
Border width of the map.
+
Description
The border width of the Map.
@@ -19027,7 +19187,7 @@ The following table lists the available variables for customizing the Fluent the 600px -
Description
Height of the map.
+
Description
The height of the Map.
@@ -19037,7 +19197,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-4, 1rem) -
Description
Map navigator horizontal margin.
+
Description
The horizontal margin of the Map navigator.
@@ -19047,7 +19207,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-4, 1rem) -
Description
Map navigator vertical margin.
+
Description
The vertical margin of the Map navigator.
@@ -19057,7 +19217,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-0\.5, 0.125rem) -
Description
Map navigator padding.
+
Description
The padding of the Map navigator.
@@ -19067,7 +19227,7 @@ The following table lists the available variables for customizing the Fluent the calc(var(--kendo-icon-size) * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2) -
Description
Map navigator width.
+
Description
The width of the Map navigator.
@@ -19077,7 +19237,7 @@ The following table lists the available variables for customizing the Fluent the calc(var(--kendo-icon-size) * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2) -
Description
Map navigator height.
+
Description
The height of the Map navigator.
@@ -19087,7 +19247,7 @@ The following table lists the available variables for customizing the Fluent the 1px -
Description
Map navigator border width.
+
Description
The border width of the Map navigator.
@@ -19097,7 +19257,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-color-app-surface, #ffffff) -
Description
Map navigator background color.
+
Description
The background color of the Map navigator.
@@ -19107,7 +19267,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-color-on-app-surface, #323130) -
Description
Map navigator text color.
+
Description
The text color of the Map navigator.
@@ -19117,7 +19277,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-color-border, #8a8886) -
Description
Map navigator border color.
+
Description
The border color of the Map navigator.
@@ -19127,7 +19287,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-4, 1rem) -
Description
Map zoom control margin.
+
Description
The margin of the Map zoom control.
@@ -19137,7 +19297,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-1\.5, 0.375rem) -
Description
Map zoom control horizontal padding.
+
Description
The horizontal padding of the Map zoom control.
@@ -19147,7 +19307,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-1\.5, 0.375rem) -
Description
Map zoom control vertical padding.
+
Description
The vertical padding of the Map zoom control.
@@ -19157,7 +19317,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-1, 0.25rem) -
Description
Map attribution horizontal padding.
+
Description
The horizontal padding of the Map attribution.
@@ -19167,7 +19327,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-0\.5, 0.125rem) -
Description
Map attribution vertical padding.
+
Description
The vertical padding of the Map attribution.
@@ -19177,7 +19337,7 @@ The following table lists the available variables for customizing the Fluent the calc(var(--kendo-font-size, inherit) * 0.75) -
Description
Map attribution font size.
+
Description
The font size of the Map attribution.
@@ -19187,7 +19347,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-color-app-surface, #ffffff) -
Description
Map attribution background color.
+
Description
The background color of the Map attribution.
@@ -19197,7 +19357,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-color-primary, #0078d4) -
Description
Map marker fill color.
+
Description
The fill color of the Map marker.
@@ -19227,7 +19387,7 @@ The following table lists the available variables for customizing the Fluent the 1px -
Description
Border width of the mediaplayer.
+
Description
The border width of the MediaPlayer.
@@ -19237,7 +19397,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-font-family, inherit) -
Description
Font family of the mediaplayer.
+
Description
The font family of the MediaPlayer.
@@ -19247,7 +19407,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-font-size, inherit) -
Description
Font size of the mediaplayer.
+
Description
The font size of the MediaPlayer.
@@ -19257,7 +19417,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-line-height, normal) -
Description
Line height of the mediaplayer.
+
Description
The line height of the MediaPlayer.
@@ -19267,7 +19427,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-bg, inherit) -
Description
Background color of the mediaplayer.
+
Description
The background color of the MediaPlayer.
@@ -19277,7 +19437,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-text, inherit) -
Description
Text color of the mediaplayer.
+
Description
The text color of the MediaPlayer.
@@ -19287,7 +19447,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-border, inherit) -
Description
Border color of the mediaplayer.
+
Description
The border color of the MediaPlayer.
@@ -19297,7 +19457,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-color-base-emphasis, #605e5c) -
Description
Mediaplayer overlay background color.
+
Description
The background color of the MediaPlayer overlay.
@@ -19307,7 +19467,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-color-border, #8a8886) -
Description
Mediaplayer quality button border color.
+
Description
The border color of the MediaPlayer button.
@@ -19317,7 +19477,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-font-size-xl, inherit) -
Description
Media player title font size.
+
Description
The font size of the MediaPlayer title.
@@ -19327,7 +19487,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-2, 0.5rem) -
Description
Mediaplayer titlebar horizontal padding.
+
Description
The horizontal padding of the MediaPlayer title.
@@ -19337,7 +19497,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-2, 0.5rem) -
Description
Mediaplayer titlebar vertical padding.
+
Description
The vertical padding of the MediaPlayer title.
@@ -19347,7 +19507,7 @@ The following table lists the available variables for customizing the Fluent the color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 40%, transparent) -
Description
Mediaplayer titlebar background color.
+
Description
The background color of the MediaPlayer title.
@@ -19357,7 +19517,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-bg, inherit) -
Description
Mediaplayer titlebar text color.
+
Description
The text color of the MediaPlayer title.
@@ -22509,7 +22669,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-3, 0.75rem) -
Description
Spacer of the PivotGrid.
+
Description
The spacer of the PivotGrid.
@@ -22519,7 +22679,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-0, 0px) -
Description
Horizontal padding of the PivotGrid.
+
Description
The horizontal padding of the PivotGrid.
@@ -22529,7 +22689,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-0, 0px) -
Description
Vertical of the PivotGrid.
+
Description
The vertical of the PivotGrid.
@@ -22539,7 +22699,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-font-family, inherit) -
Description
Font family of the PivotGrid.
+
Description
The font family of the PivotGrid.
@@ -22549,7 +22709,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-font-size, inherit) -
Description
Font size of the PivotGrid.
+
Description
The font size of the PivotGrid.
@@ -22559,7 +22719,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-line-height, normal) -
Description
Line height of the PivotGrid.
+
Description
The line height of the PivotGrid.
@@ -22569,7 +22729,7 @@ The following table lists the available variables for customizing the Fluent the 1px -
Description
Border width of the PivotGrid.
+
Description
The border width of the PivotGrid.
@@ -22579,7 +22739,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-1, 0.25rem) -
Description
Icon spacing of the PivotGrid.
+
Description
The icon spacing of the PivotGrid.
@@ -22589,7 +22749,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-bg, initial) -
Description
Background color of the PivotGrid.
+
Description
The background color of the PivotGrid.
@@ -22599,7 +22759,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-text, initial) -
Description
Text color of the PivotGrid.
+
Description
The text color of the PivotGrid.
@@ -22609,7 +22769,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-border, initial) -
Description
Border color of the PivotGrid.
+
Description
The border color of the PivotGrid.
@@ -22619,7 +22779,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-border, initial) -
Description
Alt border color of the PivotGrid.
+
Description
The alt border color of the PivotGrid.
@@ -22629,7 +22789,7 @@ The following table lists the available variables for customizing the Fluent the 300px -
Description
Default width of the PivotGrid row header.
+
Description
The default width of the PivotGrid row header.
@@ -22639,7 +22799,7 @@ The following table lists the available variables for customizing the Fluent the 75px -
Description
Default height of the PivotGrid column header.
+
Description
The default height of the PivotGrid column header.
@@ -22649,7 +22809,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-3, 0.75rem) -
Description
Horizontal padding of the PivotGrid cell.
+
Description
The horizontal padding of the PivotGrid cell.
@@ -22659,7 +22819,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-3, 0.75rem) -
Description
Vertical padding of the PivotGrid cell.
+
Description
The vertical padding of the PivotGrid cell.
@@ -22669,7 +22829,7 @@ The following table lists the available variables for customizing the Fluent the 1px -
Description
Border width of the PivotGrid cell.
+
Description
The border width of the PivotGrid cell.
@@ -22679,7 +22839,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-bg, inherit) -
Description
Background color of the PivotGrid header.
+
Description
The background color of the PivotGrid header.
@@ -22689,7 +22849,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-color-on-app-surface, #323130) -
Description
Text color of the PivotGrid header.
+
Description
The text color of the PivotGrid header.
@@ -22699,7 +22859,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-border, inherit) -
Description
Border color of the PivotGrid header.
+
Description
The border color of the PivotGrid header.
@@ -22709,7 +22869,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-color-base-subtle, #edebe9) -
Description
Background color of the PivotGrid total cells.
+
Description
The background color of the PivotGrid total cells.
@@ -22719,7 +22879,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-text, inherit) -
Description
Text color of the PivotGrid total cells.
+
Description
The text color of the PivotGrid total cells.
@@ -22729,7 +22889,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-border, inherit) -
Description
Border color of the PivotGrid total cells.
+
Description
The border color of the PivotGrid total cells.
@@ -22739,7 +22899,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-hover-bg, inherit) -
Description
Hover background color of the PivotGrid.
+
Description
The hover background color of the PivotGrid.
@@ -22749,7 +22909,7 @@ The following table lists the available variables for customizing the Fluent the inherit -
Description
Hover text color of the PivotGrid.
+
Description
The hover text color of the PivotGrid.
@@ -22759,7 +22919,7 @@ The following table lists the available variables for customizing the Fluent the inherit -
Description
Hover border color of the PivotGrid.
+
Description
The hover border color of the PivotGrid.
@@ -22769,7 +22929,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-selected-bg, inherit) -
Description
Selected background color of the PivotGrid.
+
Description
The selected background color of the PivotGrid.
@@ -22779,7 +22939,7 @@ The following table lists the available variables for customizing the Fluent the inherit -
Description
Selected text color of the PivotGrid.
+
Description
The selected text color of the PivotGrid.
@@ -22789,7 +22949,7 @@ The following table lists the available variables for customizing the Fluent the inherit -
Description
Selected border color of the PivotGrid.
+
Description
The selected border color of the PivotGrid.
@@ -22799,7 +22959,7 @@ The following table lists the available variables for customizing the Fluent the inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c) -
Description
Focus shadow of the PivotGrid.
+
Description
The focus shadow of the PivotGrid.
@@ -22809,7 +22969,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-0, 0px) -
Description
Horizontal padding of the PivotGrid configurator.
+
Description
The horizontal padding of the PivotGrid configurator.
@@ -22819,7 +22979,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-0, 0px) -
Description
Vertical padding of the PivotGrid configurator.
+
Description
The vertical padding of the PivotGrid configurator.
@@ -22829,7 +22989,7 @@ The following table lists the available variables for customizing the Fluent the 1px -
Description
Border width of the PivotGrid configurator.
+
Description
The border width of the PivotGrid configurator.
@@ -22839,7 +22999,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-3, 0.75rem) -
Description
Horizontal padding of the PivotGrid configurator header.
+
Description
The horizontal padding of the PivotGrid configurator header.
@@ -22849,7 +23009,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-3, 0.75rem) -
Description
Vertical padding of the PivotGrid configurator header.
+
Description
The vertical padding of the PivotGrid configurator header.
@@ -22859,7 +23019,7 @@ The following table lists the available variables for customizing the Fluent the calc(var(--kendo-font-size-xl, 2rem) * 0.9) -
Description
Font size of the PivotGrid configurator header.
+
Description
The font size of the PivotGrid configurator header.
@@ -22869,7 +23029,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-font-weight-bold, bold) -
Description
Font weight of the PivotGrid configurator header.
+
Description
The font weight of the PivotGrid configurator header.
@@ -22879,7 +23039,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-3, 0.75rem) -
Description
Horizontal padding of the PivotGrid configurator content.
+
Description
The horizontal padding of the PivotGrid configurator content.
@@ -22889,7 +23049,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-0, 0px) -
Description
Vertical padding of the PivotGrid configurator content.
+
Description
The vertical padding of the PivotGrid configurator content.
@@ -22899,7 +23059,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-0, 0px) -
Description
Horizontal margin of the PivotGrid configurator fields.
+
Description
The horizontal margin of the PivotGrid configurator fields.
@@ -22909,7 +23069,7 @@ The following table lists the available variables for customizing the Fluent the calc(var(--kendo-spacing-3, 0.75rem) / 2) -
Description
Vertical margin of the PivotGrid configurator fields.
+
Description
The vertical margin of the PivotGrid configurator fields.
@@ -22919,7 +23079,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-2, 0.5rem) -
Description
Spacing of the PivotGrid configurator fields.
+
Description
The spacing of the PivotGrid configurator fields.
@@ -22929,7 +23089,7 @@ The following table lists the available variables for customizing the Fluent the 320px -
Description
Default width of the PivotGrid vertical configurator.
+
Description
The default width of the PivotGrid vertical configurator.
@@ -22939,7 +23099,7 @@ The following table lists the available variables for customizing the Fluent the 420px -
Description
Default height of the PivotGrid horizontal configurator.
+
Description
The default height of the PivotGrid horizontal configurator.
@@ -22949,7 +23109,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-bg, inherit) -
Description
Background color of the PivotGrid configurator.
+
Description
The background color of the PivotGrid configurator.
@@ -22959,7 +23119,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-color-on-app-surface, #323130) -
Description
Text color of the PivotGrid configurator.
+
Description
The text color of the PivotGrid configurator.
@@ -22969,7 +23129,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-border, inherit) -
Description
Border color of the PivotGrid configurator.
+
Description
The border color of the PivotGrid configurator.
@@ -22979,7 +23139,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-bg, inherit) -
Description
Background color of the PivotGrid configurator header.
+
Description
The background color of the PivotGrid configurator header.
@@ -22989,7 +23149,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-text, inherit) -
Description
Text color of the PivotGrid configurator header.
+
Description
The text color of the PivotGrid configurator header.
@@ -22999,7 +23159,7 @@ The following table lists the available variables for customizing the Fluent the inherit -
Description
Border color of the PivotGrid configurator header.
+
Description
The border color of the PivotGrid configurator header.
@@ -23009,7 +23169,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-1, 0.25rem) -
Description
Horizontal padding of the PivotGrid configurator button.
+
Description
The horizontal padding of the PivotGrid configurator button.
@@ -23019,7 +23179,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-1, 0.25rem) -
Description
Vertical padding of the PivotGrid configurator button.
+
Description
The vertical padding of the PivotGrid configurator button.
@@ -23029,7 +23189,7 @@ The following table lists the available variables for customizing the Fluent the 1px -
Description
Border width of the PivotGrid configurator button.
+
Description
The border width of the PivotGrid configurator button.
@@ -23039,7 +23199,7 @@ The following table lists the available variables for customizing the Fluent the calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) -
Description
Size of the PivotGrid configurator button.
+
Description
The size of the PivotGrid configurator button.
@@ -23049,7 +23209,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-2, 0.5rem) -
Description
Icon spacing of the PivotGrid configurator button.
+
Description
The icon spacing of the PivotGrid configurator button.
@@ -23059,7 +23219,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-3, 0.75rem) -
Description
Horizontal padding of the PivotGrid calculated field.
+
Description
The horizontal padding of the PivotGrid calculated field.
@@ -23069,7 +23229,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-3, 0.75rem) -
Description
Vertical padding of the PivotGrid calculated field.
+
Description
The vertical padding of the PivotGrid calculated field.
@@ -23079,7 +23239,7 @@ The following table lists the available variables for customizing the Fluent the 1px -
Description
Border width of the PivotGrid calculated field.
+
Description
The border width of the PivotGrid calculated field.
@@ -23089,7 +23249,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-border-radius-md, 0.25rem) -
Description
Border radius of the PivotGrid calculated field.
+
Description
The border radius of the PivotGrid calculated field.
@@ -23099,7 +23259,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-3, 0.75rem) -
Description
Spacing of the PivotGrid calculated field.
+
Description
The spacing of the PivotGrid calculated field.
@@ -23109,7 +23269,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-bg, inherit) -
Description
Background color of the PivotGrid calculated field.
+
Description
The background color of the PivotGrid calculated field.
@@ -23119,7 +23279,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-text, inherit) -
Description
Text color of the PivotGrid calculated field.
+
Description
The text color of the PivotGrid calculated field.
@@ -23129,7 +23289,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-border, inherit) -
Description
Border color of the PivotGrid calculated field.
+
Description
The border color of the PivotGrid calculated field.
@@ -23139,7 +23299,7 @@ The following table lists the available variables for customizing the Fluent the inherit -
Description
Background color of the PivotGrid calculated field header.
+
Description
The background color of the PivotGrid calculated field header.
@@ -23149,7 +23309,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-text, inherit) -
Description
Text color of the PivotGrid calculated field header.
+
Description
The text color of the PivotGrid calculated field header.
@@ -23159,7 +23319,7 @@ The following table lists the available variables for customizing the Fluent the inherit -
Description
Border color of the PivotGrid calculated field header.
+
Description
The border color of the PivotGrid calculated field header.
@@ -23169,7 +23329,7 @@ The following table lists the available variables for customizing the Fluent the calc(var(--kendo-spacing-3, 0.75rem) / 2) -
Description
Horizontal padding of the PivotGrid treeview.
+
Description
The horizontal padding of the PivotGrid treeview.
@@ -23179,7 +23339,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-0, 0px) -
Description
Vertical padding of the PivotGrid treeview.
+
Description
The vertical padding of the PivotGrid treeview.
@@ -23999,7 +24159,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-text, initial) -
Description
The text color of the Prompt.
+
Description
The text color of the AIPrompt.
@@ -24009,7 +24169,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-bg, initial) -
Description
The background color of the Prompt.
+
Description
The background color of the AIPrompt.
@@ -24019,7 +24179,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-border, initial) -
Description
The border color of the Prompt.
+
Description
The border color of the AIPrompt.
@@ -24029,7 +24189,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-text, initial) -
Description
The text color of the Prompt header.
+
Description
The text color of the AIPrompt header.
@@ -24039,7 +24199,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-bg, initial) -
Description
The background color of the Prompt header.
+
Description
The background color of the AIPrompt header.
@@ -24049,7 +24209,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-border, initial) -
Description
The border color of the Prompt header.
+
Description
The border color of the AIPrompt header.
@@ -24059,7 +24219,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-4, 1rem) -
Description
The vertical padding of the Prompt content.
+
Description
The vertical padding of the AIPrompt content.
@@ -24069,7 +24229,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-4, 1rem) -
Description
The horizontal padding of the Prompt content.
+
Description
The horizontal padding of the AIPrompt content.
@@ -24079,7 +24239,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-4, 1rem) -
Description
The spacing between the items of the Prompt content.
+
Description
The spacing between the items of the AIPrompt content.
@@ -24089,7 +24249,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-neutral-190, inherit) -
Description
The text color of the Prompt content.
+
Description
The text color of the AIPrompt content.
@@ -24099,7 +24259,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-neutral-10, inherit) -
Description
The background color of the Prompt content.
+
Description
The background color of the AIPrompt content.
@@ -24109,7 +24269,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-border, initial) -
Description
The text border of the Prompt content.
+
Description
The text border of the AIPrompt content.
@@ -24119,7 +24279,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-2, 0.5rem) -
Description
The spacing between the items of the Prompt content expander.
+
Description
The spacing between the items of the AIPrompt content expander.
@@ -24129,7 +24289,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-2, 0.5rem) -
Description
The vertical padding of the Prompt suggestion container.
+
Description
The vertical padding of the AIPrompt suggestion container.
@@ -24139,7 +24299,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-spacing-2, 0.5rem) -
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The horizontal padding of the AIPrompt suggestion container.
@@ -24149,7 +24309,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-border-radius-md, 0.25rem) -
Description
The border radius of the Prompt suggestion container.
+
Description
The border radius of the AIPrompt suggestion container.
@@ -24159,7 +24319,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-text, initial) -
Description
The text color of the Prompt suggestion container.
+
Description
The text color of the AIPrompt suggestion container.
@@ -24169,7 +24329,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-bg, initial) -
Description
The background color of the Prompt suggestion container.
+
Description
The background color of the AIPrompt suggestion container.
@@ -24179,7 +24339,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-component-border, initial) -
Description
The border color of the Prompt suggestion container.
+
Description
The border color of the AIPrompt suggestion container.
@@ -24189,7 +24349,7 @@ The following table lists the available variables for customizing the Fluent the var(--kendo-elevation-1, 0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13)) -
Description
The elevation of the Prompt suggestion container.
+
Description
The elevation of the AIPrompt suggestion container.
diff --git a/packages/fluent/docs/index.md b/packages/fluent/docs/index.md index f6c123a52e5..77ab100e6e8 100644 --- a/packages/fluent/docs/index.md +++ b/packages/fluent/docs/index.md @@ -29,24 +29,50 @@ The Kendo UI for Vue Fluent theme is part of the Kendo UI for Vue library of UI ## Dependencies -For the Kendo UI Fluent theme to closely implement the [Fluent Design System](https://www.microsoft.com/design/fluent/#/), provide [the Segoe UI font family](#toc-fonts). +For the Kendo UI Fluent theme to closely implement the [Fluent Design System](https://www.microsoft.com/design/fluent/#/), provide the Segoe UI font family. By default, the Fluent theme uses the Segoe UI font family but the font itself is not included in the theme package. -You can [download](https://aka.ms/webfluentfonts) and add the font in the following way: +To include the Segoe UI font in your project, follow these steps: -```html-no-run +1. Download the Segoe UI font from [Microsoft](https://aka.ms/webfluentfonts). The download includes the Segoe UI Regular, Segoe UI Italic, Segoe UI Bold, and Segoe UI Bold Italic font files. +2. Add the downloaded font files to your project's assets folder. {% platform_content angular %}For Angular, make sure that the folder is included in the assets section of the `angular.json` file.{% endplatform_content %}{% platform_content react %} For React, make sure that the folder is included in the `public` directory.{% endplatform_content %}{% platform_content vue %} For Vue, make sure that the folder is included in the `public` directory.{% endplatform_content %} +3. In your HTML file or global style sheet, add the following code to include the font: + +```html + +``` + +{% platform_content angular %} +The `@font-face` rule should be added to the `styles.css` or `style.scss` file in the `src` folder of your Angular project. +{% endplatform_content %} + +Make sure to replace the path in the `url` property with the actual path to the downloaded font file in your project. + +4. Finally, update the CSS code in your file to use the Segoe UI font: + +```html ``` + +That's it! The Segoe UI font will now be applied to your project. + ## Dynamic customization The Kendo UI Fluent theme utilizes [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) which allows for dynamic customization without needing to recompile the theme. The Kendo UI Fluent theme exposes root variables that are globally available: -```html-no-run +```html @@ -54,7 +80,7 @@ The Kendo UI Fluent theme exposes root variables that are globally available: As well as variables targeting specific components: -```html-no-run +```html diff --git a/packages/fluent/package.json b/packages/fluent/package.json index 2edb59b3d9d..ef74e675f72 100644 --- a/packages/fluent/package.json +++ b/packages/fluent/package.json @@ -1,7 +1,7 @@ { "name": "@progress/kendo-theme-fluent", "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "author": "Progress", "license": "Apache-2.0", "keywords": [ @@ -54,8 +54,8 @@ }, "dependencies": { "@progress/kendo-svg-icons": "3.0.0", - "@progress/kendo-theme-core": "8.1.0-dev.2", - "@progress/kendo-theme-utils": "8.1.0-dev.2" + "@progress/kendo-theme-core": "8.2.0-dev.0", + "@progress/kendo-theme-utils": "8.2.0-dev.0" }, "directories": { "doc": "docs", diff --git a/packages/fluent/scss/chart-wizard/_index.scss b/packages/fluent/scss/chart-wizard/_index.scss new file mode 100644 index 00000000000..5e2cafa2c21 --- /dev/null +++ b/packages/fluent/scss/chart-wizard/_index.scss @@ -0,0 +1,36 @@ +// Module meta +$_kendo-module-meta: ( + name: "chart-wizard", + dependencies: ( + "icon", + "window", + "splitter", + "dataviz", + "expansion-panel", + "grid", + "tabstrip", + "listview", + "forms", + "combobox" + ) +); + + +// Component +@forward "./_variables.scss"; +@use "./_layout.scss" as *; +@use "./_theme.scss" as *; + + +// Register +@use "../core/module-system/" as module; +@include module.register( $_kendo-module-meta... ); + + +// Expose +@mixin chart-wizard-styles() { + @include module.render( "chart-wizard" ) { + @include kendo-chart-wizard--layout(); + @include kendo-chart-wizard--theme(); + } +} diff --git a/packages/fluent/scss/chart-wizard/_layout.scss b/packages/fluent/scss/chart-wizard/_layout.scss new file mode 100644 index 00000000000..ba0a5fa438e --- /dev/null +++ b/packages/fluent/scss/chart-wizard/_layout.scss @@ -0,0 +1,48 @@ +@use "../core/" as *; +@use "../icon/_variables.scss" as *; +@use "../expansion-panel/_variables.scss" as *; +@use "../core/spacing/" as *; + +@use "../core/_variables.scss" as *; +@use "./_variables.scss" as *; +@use "../core/typography/" as *; + +@mixin kendo-chart-wizard--layout() { + // Chart wizard + .k-chart-wizard { + .k-icon-text-wrapper { + display: flex; + align-items: center; + gap: var( --kendo-chart-wizard-icon-text-gap, #{$kendo-chart-wizard-icon-text-gap} ); + } + + .k-icon-background-area { + display: flex; + padding: var( --kendo-chart-wizard-icon-area-padding, #{$kendo-chart-wizard-icon-area-padding} ); + border-radius: var( --kendo-chart-wizard-icon-area-border-radiusg, #{$kendo-chart-wizard-icon-area-border-radius} ); + } + } + + .k-chart-types-wrapper { + display: flex; + flex-direction: column; + gap: var( --kendo-chart-wizard-chart-type-spacing, #{$kendo-chart-wizard-chart-type-spacing} ); + } + + .k-chart-wizard-splitter { + height: 100%; + + .k-tabstrip { + width: 100%; + height: 100%; + } + } + + .k-chart-wizard-preview-pane { + padding: var( --kendo-chart-wizard-preview-pane-padding, #{$kendo-chart-wizard-preview-pane-padding} ); + } + + .k-chart-wizard-property-pane { + padding: var( --kendo-chart-wizard-property-pane-padding, #{$kendo-chart-wizard-property-pane-padding} ); + } +} diff --git a/packages/fluent/scss/chart-wizard/_theme.scss b/packages/fluent/scss/chart-wizard/_theme.scss new file mode 100644 index 00000000000..1324dec9c06 --- /dev/null +++ b/packages/fluent/scss/chart-wizard/_theme.scss @@ -0,0 +1,32 @@ +@use "./_variables.scss" as *; + +@mixin kendo-chart-wizard--theme() { + .k-chart-wizard { + .k-icon-text-wrapper { + &.k-selected { + color: var( --kendo-chart-wizard-chart-type-selected-color, #{$kendo-chart-wizard-chart-type-selected-color} ); + + .k-icon-background-area { + box-shadow: var( --kendo-chart-wizard-icon-area-selected-shadow, #{$kendo-chart-wizard-icon-area-selected-shadow} ); + } + } + + &:hover, + &.k-hover { + cursor: pointer; + } + + &:focus, + &.k-focus { + .k-icon-background-area { + box-shadow: var( --kendo-chart-wizard-icon-area-focus-shadow, #{$kendo-chart-wizard-icon-area-focus-shadow} ); + } + } + } + + & .k-icon-background-area { + color: var( --kendo-chart-wizard-icon-area-color, #{$kendo-chart-wizard-icon-area-color} ); + background-color: var( --kendo-chart-wizard-icon-area-bg, #{$kendo-chart-wizard-icon-area-bg} ); + } + } +} diff --git a/packages/fluent/scss/chart-wizard/_variables.scss b/packages/fluent/scss/chart-wizard/_variables.scss new file mode 100644 index 00000000000..96f6b034996 --- /dev/null +++ b/packages/fluent/scss/chart-wizard/_variables.scss @@ -0,0 +1,41 @@ +@use "sass:map"; +@use "../core/" as *; + +// Chart wizard + +/// The color of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default; +/// The background color of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 )) !default; +/// The border radius of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-border-radius: k-border-radius(none) !default; +/// The padding of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-padding: k-spacing(4) !default; +/// The box shadow of the focused area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color( primary-emphasis ), k-get-theme-color-var( primary-130 )) !default; +/// The box shadow of the selected area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-selected-shadow: inset 0 0 0 1px $kendo-chart-wizard-icon-area-color !default; + +/// The color of the selected chart type items in the Property panel. +/// @group chart-wizard +$kendo-chart-wizard-chart-type-selected-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default; + +/// The padding of the preview pane. +/// @group chart-wizard +$kendo-chart-wizard-preview-pane-padding: k-spacing(3) !default; +/// The padding of the property pane. +/// @group chart-wizard +$kendo-chart-wizard-property-pane-padding: k-spacing(3) !default; + +/// The gap between the chart type items in the Property panel. +/// @group chart-wizard +$kendo-chart-wizard-chart-type-spacing: k-spacing(4) !default; +/// The gap between the icon area and its text. +/// @group chart-wizard +$kendo-chart-wizard-icon-text-gap: k-spacing(3) !default; diff --git a/packages/fluent/scss/chat/_layout.scss b/packages/fluent/scss/chat/_layout.scss index 2f0d5aca6fb..ae37471d511 100644 --- a/packages/fluent/scss/chat/_layout.scss +++ b/packages/fluent/scss/chat/_layout.scss @@ -231,6 +231,10 @@ padding-block: var( --kendo-chat-quick-reply-padding-y, #{ $kendo-chat-quick-reply-padding-y } ); border-width: 1px; border-style: solid; + border-color: currentColor; + background: none; + color: inherit; + position: relative; line-height: var( --kendo-chat-quick-reply-line-height, #{ $kendo-chat-quick-reply-line-height } ); cursor: pointer; user-select: none; @@ -240,6 +244,18 @@ transition-duration: .2s; transition-timing-function: ease-in-out; outline: none; + + &:focus::after, + &.k-focus::after { + content: ""; + position: absolute; + border: medium none; + border-radius: var(--kendo-border-radius-full, 9999px); + inset: var( --kendo-chat-quick-reply-focus-offset, #{$kendo-chat-quick-reply-focus-offset} ); + outline-width: var( --kendo-chat-quick-reply-focus-outline-width, #{$kendo-chat-quick-reply-focus-outline-width} ); + outline-style: var( --kendo-chat-quick-reply-focus-outline-style, #{$kendo-chat-quick-reply-focus-outline-style} ); + z-index: 1; + } } diff --git a/packages/fluent/scss/chat/_theme.scss b/packages/fluent/scss/chat/_theme.scss index 09fa5c599fc..54e8dc68781 100644 --- a/packages/fluent/scss/chat/_theme.scss +++ b/packages/fluent/scss/chat/_theme.scss @@ -68,15 +68,21 @@ var( --kendo-chat-quick-reply-bg, #{ $kendo-chat-quick-reply-bg } ), var( --kendo-chat-quick-reply-border, #{ $kendo-chat-quick-reply-border } ) ); - } - .k-quick-reply:hover { - @include fill( - var( --kendo-chat-quick-reply-hover-text, #{ $kendo-chat-quick-reply-hover-text } ), - var( --kendo-chat-quick-reply-hover-bg, #{ $kendo-chat-quick-reply-hover-bg } ), - var( --kendo-chat-quick-reply-hover-border, #{ $kendo-chat-quick-reply-hover-border } ) - ); - } + &:hover, + &.k-hover { + @include fill( + var( --kendo-chat-quick-reply-hover-text, #{ $kendo-chat-quick-reply-hover-text } ), + var( --kendo-chat-quick-reply-hover-bg, #{ $kendo-chat-quick-reply-hover-bg } ), + var( --kendo-chat-quick-reply-hover-border, #{ $kendo-chat-quick-reply-hover-border } ) + ); + } + + &:focus::after, + &.k-focus::after { + outline-color: var( --kendo-chat-quick-reply-focus-outline, initial ) + } + } } diff --git a/packages/fluent/scss/chat/_variables.scss b/packages/fluent/scss/chat/_variables.scss index cc212e86f35..b1adfa97a8f 100644 --- a/packages/fluent/scss/chat/_variables.scss +++ b/packages/fluent/scss/chat/_variables.scss @@ -225,3 +225,13 @@ $kendo-chat-quick-reply-hover-text: var( --kendo-component-bg, inherit ) !defaul /// The border color of the hovered Chat quick reply. /// @group chat $kendo-chat-quick-reply-hover-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default; + +/// The offset of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-focus-offset: k-spacing(0.5) !default; +/// The outline width of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-focus-outline-width: 1px !default; +/// The outline style of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-focus-outline-style: solid !default; diff --git a/packages/fluent/scss/core/module-system/_components.scss b/packages/fluent/scss/core/module-system/_components.scss index 2abac0bfb79..6f3b797c704 100644 --- a/packages/fluent/scss/core/module-system/_components.scss +++ b/packages/fluent/scss/core/module-system/_components.scss @@ -110,6 +110,7 @@ $components: ( "splitter", "tilelayout", "dock-manager", + "chart-wizard", // Data management "grid", diff --git a/packages/fluent/scss/index.scss b/packages/fluent/scss/index.scss index ff1524876d4..0dd44571a7d 100644 --- a/packages/fluent/scss/index.scss +++ b/packages/fluent/scss/index.scss @@ -121,6 +121,7 @@ @forward "./splitter"; @forward "./tilelayout"; @forward "./dock-manager"; +@forward "./chart-wizard"; // Editors @@ -285,6 +286,7 @@ @use "./splitter" as *; @use "./tilelayout" as *; @use "./dock-manager" as *; +@use "./chart-wizard" as *; // Data management @@ -473,6 +475,7 @@ @include splitter-styles(); @include tilelayout-styles(); @include dock-manager-styles(); + @include chart-wizard-styles(); // Data management @include grid-styles(); diff --git a/packages/fluent/scss/map/_variables.scss b/packages/fluent/scss/map/_variables.scss index b7921494ad7..c1a785de44d 100644 --- a/packages/fluent/scss/map/_variables.scss +++ b/packages/fluent/scss/map/_variables.scss @@ -3,84 +3,84 @@ @use "../button/_variables.scss" as *; @use "../core/spacing" as *; -/// Font size of the map. +/// The font size of the Map. /// @group map $kendo-map-font-size: var( --kendo-font-size, inherit ) !default; -/// Line height of the map. +/// The line height of the Map. /// @group map $kendo-map-line-height: var( --kendo-line-height, normal ) !default; -/// Font family of the map. +/// The font family of the Map. /// @group map $kendo-map-font-family: var( --kendo-font-family, normal ) !default; -/// Background color of the map. +/// The background color of the Map. /// @group map $kendo-map-bg: var( --kendo-component-bg, transparent ) !default; -/// Text color of the map. +/// The text color of the Map. /// @group map $kendo-map-text: var( --kendo-component-text, inherit ) !default; -/// Border color of the map. +/// The border color of the Map. /// @group map $kendo-map-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default; -/// Border width of the map. +/// The border width of the Map. /// @group map $kendo-map-border-width: 0px !default; -/// Height of the map. +/// The height of the Map. /// @group map $kendo-map-height: 600px !default; -/// Map navigator horizontal margin. +/// The horizontal margin of the Map navigator. /// @group map $kendo-map-navigator-margin-x: k-spacing(4) !default; -/// Map navigator vertical margin. +/// The vertical margin of the Map navigator. /// @group map $kendo-map-navigator-margin-y: k-spacing(4) !default; -/// Map navigator padding. +/// The padding of the Map navigator. /// @group map $kendo-map-navigator-padding: k-spacing(0.5) !default; -/// Map navigator width. +/// The width of the Map navigator. /// @group map $kendo-map-navigator-width: calc( var( --kendo-icon-size) * 3 + calc( #{$kendo-map-navigator-padding} * 2) ) !default; -/// Map navigator height. +/// The height of the Map navigator. /// @group map $kendo-map-navigator-height: $kendo-map-navigator-width !default; -/// Map navigator border width. +/// The border width of the Map navigator. /// @group map $kendo-map-navigator-border-width: 1px !default; -/// Map navigator background color. +/// The background color of the Map navigator. /// @group map $kendo-map-navigator-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default; -/// Map navigator text color. +/// The text color of the Map navigator. /// @group map $kendo-map-navigator-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default; -/// Map navigator border color. +/// The border color of the Map navigator. /// @group map $kendo-map-navigator-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default; -/// Map zoom control margin. +/// The margin of the Map zoom control. /// @group map $kendo-map-zoom-control-margin: k-spacing(4) !default; -/// Map zoom control horizontal padding. +/// The horizontal padding of the Map zoom control. /// @group map $kendo-map-zoom-control-button-padding-x: $kendo-button-md-padding-y !default; -/// Map zoom control vertical padding. +/// The vertical padding of the Map zoom control. /// @group map $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-x !default; -/// Map attribution horizontal padding. +/// The horizontal padding of the Map attribution. /// @group map $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default; -/// Map attribution vertical padding. +/// The vertical padding of the Map attribution. /// @group map $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default; -/// Map attribution font size. +/// The font size of the Map attribution. /// @group map $kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default; -/// Map attribution background color. +/// The background color of the Map attribution. /// @group map $kendo-map-attribution-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default; -/// Map marker fill color. +/// The fill color of the Map marker. /// @group map $kendo-map-marker-fill: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default; diff --git a/packages/fluent/scss/mediaplayer/_variables.scss b/packages/fluent/scss/mediaplayer/_variables.scss index 77074020982..c5b586d765c 100644 --- a/packages/fluent/scss/mediaplayer/_variables.scss +++ b/packages/fluent/scss/mediaplayer/_variables.scss @@ -1,49 +1,49 @@ @use "sass:map"; @use "../core/" as *; -/// Border width of the mediaplayer. +/// The border width of the MediaPlayer. /// @group mediaplayer $kendo-media-player-border-width: 1px !default; -/// Font family of the mediaplayer. +/// The font family of the MediaPlayer. /// @group mediaplayer $kendo-media-player-font-family: var( --kendo-font-family, inherit ) !default; -/// Font size of the mediaplayer. +/// The font size of the MediaPlayer. /// @group mediaplayer $kendo-media-player-font-size: var( --kendo-font-size, inherit ) !default; -/// Line height of the mediaplayer. +/// The line height of the MediaPlayer. /// @group mediaplayer $kendo-media-player-line-height: var( --kendo-line-height, normal ) !default; -/// Background color of the mediaplayer. +/// The background color of the MediaPlayer. /// @group mediaplayer $kendo-media-player-bg: var( --kendo-component-bg, inherit ) !default; -/// Text color of the mediaplayer. +/// The text color of the MediaPlayer. /// @group mediaplayer $kendo-media-player-text: var( --kendo-component-text, inherit ) !default; -/// Border color of the mediaplayer. +/// The border color of the MediaPlayer. /// @group mediaplayer $kendo-media-player-border: var( --kendo-component-border, inherit ) !default; -/// Mediaplayer overlay background color. +/// The background color of the MediaPlayer overlay. /// @group mediaplayer $kendo-media-player-overlay-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default; -/// Mediaplayer quality button border color. +/// The border color of the MediaPlayer button. /// @group mediaplayer $kendo-media-player-quality-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default; -/// Media player title font size. +/// The font size of the MediaPlayer title. /// @group mediaplayer $kendo-media-player-title-font-size: var( --kendo-font-size-xl, inherit ) !default; -/// Mediaplayer titlebar horizontal padding. +/// The horizontal padding of the MediaPlayer title. /// @group mediaplayer $kendo-media-player-titlebar-padding-x: k-spacing(2) !default; -/// Mediaplayer titlebar vertical padding. +/// The vertical padding of the MediaPlayer title. /// @group mediaplayer $kendo-media-player-titlebar-padding-y: k-spacing(2) !default; -/// Mediaplayer titlebar background color. +/// The background color of the MediaPlayer title. /// @group mediaplayer $kendo-media-player-titlebar-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 40%, transparent), rgba( $kendo-color-black, .4 )) !default; -/// Mediaplayer titlebar text color. +/// The text color of the MediaPlayer title. /// @group mediaplayer $kendo-media-player-titlebar-text: $kendo-media-player-bg !default; diff --git a/packages/fluent/scss/pivotgrid/_variables.scss b/packages/fluent/scss/pivotgrid/_variables.scss index a515c08639c..b2bd39b8571 100644 --- a/packages/fluent/scss/pivotgrid/_variables.scss +++ b/packages/fluent/scss/pivotgrid/_variables.scss @@ -5,228 +5,228 @@ @use "../table/_variables.scss" as *; @use "../list/_variables.scss" as *; -/// Spacer of the PivotGrid. +/// The spacer of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-spacer: k-spacing(3) !default; -/// Horizontal padding of the PivotGrid. +/// The horizontal padding of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-padding-x: k-spacing(0) !default; -/// Vertical of the PivotGrid. +/// The vertical of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-padding-y: k-spacing(0) !default; -/// Font family of the PivotGrid. +/// The font family of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-font-family: var( --kendo-font-family, inherit ) !default; -/// Font size of the PivotGrid. +/// The font size of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-font-size: var( --kendo-font-size, inherit ) !default; -/// Line height of the PivotGrid. +/// The line height of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default; -/// Border width of the PivotGrid. +/// The border width of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-border-width: 1px !default; -/// Icon spacing of the PivotGrid. +/// The icon spacing of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-icon-spacing: k-spacing(1) !default; -/// Background color of the PivotGrid. +/// The background color of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-bg: var( --kendo-component-bg, initial ) !default; -/// Text color of the PivotGrid. +/// The text color of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-text: var( --kendo-component-text, initial ) !default; -/// Border color of the PivotGrid. +/// The border color of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-border: var( --kendo-component-border, initial ) !default; -/// Alt border color of the PivotGrid. +/// The alt border color of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-alt-border: $kendo-pivotgrid-border !default; -/// Default width of the PivotGrid row header. +/// The default width of the PivotGrid row header. /// @group pivotgrid $kendo-pivotgrid-row-header-width: 300px !default; -/// Default height of the PivotGrid column header. +/// The default height of the PivotGrid column header. /// @group pivotgrid $kendo-pivotgrid-column-header-height: 75px !default; -/// Horizontal padding of the PivotGrid cell. +/// The horizontal padding of the PivotGrid cell. /// @group pivotgrid $kendo-pivotgrid-cell-padding-x: $kendo-table-cell-padding-x !default; -/// Vertical padding of the PivotGrid cell. +/// The vertical padding of the PivotGrid cell. /// @group pivotgrid $kendo-pivotgrid-cell-padding-y: $kendo-table-cell-padding-y !default; -/// Border width of the PivotGrid cell. +/// The border width of the PivotGrid cell. /// @group pivotgrid $kendo-pivotgrid-cell-border-width: 1px !default; -/// Background color of the PivotGrid header. +/// The background color of the PivotGrid header. /// @group pivotgrid $kendo-pivotgrid-headers-bg: var( --kendo-component-bg, inherit ) !default; -/// Text color of the PivotGrid header. +/// The text color of the PivotGrid header. /// @group pivotgrid $kendo-pivotgrid-headers-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default; -/// Border color of the PivotGrid header. +/// The border color of the PivotGrid header. /// @group pivotgrid $kendo-pivotgrid-headers-border: var( --kendo-component-border, inherit ) !default; -/// Background color of the PivotGrid total cells. +/// The background color of the PivotGrid total cells. /// @group pivotgrid $kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) !default; -/// Text color of the PivotGrid total cells. +/// The text color of the PivotGrid total cells. /// @group pivotgrid $kendo-pivotgrid-total-text: var( --kendo-component-text, inherit ) !default; -/// Border color of the PivotGrid total cells. +/// The border color of the PivotGrid total cells. /// @group pivotgrid $kendo-pivotgrid-total-border: var( --kendo-component-border, inherit ) !default; -/// Hover background color of the PivotGrid. +/// The hover background color of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-hover-bg: var( --kendo-hover-bg, inherit ) !default; -/// Hover text color of the PivotGrid. +/// The hover text color of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-hover-text: inherit !default; -/// Hover border color of the PivotGrid. +/// The hover border color of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-hover-border: inherit !default; -/// Selected background color of the PivotGrid. +/// The selected background color of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-selected-bg: var( --kendo-selected-bg, inherit ) !default; -/// Selected text color of the PivotGrid. +/// The selected text color of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-selected-text: inherit !default; -/// Selected border color of the PivotGrid. +/// The selected border color of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-selected-border: inherit !default; -/// Focus shadow of the PivotGrid. +/// The focus shadow of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-focus-shadow: $kendo-list-item-focus-shadow !default; -/// Horizontal padding of the PivotGrid configurator. +/// The horizontal padding of the PivotGrid configurator. /// @group pivotgrid $kendo-pivotgrid-configurator-padding-x: k-spacing(0) !default; -/// Vertical padding of the PivotGrid configurator. +/// The vertical padding of the PivotGrid configurator. /// @group pivotgrid $kendo-pivotgrid-configurator-padding-y: k-spacing(0) !default; -/// Border width of the PivotGrid configurator. +/// The border width of the PivotGrid configurator. /// @group pivotgrid $kendo-pivotgrid-configurator-border-width: 1px !default; -/// Horizontal padding of the PivotGrid configurator header. +/// The horizontal padding of the PivotGrid configurator header. /// @group pivotgrid $kendo-pivotgrid-configurator-header-padding-x: $kendo-pivotgrid-spacer !default; -/// Vertical padding of the PivotGrid configurator header. +/// The vertical padding of the PivotGrid configurator header. /// @group pivotgrid $kendo-pivotgrid-configurator-header-padding-y: $kendo-pivotgrid-configurator-header-padding-x !default; -/// Font size of the PivotGrid configurator header. +/// The font size of the PivotGrid configurator header. /// @group pivotgrid $kendo-pivotgrid-configurator-header-font-size: calc( var( --kendo-font-size-xl, 2rem ) * .9 ) !default; -/// Font weight of the PivotGrid configurator header. +/// The font weight of the PivotGrid configurator header. /// @group pivotgrid $kendo-pivotgrid-configurator-header-font-weight: var( --kendo-font-weight-bold, bold ) !default; -/// Horizontal padding of the PivotGrid configurator content. +/// The horizontal padding of the PivotGrid configurator content. /// @group pivotgrid $kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-spacer !default; -/// Vertical padding of the PivotGrid configurator content. +/// The vertical padding of the PivotGrid configurator content. /// @group pivotgrid $kendo-pivotgrid-configurator-content-padding-y: k-spacing(0) !default; -/// Horizontal margin of the PivotGrid configurator fields. +/// The horizontal margin of the PivotGrid configurator fields. /// @group pivotgrid $kendo-pivotgrid-configurator-fields-margin-x: k-spacing(0) !default; -/// Vertical margin of the PivotGrid configurator fields. +/// The vertical margin of the PivotGrid configurator fields. /// @group pivotgrid $kendo-pivotgrid-configurator-fields-margin-y: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default; -/// Spacing of the PivotGrid configurator fields. +/// The spacing of the PivotGrid configurator fields. /// @group pivotgrid $kendo-pivotgrid-configurator-fields-gap: k-spacing(2) !default; -/// Default width of the PivotGrid vertical configurator. +/// The default width of the PivotGrid vertical configurator. /// @group pivotgrid $kendo-pivotgrid-configurator-vertical-width: 320px !default; -/// Default height of the PivotGrid horizontal configurator. +/// The default height of the PivotGrid horizontal configurator. /// @group pivotgrid $kendo-pivotgrid-configurator-horizontal-height: 420px !default; -/// Background color of the PivotGrid configurator. +/// The background color of the PivotGrid configurator. /// @group pivotgrid $kendo-pivotgrid-configurator-bg: var( --kendo-component-bg, inherit ) !default; -/// Text color of the PivotGrid configurator. +/// The text color of the PivotGrid configurator. /// @group pivotgrid $kendo-pivotgrid-configurator-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default; -/// Border color of the PivotGrid configurator. +/// The border color of the PivotGrid configurator. /// @group pivotgrid $kendo-pivotgrid-configurator-border: var( --kendo-component-border, inherit )!default; -/// Background color of the PivotGrid configurator header. +/// The background color of the PivotGrid configurator header. /// @group pivotgrid $kendo-pivotgrid-configurator-header-bg: var( --kendo-component-bg, inherit ) !default; -/// Text color of the PivotGrid configurator header. +/// The text color of the PivotGrid configurator header. /// @group pivotgrid $kendo-pivotgrid-configurator-header-text: var( --kendo-component-text, inherit ) !default; -/// Border color of the PivotGrid configurator header. +/// The border color of the PivotGrid configurator header. /// @group pivotgrid $kendo-pivotgrid-configurator-header-border: inherit !default; -/// Horizontal padding of the PivotGrid configurator button. +/// The horizontal padding of the PivotGrid configurator button. /// @group pivotgrid $kendo-pivotgrid-configurator-button-padding-x: k-spacing(1) !default; -/// Vertical padding of the PivotGrid configurator button. +/// The vertical padding of the PivotGrid configurator button. /// @group pivotgrid $kendo-pivotgrid-configurator-button-padding-y: k-spacing(1) !default; -/// Border width of the PivotGrid configurator button. +/// The border width of the PivotGrid configurator button. /// @group pivotgrid $kendo-pivotgrid-configurator-button-border-width: 1px !default; -/// Size of the PivotGrid configurator button. +/// The size of the PivotGrid configurator button. /// @group pivotgrid $kendo-pivotgrid-configurator-button-size: calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) ) !default; -/// Icon spacing of the PivotGrid configurator button. +/// The icon spacing of the PivotGrid configurator button. /// @group pivotgrid $kendo-pivotgrid-configurator-button-icon-spacing: k-spacing(2) !default; -/// Horizontal padding of the PivotGrid calculated field. +/// The horizontal padding of the PivotGrid calculated field. /// @group pivotgrid $kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-spacer !default; -/// Vertical padding of the PivotGrid calculated field. +/// The vertical padding of the PivotGrid calculated field. /// @group pivotgrid $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default; -/// Border width of the PivotGrid calculated field. +/// The border width of the PivotGrid calculated field. /// @group pivotgrid $kendo-pivotgrid-calculated-field-border-width: 1px !default; -/// Border radius of the PivotGrid calculated field. +/// The border radius of the PivotGrid calculated field. /// @group pivotgrid $kendo-pivotgrid-calculated-field-border-radius: k-border-radius(md) !default; -/// Spacing of the PivotGrid calculated field. +/// The spacing of the PivotGrid calculated field. /// @group pivotgrid $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default; -/// Background color of the PivotGrid calculated field. +/// The background color of the PivotGrid calculated field. /// @group pivotgrid $kendo-pivotgrid-calculated-field-bg: var( --kendo-component-bg, inherit ) !default; -/// Text color of the PivotGrid calculated field. +/// The text color of the PivotGrid calculated field. /// @group pivotgrid $kendo-pivotgrid-calculated-field-text: var( --kendo-component-text, inherit ) !default; -/// Border color of the PivotGrid calculated field. +/// The border color of the PivotGrid calculated field. /// @group pivotgrid $kendo-pivotgrid-calculated-field-border: var( --kendo-component-border, inherit ) !default; -/// Background color of the PivotGrid calculated field header. +/// The background color of the PivotGrid calculated field header. /// @group pivotgrid $kendo-pivotgrid-calculated-field-header-bg: inherit !default; -/// Text color of the PivotGrid calculated field header. +/// The text color of the PivotGrid calculated field header. /// @group pivotgrid $kendo-pivotgrid-calculated-field-header-text: var( --kendo-component-text, inherit ) !default; -/// Border color of the PivotGrid calculated field header. +/// The border color of the PivotGrid calculated field header. /// @group pivotgrid $kendo-pivotgrid-calculated-field-header-border: inherit !default; -/// Horizontal padding of the PivotGrid treeview. +/// The horizontal padding of the PivotGrid treeview. /// @group pivotgrid $kendo-pivotgrid-treeview-padding-x: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default; -/// Vertical padding of the PivotGrid treeview. +/// The vertical padding of the PivotGrid treeview. /// @group pivotgrid $kendo-pivotgrid-treeview-padding-y: k-spacing(0) !default; diff --git a/packages/fluent/scss/prompt/_variables.scss b/packages/fluent/scss/prompt/_variables.scss index 3cb8f9ece2a..d9be9287eac 100644 --- a/packages/fluent/scss/prompt/_variables.scss +++ b/packages/fluent/scss/prompt/_variables.scss @@ -1,67 +1,67 @@ @use "sass:map"; @use "../core/" as *; -/// The text color of the Prompt. +/// The text color of the AIPrompt. /// @group prompt $kendo-prompt-text: var( --kendo-component-text, initial ) !default; -/// The background color of the Prompt. +/// The background color of the AIPrompt. /// @group prompt $kendo-prompt-bg: var( --kendo-component-bg, initial ) !default; -/// The border color of the Prompt. +/// The border color of the AIPrompt. /// @group prompt $kendo-prompt-border: var( --kendo-component-border, initial ) !default; -/// The text color of the Prompt header. +/// The text color of the AIPrompt header. /// @group prompt $kendo-prompt-header-text: var( --kendo-component-text, initial ) !default; -/// The background color of the Prompt header. +/// The background color of the AIPrompt header. /// @group prompt $kendo-prompt-header-bg: var( --kendo-component-bg, initial ) !default; -/// The border color of the Prompt header. +/// The border color of the AIPrompt header. /// @group prompt $kendo-prompt-header-border: var( --kendo-component-border, initial ) !default; -/// The vertical padding of the Prompt content. +/// The vertical padding of the AIPrompt content. /// @group prompt $kendo-prompt-content-padding-y: k-spacing(4) !default; -/// The horizontal padding of the Prompt content. +/// The horizontal padding of the AIPrompt content. /// @group prompt $kendo-prompt-content-padding-x: k-spacing(4) !default; -/// The spacing between the items of the Prompt content. +/// The spacing between the items of the AIPrompt content. /// @group prompt $kendo-prompt-content-spacing: k-spacing(4) !default; -/// The text color of the Prompt content. +/// The text color of the AIPrompt content. /// @group prompt $kendo-prompt-content-text: k-get-theme-color-var( neutral-190 ) !default; -/// The background color of the Prompt content. +/// The background color of the AIPrompt content. /// @group prompt $kendo-prompt-content-bg: k-get-theme-color-var( neutral-10 ) !default; -/// The text border of the Prompt content. +/// The text border of the AIPrompt content. /// @group prompt $kendo-prompt-content-border: var( --kendo-component-border, initial ) !default; -/// The spacing between the items of the Prompt content expander. +/// The spacing between the items of the AIPrompt content expander. /// @group prompt $kendo-prompt-expander-spacing: k-spacing(2) !default; -/// The vertical padding of the Prompt suggestion container. +/// The vertical padding of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-padding-y: k-spacing(2) !default; -/// The horizontal padding of the Prompt suggestion container. +/// The horizontal padding of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-padding-x: k-spacing(2) !default; -/// The border radius of the Prompt suggestion container. +/// The border radius of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-border-radius: k-border-radius(md) !default; -/// The text color of the Prompt suggestion container. +/// The text color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-text: var( --kendo-component-text, initial ) !default; -/// The background color of the Prompt suggestion container. +/// The background color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-bg: var( --kendo-component-bg, initial ) !default; -/// The border color of the Prompt suggestion container. +/// The border color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-border: var( --kendo-component-border, initial ) !default; -/// The elevation of the Prompt suggestion container. +/// The elevation of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-shadow: k-elevation(1) !default; diff --git a/packages/html/CHANGELOG.md b/packages/html/CHANGELOG.md index fd5a5da9e8d..5bfd70f70a2 100644 --- a/packages/html/CHANGELOG.md +++ b/packages/html/CHANGELOG.md @@ -3,6 +3,34 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [8.2.0-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.1-dev.0...v8.2.0-dev.0) (2024-07-15) + + +### Features + +* **html:** add chart wizard component spec and tests ([d05210d](https://github.com/telerik/kendo-themes/commit/d05210d29e383aa4d89318df50a0e4b8ab43c7fb)) +* **html:** create chat quick reply component spec ([870d4d4](https://github.com/telerik/kendo-themes/commit/870d4d42df4cd1cb580d3462f9dab3cd653a3c8b)) + + + + + +## [8.1.1-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.0...v8.1.1-dev.0) (2024-07-08) + +**Note:** Version bump only for package @progress/kendo-themes-html + + + + + +# [8.1.0](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.2...v8.1.0) (2024-07-03) + +**Note:** Version bump only for package @progress/kendo-themes-html + + + + + # [8.1.0-dev.2](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.1...v8.1.0-dev.2) (2024-07-01) **Note:** Version bump only for package @progress/kendo-themes-html diff --git a/packages/html/package.json b/packages/html/package.json index a8e21024555..5a9652d089d 100644 --- a/packages/html/package.json +++ b/packages/html/package.json @@ -1,7 +1,7 @@ { "name": "@progress/kendo-themes-html", "description": "A collection of HTML helpers used for developing Kendo UI themes", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "author": "Progress", "license": "Apache-2.0", "keywords": [ diff --git a/packages/html/src/action-sheet/actionsheet-item.tsx b/packages/html/src/action-sheet/actionsheet-item.tsx index e000cf377ff..75138bfa96d 100644 --- a/packages/html/src/action-sheet/actionsheet-item.tsx +++ b/packages/html/src/action-sheet/actionsheet-item.tsx @@ -63,3 +63,8 @@ export const ActionSheetItem = ( ); }; + +ActionSheetItem.states = states; +ActionSheetItem.className = ACTIONSHEETITEM_CLASSNAME; + +export default ActionSheetItem; diff --git a/packages/html/src/calendar/calendar-cell.tsx b/packages/html/src/calendar/calendar-cell.tsx index 1df09d7e353..ec7bb6e4dac 100644 --- a/packages/html/src/calendar/calendar-cell.tsx +++ b/packages/html/src/calendar/calendar-cell.tsx @@ -103,3 +103,7 @@ export const CalendarCell = ( ); }; + +CalendarCell.states = states; + +export default CalendarCell; diff --git a/packages/html/src/calendar/calendar-footer.tsx b/packages/html/src/calendar/calendar-footer.tsx index 3d3be3cd357..6c0495350f0 100644 --- a/packages/html/src/calendar/calendar-footer.tsx +++ b/packages/html/src/calendar/calendar-footer.tsx @@ -1,7 +1,7 @@ import { Size, classNames } from '../misc'; import { Button } from '../button'; -const className = `k-calendar-footer`; +const CALENDARFOOTER_CLASSNAME = `k-calendar-footer`; const options = { size: [ Size.small, Size.medium, Size.large ], @@ -28,8 +28,14 @@ export const CalendarFooter = ( } = props; return ( -
+
); }; + +CalendarFooter.options = options; +CalendarFooter.className = CALENDARFOOTER_CLASSNAME; +CalendarFooter.defaultProps = defaultProps; + +export default CalendarFooter; diff --git a/packages/html/src/calendar/calendar-header.tsx b/packages/html/src/calendar/calendar-header.tsx index e039c48843c..25cb6df6a2d 100644 --- a/packages/html/src/calendar/calendar-header.tsx +++ b/packages/html/src/calendar/calendar-header.tsx @@ -1,7 +1,7 @@ import { Button } from '../button'; import { classNames, Size } from '../misc'; -const className = `k-calendar-header`; +const CALENDARHEADER_CLASSNAME = `k-calendar-header`; const options = { size: [ Size.small, Size.medium, Size.large ], @@ -48,7 +48,7 @@ export const CalendarHeader = ( {...other} className={classNames( props.className, - className, + CALENDARHEADER_CLASSNAME, { 'k-vstack': orientation === 'vertical', } @@ -64,4 +64,9 @@ export const CalendarHeader = ( ); }; + +CalendarHeader.options = options; +CalendarHeader.className = CALENDARHEADER_CLASSNAME; +CalendarHeader.defaultProps = defaultProps; + export default CalendarHeader; diff --git a/packages/html/src/calendar/calendar-infinite.spec.tsx b/packages/html/src/calendar/calendar-infinite.spec.tsx index e35011d8b55..c77046719bd 100644 --- a/packages/html/src/calendar/calendar-infinite.spec.tsx +++ b/packages/html/src/calendar/calendar-infinite.spec.tsx @@ -2,7 +2,7 @@ import { classNames, optionClassNames, Size } from '../misc'; import { CalendarNavigation } from '.'; import { CalendarInfiniteView, KendoCalendarInfiniteViewProps } from './calendar-infinite-view.spec'; -const CALENDAR_INFINITE_CLASSNAME = 'k-calendar-infinite'; +const CALENDARINFINITE_CLASSNAME = 'k-calendar-infinite'; const options = { size: [ Size.small, Size.medium, Size.large ], @@ -74,7 +74,7 @@ export const CalendarInfinite = ( className={classNames( props.className, 'k-calendar', - CALENDAR_INFINITE_CLASSNAME, + CALENDARINFINITE_CLASSNAME, optionClassNames('k-calendar', { size }) )}> {showNavigation && @@ -96,3 +96,9 @@ export const CalendarInfinite = (
); }; + +CalendarInfinite.options = options; +CalendarInfinite.className = CALENDARINFINITE_CLASSNAME; +CalendarInfinite.defaultProps = defaultProps; + +export default CalendarInfinite; diff --git a/packages/html/src/card/card-title.tsx b/packages/html/src/card/card-title.tsx index d897e2c4f19..fae8b47be24 100644 --- a/packages/html/src/card/card-title.tsx +++ b/packages/html/src/card/card-title.tsx @@ -33,4 +33,10 @@ export const CardTitle = ( {props.children} ); -}; \ No newline at end of file +}; + + +CardTitle.states = states; +CardTitle.className = CARDTITLE_CLASSNAME; + +export default CardTitle; diff --git a/packages/html/src/chart-wizard/chart-wizard-chart-types-wrapper.tsx b/packages/html/src/chart-wizard/chart-wizard-chart-types-wrapper.tsx new file mode 100644 index 00000000000..e7481f98fc8 --- /dev/null +++ b/packages/html/src/chart-wizard/chart-wizard-chart-types-wrapper.tsx @@ -0,0 +1,27 @@ +import { classNames } from '../misc'; + +const CHARTWIZARDCHARTTYPEWRPPER_CLASSNAME = `k-chart-types-wrapper`; + +const options = {}; + +const defaultProps = {}; + +export const ChartWizardChartTypesWrapper = ( + props: React.HTMLAttributes +) => ( +
+ {props.children} +
+); + +ChartWizardChartTypesWrapper.options = options; +ChartWizardChartTypesWrapper.className = CHARTWIZARDCHARTTYPEWRPPER_CLASSNAME; +ChartWizardChartTypesWrapper.defaultProps = defaultProps; + +export default ChartWizardChartTypesWrapper; diff --git a/packages/html/src/chart-wizard/chart-wizard-icon-text-wrapper.tsx b/packages/html/src/chart-wizard/chart-wizard-icon-text-wrapper.tsx new file mode 100644 index 00000000000..ec40c80208a --- /dev/null +++ b/packages/html/src/chart-wizard/chart-wizard-icon-text-wrapper.tsx @@ -0,0 +1,60 @@ +import { classNames, stateClassNames, States } from '../misc'; +import { Icon } from '../icon'; + +export const CHARTWIZARDICONTEXTWRAPPER_CLASSNAME = `k-icon-text-wrapper`; + +const states = [ + States.focus, + States.selected +]; + +const options = {}; + +export type ChartWizardIconTextWrapperProps = { + icon: string, + text: string +}; + +export type ChartWizardIconTextWrapperState = { [K in (typeof states)[number]]?: boolean }; + +const defaultProps = {}; + +export const ChartWizardIconTextWrapper = ( + props: ChartWizardIconTextWrapperProps & + ChartWizardIconTextWrapperState & + React.HTMLAttributes +) => { + const { + focus, + selected, + icon, + text, + ...other + } = props; + + return ( +
+
+ +
+ {text} +
+ ); +}; + +ChartWizardIconTextWrapper.states = states; +ChartWizardIconTextWrapper.options = options; +ChartWizardIconTextWrapper.className = CHARTWIZARDICONTEXTWRAPPER_CLASSNAME; +ChartWizardIconTextWrapper.defaultProps = defaultProps; + +export default ChartWizardIconTextWrapper; diff --git a/packages/html/src/chart-wizard/chart-wizard-preview-panel-content.tsx b/packages/html/src/chart-wizard/chart-wizard-preview-panel-content.tsx new file mode 100644 index 00000000000..f7c2326f9de --- /dev/null +++ b/packages/html/src/chart-wizard/chart-wizard-preview-panel-content.tsx @@ -0,0 +1,41 @@ +import { MenuButton } from '../menu-button'; + +const states = []; + +const options = {}; + +export type ChartWizardPreviewPanelContentProps = { + buttonText?: string; +}; + +const defaultProps = { + buttonText: "Export" +}; + +export const ChartWizardPreviewPanelContent = ( + props: ChartWizardPreviewPanelContentProps & + React.HTMLAttributes +) => { + const { + buttonText = defaultProps.buttonText, + children + } = props; + + + return ( + <> +
+ {buttonText} +
+
+ {children} +
+ + ); +}; + +ChartWizardPreviewPanelContent.states = states; +ChartWizardPreviewPanelContent.options = options; +ChartWizardPreviewPanelContent.defaultProps = defaultProps; + +export default ChartWizardPreviewPanelContent; diff --git a/packages/html/src/chart-wizard/chart-wizard-splitter.tsx b/packages/html/src/chart-wizard/chart-wizard-splitter.tsx new file mode 100644 index 00000000000..1802d0e1c23 --- /dev/null +++ b/packages/html/src/chart-wizard/chart-wizard-splitter.tsx @@ -0,0 +1,39 @@ +import { classNames } from '../misc'; +import { Splitter, KendoSplitterProps } from '../splitter'; + +export const CHARTWIZARDSPLITTER_CLASSNAME = `k-chart-wizard-splitter`; + +const states = []; + +const options = {}; + +const defaultProps = {}; + +export const ChartWizardSplitter = ( + props: KendoSplitterProps & + React.HTMLAttributes +) => { + const { + children, + ...other + } = props; + + return ( + + {children} + + ); +}; + +ChartWizardSplitter.states = states; +ChartWizardSplitter.options = options; +ChartWizardSplitter.className = CHARTWIZARDSPLITTER_CLASSNAME; +ChartWizardSplitter.defaultProps = defaultProps; + +export default ChartWizardSplitter; diff --git a/packages/html/src/chart-wizard/chart-wizard.spec.tsx b/packages/html/src/chart-wizard/chart-wizard.spec.tsx new file mode 100644 index 00000000000..5a74eb778fc --- /dev/null +++ b/packages/html/src/chart-wizard/chart-wizard.spec.tsx @@ -0,0 +1,39 @@ +import { classNames } from '../misc'; +import { Window, KendoWindowProps } from '../window'; + + +export const CHARTWIZARD_CLASSNAME = `k-chart-wizard`; + +const states = []; + +const options = {}; + +const defaultProps = {}; + +export const ChartWizard = ( + props: KendoWindowProps & + React.HTMLAttributes +) => { + const { + children, + ...other + } = props; + + return ( + + {children} + + ); +}; + +ChartWizard.states = states; +ChartWizard.options = options; +ChartWizard.className = CHARTWIZARD_CLASSNAME; +ChartWizard.defaultProps = defaultProps; + +export default ChartWizard; diff --git a/packages/html/src/chart-wizard/index.ts b/packages/html/src/chart-wizard/index.ts new file mode 100644 index 00000000000..eeca2ceb332 --- /dev/null +++ b/packages/html/src/chart-wizard/index.ts @@ -0,0 +1,6 @@ +export * from './chart-wizard.spec'; +export * from './chart-wizard-preview-panel-content'; +export * from './chart-wizard-splitter'; +export * from './chart-wizard-chart-types-wrapper'; +export * from './chart-wizard-icon-text-wrapper'; +export * from './templates/chart-wizard-normal'; diff --git a/packages/html/src/chart-wizard/templates/chart-wizard-normal.tsx b/packages/html/src/chart-wizard/templates/chart-wizard-normal.tsx new file mode 100644 index 00000000000..ff00c353340 --- /dev/null +++ b/packages/html/src/chart-wizard/templates/chart-wizard-normal.tsx @@ -0,0 +1,186 @@ +import { ChartWizard, ChartWizardSplitter, ChartWizardPreviewPanelContent, ChartWizardChartTypesWrapper, ChartWizardIconTextWrapper } from ".."; +import { ExpansionPanel } from '../../expansion-panel'; +import { TabStrip, TabStripItem, TabStripContent } from '../../tabstrip'; +import { SplitterPane } from '../../splitter'; + + +export const ChartWizardNormal = (props) => ( + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2002 + 2003 + 2004 + 2005 + 2006 + 2007 + 2008 + 2009 + 2010 + 2011 + -8% + -6% + -4% + -2% + 0% + 2% + 4% + 6% + 8% + 10% + 12% + Gross domestic product growth + /GDP annual %/ + + + + India + + + + + + + World + + + + + + + Haiti + + + + + + +
+ + + + + + + + + } + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } + {...props} + /> +); diff --git a/packages/html/src/chart-wizard/tests/chart-wizard-icon-area-states.tsx b/packages/html/src/chart-wizard/tests/chart-wizard-icon-area-states.tsx new file mode 100644 index 00000000000..08517526771 --- /dev/null +++ b/packages/html/src/chart-wizard/tests/chart-wizard-icon-area-states.tsx @@ -0,0 +1,33 @@ +import { ExpansionPanel } from '../../expansion-panel'; +import { ChartWizardChartTypesWrapper, ChartWizardIconTextWrapper } from ".."; + +const styles = ` + #test-area { + max-width: 1040px; + } + + .k-window { + position: relative; + } + + .k-chart-wizard .k-expander { + max-width: 576px; + } +`; + +export default () => ( + <> + +
+
+ + + + + + + +
+
+ +); diff --git a/packages/html/src/chart-wizard/tests/chart-wizard-tabs-content.tsx b/packages/html/src/chart-wizard/tests/chart-wizard-tabs-content.tsx new file mode 100644 index 00000000000..11b19b5faa0 --- /dev/null +++ b/packages/html/src/chart-wizard/tests/chart-wizard-tabs-content.tsx @@ -0,0 +1,74 @@ +import { TabStrip, TabStripItem, TabStripContent } from '../../tabstrip'; +import { ExpansionPanel } from '../../expansion-panel'; + + +const styles = ` + #test-area { + max-width: 1040px; + } +`; + +export default () => ( + <> + +
+
Chart Tab
+
Data Tab
+
Format Tab
+
+ + + + + + } + > + + + + + + + + +
+
+ + + + + + } + > + + + + +
+
+ + + + + + } + > + + + + + + + + + +
+
+ +); diff --git a/packages/html/src/chart-wizard/tests/chart-wizard.tsx b/packages/html/src/chart-wizard/tests/chart-wizard.tsx new file mode 100644 index 00000000000..47b9b70aa5e --- /dev/null +++ b/packages/html/src/chart-wizard/tests/chart-wizard.tsx @@ -0,0 +1,31 @@ +import { ChartWizardNormal } from ".."; + +const styles = ` + #test-area { + max-width: 1040px; + } + + .k-window { + position: relative; + } + + .k-chart-wizard { + width: 700px; + height: 550px; + } + + .k-chart-wizard-property-pane .k-expander { + max-width: 576px; + } +`; + +export default () => ( + <> + +
+
+ +
+
+ +); diff --git a/packages/html/src/chart-wizard/tests/tab-chart-sections-expanded.tsx b/packages/html/src/chart-wizard/tests/tab-chart-sections-expanded.tsx new file mode 100644 index 00000000000..32b2d85f6d6 --- /dev/null +++ b/packages/html/src/chart-wizard/tests/tab-chart-sections-expanded.tsx @@ -0,0 +1,73 @@ +import { ExpansionPanel } from '../../expansion-panel'; +import { ChartWizardChartTypesWrapper, ChartWizardIconTextWrapper } from ".."; + +const styles = ` + #test-area { + max-width: 1040px; + } +`; + +export default () => ( + <> + +
+
+ Bar chart section expanded +
+ + + + + + + +
+
+
+ Pie chart section expanded +
+ + + + + +
+
+
+ Column chart section expanded +
+ + + + + + + +
+
+ +
+ Line chart section expanded +
+ + + + + + + +
+
+
+ Scatter chart section expanded +
+ + + + + +
+
+
+ +); diff --git a/packages/html/src/chart-wizard/tests/tab-data-sections-expanded.tsx b/packages/html/src/chart-wizard/tests/tab-data-sections-expanded.tsx new file mode 100644 index 00000000000..96cfc40d3c1 --- /dev/null +++ b/packages/html/src/chart-wizard/tests/tab-data-sections-expanded.tsx @@ -0,0 +1,96 @@ +import { ExpansionPanel } from '../../expansion-panel'; +import { Form, Fieldset } from '../../form'; +import { DropdownList } from '../../dropdownlist'; +import { Icon } from '../../icon'; +import { Grid, GridToolbar, GridContainer, GridContent, GridTable } from '../../grid'; +import { TableTbody, TableRow, TableTd } from '../../table'; +import { Button } from '../../button'; + + +const styles = ` + #test-area { + max-width: 1040px; + } +`; + +export default () => ( + <> + +
+
+ Configuration section expanded + +
+
+ +
+ +
+ + + + )}> + + + + + + + + + + + + Series Name + + + + + + + Series Name + + + + + + + Series Name + + + + + + + Series Name + + + + + + + Series Name + + + + + + + + + +
+ +
+ +
+
+ +
+
+ +); diff --git a/packages/html/src/chart-wizard/tests/tab-format-sections-expanded.tsx b/packages/html/src/chart-wizard/tests/tab-format-sections-expanded.tsx new file mode 100644 index 00000000000..3adbf97bfaa --- /dev/null +++ b/packages/html/src/chart-wizard/tests/tab-format-sections-expanded.tsx @@ -0,0 +1,242 @@ +import { ExpansionPanel } from '../../expansion-panel'; +import { Form, Fieldset, FormField } from '../../form'; +import { DropdownList } from '../../dropdownlist'; +import { Textbox } from '../../textbox'; +import { NumericTextbox } from '../../numerictextbox'; +import { ColorPicker } from '../../colorpicker'; +import { Combobox } from '../../combobox'; +import { Checkbox } from '../../checkbox'; +import { Switch } from '../../switch'; + + +const styles = ` + #test-area { + max-width: 1040px; + } +`; + +export default () => ( + <> + +
+ +
+ ChartArea section expanded + +
+
+ } + /> + } + /> + } + /> + } + /> +
+ +
+ } + /> +
+
+ +
+ +
+ Title section expanded + +
+ } + > + + } + > + } + > + } + > + } + > +
+ +
+ +
+ CategoryAxis section expanded + +
+
+ } + /> + } + /> + } + > + } + > +
+ +
+ } + /> + } + > + } + > + } + > + + + + + + } + > + +
+
+ +
+ +
+ ValueAxis section expanded + +
+
+ } + /> + } + /> + } + > + } + > +
+ +
+ } + /> + } + /> + } + > + } + > + } + > +
+
+ +
+ +
+ Legend section expanded + +
+ + + + } + > + } + > + } + > + } + > + + +
+
+ +
+ Series section expanded + +
+ } + > + + } + > + + + + + } + > + +
+ +
+
+ +); diff --git a/packages/html/src/chat/chat-quick-replies.tsx b/packages/html/src/chat/chat-quick-replies.tsx index 05ab9aaa352..0a0e734f7d0 100644 --- a/packages/html/src/chat/chat-quick-replies.tsx +++ b/packages/html/src/chat/chat-quick-replies.tsx @@ -1,54 +1,33 @@ import { classNames } from '../misc'; -const CHATQUICKREPLY_CLASSNAME = 'k-quick-replies'; +const CHATQUICKREPLIES_CLASSNAME = 'k-quick-replies'; const states = []; const options = {}; -const defaultOptions = { - actions: [ 'Quick', 'Reply', 'Another quick', 'Reply with different length' ] -}; - - -export type KendoChatQuickRepliesOptions = { - actions?: Array; -}; +const defaultOptions = {}; -export const ChatQuickReply = ( - props: KendoChatQuickRepliesOptions & - React.HTMLAttributes +export const ChatQuickReplies = ( + props: React.HTMLAttributes ) => { - const { - actions = defaultOptions.actions, - ...other - } = props; - - const children: JSX.Element[] = []; - - if (actions) { - actions.map((action, index) => { - children.push( - {action} - ); - }); - } + const { ...other } = props; return (
- {children} + {props.children}
); }; -ChatQuickReply.states = states; -ChatQuickReply.options = options; -ChatQuickReply.className = CHATQUICKREPLY_CLASSNAME; -ChatQuickReply.defaultOptions = defaultOptions; +ChatQuickReplies.states = states; +ChatQuickReplies.options = options; +ChatQuickReplies.className = CHATQUICKREPLIES_CLASSNAME; +ChatQuickReplies.defaultOptions = defaultOptions; -export default ChatQuickReply; +export default ChatQuickReplies; diff --git a/packages/html/src/chat/chat-quick-reply.tsx b/packages/html/src/chat/chat-quick-reply.tsx new file mode 100644 index 00000000000..39ef4a993cd --- /dev/null +++ b/packages/html/src/chat/chat-quick-reply.tsx @@ -0,0 +1,50 @@ +import { classNames, stateClassNames, States } from '../misc'; + +const CHATQUICKREPLY_CLASSNAME = 'k-quick-reply'; + +const states = [ + States.focus, + States.hover +]; + +const options = {}; + +const defaultProps = {}; + +export type KendoChatQuickReplyProps = { + text?: string; +}; + +export type KendoChatQuickReplyState = { [K in (typeof states)[number]]?: boolean }; + +export const ChatQuickReply = ( + props: KendoChatQuickReplyProps & + KendoChatQuickReplyState & + React.HTMLAttributes +) => { + const { + focus, + hover, + text + } = props; + + return ( + + {text} + + ); +}; + +ChatQuickReply.states = states; +ChatQuickReply.options = options; +ChatQuickReply.className = CHATQUICKREPLY_CLASSNAME; +ChatQuickReply.defaultProps = defaultProps; + +export default ChatQuickReply; diff --git a/packages/html/src/chat/index.ts b/packages/html/src/chat/index.ts index e9646ef198e..681b8cb288d 100644 --- a/packages/html/src/chat/index.ts +++ b/packages/html/src/chat/index.ts @@ -2,6 +2,7 @@ export * from './chat.spec'; export * from './chat-message'; export * from './chat-message-group'; export * from './chat-quick-replies'; +export * from './chat-quick-reply'; export * from './templates/chat-normal'; export * from './templates/chat-with-toolbar'; export * from './templates/chat-with-options'; diff --git a/packages/html/src/chat/tests/chat-content-rtl.tsx b/packages/html/src/chat/tests/chat-content-rtl.tsx index 5f02ca71a48..df0da40cd9e 100644 --- a/packages/html/src/chat/tests/chat-content-rtl.tsx +++ b/packages/html/src/chat/tests/chat-content-rtl.tsx @@ -1,6 +1,6 @@ import { Button } from '../../button'; import { Card, CardDeck, CardBody } from '../../card'; -import { ChatMessage, ChatMessageGroup, ChatNormal, ChatQuickReply } from '..'; +import { ChatMessage, ChatMessageGroup, ChatNormal, ChatQuickReplies, ChatQuickReply } from '..'; const styles = ` @@ -50,7 +50,13 @@ export default () =>( - + + + + + + +
Card Deck Normal
diff --git a/packages/html/src/chat/tests/chat-content.tsx b/packages/html/src/chat/tests/chat-content.tsx index 2d1e56d6dba..e08d8ba49e8 100644 --- a/packages/html/src/chat/tests/chat-content.tsx +++ b/packages/html/src/chat/tests/chat-content.tsx @@ -1,6 +1,6 @@ import { Button } from '../../button'; import { Card, CardDeck, CardBody } from '../../card'; -import { ChatMessage, ChatMessageGroup, ChatNormal, ChatQuickReply } from '..'; +import { ChatMessage, ChatMessageGroup, ChatNormal, ChatQuickReplies, ChatQuickReply } from '..'; const styles = ` @@ -50,7 +50,13 @@ export default () =>( - + + + + + + +
Card Deck Normal
diff --git a/packages/html/src/editor/editor-content.tsx b/packages/html/src/editor/editor-content.tsx index a27ab026740..405a97ea7a2 100644 --- a/packages/html/src/editor/editor-content.tsx +++ b/packages/html/src/editor/editor-content.tsx @@ -31,3 +31,8 @@ export const EditorContent = ( ); }; + +EditorContent.states = states; +EditorContent.className = EDITORCONTENT_CLASSNAME; + +export default EditorContent; diff --git a/packages/html/src/form/form-field.tsx b/packages/html/src/form/form-field.tsx index fbb05fc122a..267f0f01b1a 100644 --- a/packages/html/src/form/form-field.tsx +++ b/packages/html/src/form/form-field.tsx @@ -70,6 +70,7 @@ export const FormField = ( ); }; +FormField.states = states; FormField.className = FORMFIELD_CLASSNAME; export default FormField; diff --git a/packages/html/src/form/form.spec.tsx b/packages/html/src/form/form.spec.tsx index d76c19bb97c..e8befe8f18a 100644 --- a/packages/html/src/form/form.spec.tsx +++ b/packages/html/src/form/form.spec.tsx @@ -64,8 +64,8 @@ export const Form = ( } ); } else if ( children.type === FormField ) { formChildren.push( ); - } else { - children.type === Fieldset && formChildren.push(
); + } else if (children.type === Fieldset) { + formChildren.push(
); } } diff --git a/packages/html/src/grid/grid-header-cell.spec.tsx b/packages/html/src/grid/grid-header-cell.spec.tsx index 6c60434b8c0..96e28697e17 100644 --- a/packages/html/src/grid/grid-header-cell.spec.tsx +++ b/packages/html/src/grid/grid-header-cell.spec.tsx @@ -2,7 +2,7 @@ import { classNames, States, stateClassNames } from "../misc"; import { TableTh, KendoTableThProps } from "../table/table-th"; import { Icon } from "../icon"; -const className = `k-header`; +const GRIDHEADERCELL_CLASSNAME = `k-header`; const states = [ States.hover, @@ -53,14 +53,14 @@ export const GridHeaderCell = ( {...others} className={classNames( props.className, - className, + GRIDHEADERCELL_CLASSNAME, { [`k-filterable`]: menu && filterable || menu === "filter", [`k-sorted`]: sortable, [`k-grid-header-sticky`]: sticky, [`k-touch-action-none`]: resizable }, - stateClassNames(className, { + stateClassNames(GRIDHEADERCELL_CLASSNAME, { hover, focus, active @@ -103,4 +103,8 @@ export const GridHeaderCell = ( ); }; +GridHeaderCell.states = states; +GridHeaderCell.className = GRIDHEADERCELL_CLASSNAME; +GridHeaderCell.defaultProps = defaultProps; + export default GridHeaderCell; diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts index 0171d546f4a..1661fa55a08 100644 --- a/packages/html/src/index.ts +++ b/packages/html/src/index.ts @@ -78,6 +78,7 @@ export * from './notification/index'; export * from './popover/index'; export * from './tooltip/index'; export * from './window/index'; +export * from './chart-wizard/index'; // Navigation export * from './appbar/index'; diff --git a/packages/html/src/input/input-loading-icon.tsx b/packages/html/src/input/input-loading-icon.tsx index 39a04dbbe86..ea1a4344e12 100644 --- a/packages/html/src/input/input-loading-icon.tsx +++ b/packages/html/src/input/input-loading-icon.tsx @@ -1,6 +1,6 @@ import { classNames, States } from '../misc'; -const className = `k-input-loading-icon`; +const INPUTLOADINGICON_CLASSNAME = `k-input-loading-icon`; const states = [ States.disabled, @@ -22,6 +22,11 @@ export const InputLoadingIcon = ( } return ( - + ); }; + +InputLoadingIcon.states = states; +InputLoadingIcon.className = INPUTLOADINGICON_CLASSNAME; + +export default InputLoadingIcon; diff --git a/packages/html/src/table/table-list-row.tsx b/packages/html/src/table/table-list-row.tsx index c3cd09971a4..14a639efb04 100644 --- a/packages/html/src/table/table-list-row.tsx +++ b/packages/html/src/table/table-list-row.tsx @@ -51,3 +51,8 @@ export const TableListRow = ( ); }; + +TableListRow.states = states; +TableListRow.className = TABLELISTROW_CLASSNAME; + +export default TableListRow; diff --git a/packages/html/src/table/table-row.tsx b/packages/html/src/table/table-row.tsx index 693121c1ce4..c2eb2045c84 100644 --- a/packages/html/src/table/table-row.tsx +++ b/packages/html/src/table/table-row.tsx @@ -51,3 +51,8 @@ export const TableRow = ( ); }; + +TableRow.states = states; +TableRow.className = TABLEROW_CLASSNAME; + +export default TableRow; diff --git a/packages/html/src/time-selector/time-selector-column.tsx b/packages/html/src/time-selector/time-selector-column.tsx index ddcb523d122..c0da1abd6c9 100644 --- a/packages/html/src/time-selector/time-selector-column.tsx +++ b/packages/html/src/time-selector/time-selector-column.tsx @@ -90,3 +90,7 @@ export const TimeSelectorColumn = ( ); }; + +TimeSelectorColumn.states = states; + +export default TimeSelectorColumn; diff --git a/packages/html/src/timeline/timeline-track-item.spec.tsx b/packages/html/src/timeline/timeline-track-item.spec.tsx index 7bb6d6ef09a..ac5c3801e4a 100644 --- a/packages/html/src/timeline/timeline-track-item.spec.tsx +++ b/packages/html/src/timeline/timeline-track-item.spec.tsx @@ -41,4 +41,7 @@ export const TimelineTrackItem = ( ); }; +TimelineTrackItem.states = states; +TimelineTrackItem.className = TIMELINETRACKITEM_CLASSNAME; + export default TimelineTrackItem; diff --git a/packages/html/src/upload/upload-dropzone.tsx b/packages/html/src/upload/upload-dropzone.tsx index 22fea40b38d..d1c345f5a23 100644 --- a/packages/html/src/upload/upload-dropzone.tsx +++ b/packages/html/src/upload/upload-dropzone.tsx @@ -76,3 +76,8 @@ export const UploadDropzone = ( ); }; + +UploadDropzone.states = states; +UploadDropzone.className = UPLOADDROPZONE_CLASSNAME; + +export default UploadDropzone; diff --git a/packages/material/CHANGELOG.md b/packages/material/CHANGELOG.md index 3058d04daf1..4755d3da2f3 100644 --- a/packages/material/CHANGELOG.md +++ b/packages/material/CHANGELOG.md @@ -3,6 +3,34 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [8.2.0-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.1-dev.0...v8.2.0-dev.0) (2024-07-15) + + +### Features + +* **chart-wizard:** add chart wizard component styles ([fb94657](https://github.com/telerik/kendo-themes/commit/fb9465737f7f7e64a20baefb715be976b0ab5fb6)) +* **chat:** add focus styles on quick replies ([c427ea1](https://github.com/telerik/kendo-themes/commit/c427ea1d65e0d53dd81142d09f54b4632d353833)) + + + + + +## [8.1.1-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.0...v8.1.1-dev.0) (2024-07-08) + +**Note:** Version bump only for package @progress/kendo-theme-material + + + + + +# [8.1.0](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.2...v8.1.0) (2024-07-03) + +**Note:** Version bump only for package @progress/kendo-theme-material + + + + + # [8.1.0-dev.2](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.1...v8.1.0-dev.2) (2024-07-01) diff --git a/packages/material/docs/customization-chart-wizard.md b/packages/material/docs/customization-chart-wizard.md new file mode 100644 index 00000000000..ec17531dbdf --- /dev/null +++ b/packages/material/docs/customization-chart-wizard.md @@ -0,0 +1,148 @@ +--- +title: Customizing ChartWizard +description: "Refer to the list of the Kendo UI Material theme variables available for customization." +slug: variables_kendothemematerial_chart-wizard +position: 9 +--- + +# Customizing ChartWizard + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chart-wizard-icon-area-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #3f51b5)
Description
The color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-bgStringif($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)var(--kendo-color-primary-subtle, #d1d5ee)
Description
The background color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-border-radiusStringk-border-radius(none)var(--kendo-border-radius-none, 0px)
Description
The border radius of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-focus-shadowListinset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)inset 0 0 0 1px var(--kendo-color-primary-emphasis, #97a0d7)
Description
The box shadow of the focused area around the chart type icon.
+
$kendo-chart-wizard-icon-area-selected-shadowListinset 0 0 0 1px $kendo-chart-wizard-icon-area-colorinset 0 0 0 1px var(--kendo-color-primary, #3f51b5)
Description
The box shadow of the selected area around the chart type icon.
+
$kendo-chart-wizard-chart-type-selected-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #3f51b5)
Description
The color of the selected chart type items in the Property panel.
+
$kendo-chart-wizard-preview-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the preview pane.
+
$kendo-chart-wizard-property-pane-paddingNumber00
Description
The padding of the property pane.
+
$kendo-chart-wizard-chart-type-spacingStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The gap between the chart type items in the Property panel.
+
$kendo-chart-wizard-icon-text-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The gap between the icon area and its text.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/material/docs/customization-chat.md b/packages/material/docs/customization-chat.md index 34df044a565..2e89172d940 100644 --- a/packages/material/docs/customization-chat.md +++ b/packages/material/docs/customization-chat.md @@ -637,6 +637,36 @@ The following table lists the available variables for customization.
Description
The border color of the hovered Chat quick reply.
+ + $kendo-chat-quick-reply-shadow-blur + Null + null + null + + +
Description
The shadow blur of the focused Chat quick reply.
+ + + + $kendo-chat-quick-reply-shadow-spread + Null + null + null + + +
Description
The shadow spread of the focused Chat quick reply.
+ + + + $kendo-chat-quick-reply-shadow-opacity + Number + 0 + 0 + + +
Description
The shadow opacity of the focused Chat quick reply.
+ + diff --git a/packages/material/docs/customization-map.md b/packages/material/docs/customization-map.md new file mode 100644 index 00000000000..6d01ecacc45 --- /dev/null +++ b/packages/material/docs/customization-map.md @@ -0,0 +1,238 @@ +--- +title: Customizing Map +description: "Refer to the list of the Kendo UI Material theme variables available for customization." +slug: variables_kendothemematerial_map +position: 9 +--- + +# Customizing Map + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-map-border-widthNumber0px0px
Description
The border width of the Map.
+
$kendo-map-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Map.
+
$kendo-map-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Map.
+
$kendo-map-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Map.
+
$kendo-map-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Map.
+
$kendo-map-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Map.
+
$kendo-map-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Map.
+
$kendo-map-navigator-marginStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The margin of the Map navigator.
+
$kendo-map-navigator-paddingStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The padding of the Map navigator.
+
$kendo-map-navigator-widthCalculationcalc( calc( #{$kendo-icon-size} * 3) + calc( #{$kendo-map-navigator-padding} * 2 ) )calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The width of the Map navigator.
+
$kendo-map-navigator-heightCalculation$kendo-map-navigator-widthcalc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The height of the Map navigator.
+
$kendo-map-navigator-border-widthNumber1px1px
Description
The border width of the Map navigator.
+
$kendo-map-zoom-control-marginStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The margin of the Map zoom control.
+
$kendo-map-zoom-control-button-padding-xString$kendo-button-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Map zoom control.
+
$kendo-map-zoom-control-button-padding-yString$kendo-map-zoom-control-button-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Map zoom control.
+
$kendo-map-attribution-padding-xString$kendo-padding-sm-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Map attribution.
+
$kendo-map-attribution-padding-yString$kendo-padding-sm-yvar(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the Map attribution.
+
$kendo-map-attribution-font-sizeCalculationcalc( #{$kendo-map-font-size} * .75 )calc(var(--kendo-font-size, inherit) * 0.75)
Description
The font size of the Map attribution.
+
$kendo-map-attribution-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 ))color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent)
Description
The background color of the Map attribution.
+
$kendo-map-marker-fillString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The fill color of the Map marker.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/material/docs/customization-mediaplayer.md b/packages/material/docs/customization-mediaplayer.md new file mode 100644 index 00000000000..edbb1e5323d --- /dev/null +++ b/packages/material/docs/customization-mediaplayer.md @@ -0,0 +1,168 @@ +--- +title: Customizing Mediaplayer +description: "Refer to the list of the Kendo UI Material theme variables available for customization." +slug: variables_kendothemematerial_mediaplayer +position: 9 +--- + +# Customizing Mediaplayer + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-media-player-border-widthNumber1px1px
Description
The border width of the MediaPlayer.
+
$kendo-media-player-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the MediaPlayer.
+
$kendo-media-player-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the MediaPlayer.
+
$kendo-media-player-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the MediaPlayer.
+
$kendo-media-player-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the MediaPlayer.
+
$kendo-media-player-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the MediaPlayer.
+
$kendo-media-player-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the MediaPlayer.
+
$kendo-media-player-titlebar-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the MediaPlayer title.
+
$kendo-media-player-titlebar-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the MediaPlayer title.
+
$kendo-media-player-titlebar-bgNullnullnull
Description
The background color of the MediaPlayer title.
+
$kendo-media-player-titlebar-textString$kendo-media-player-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The text color of the MediaPlayer title.
+
$kendo-media-player-titlebar-borderNullnullnull
Description
The border color of the MediaPlayer title.
+
$kendo-media-player-titlebar-gradientListif($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 0%, transparent)
Description
The gradient of the MediaPlayer title.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/material/docs/customization-pivotgrid.md b/packages/material/docs/customization-pivotgrid.md new file mode 100644 index 00000000000..c03100d9f4f --- /dev/null +++ b/packages/material/docs/customization-pivotgrid.md @@ -0,0 +1,738 @@ +--- +title: Customizing Pivotgrid +description: "Refer to the list of the Kendo UI Material theme variables available for customization." +slug: variables_kendothemematerial_pivotgrid +position: 9 +--- + +# Customizing Pivotgrid + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-pivotgrid-spacerStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacer of the PivotGrid.
+
$kendo-pivotgrid-padding-xNullnullnull
Description
The horizontal padding of the PivotGrid.
+
$kendo-pivotgrid-padding-yNullnullnull
Description
The vertical of the PivotGrid.
+
$kendo-pivotgrid-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the PivotGrid.
+
$kendo-pivotgrid-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the PivotGrid.
+
$kendo-pivotgrid-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the PivotGrid.
+
$kendo-pivotgrid-border-widthNumber1px1px
Description
The border width of the PivotGrid.
+
$kendo-pivotgrid-icon-spacingStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The icon spacing of the PivotGrid.
+
$kendo-pivotgrid-row-header-widthNumber300px300px
Description
The default width of the PivotGrid row header.
+
$kendo-pivotgrid-column-header-heightNumber75px75px
Description
The default height of the PivotGrid column header.
+
$kendo-pivotgrid-cell-padding-xString$kendo-table-md-cell-padding-xvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the PivotGrid cell.
+
$kendo-pivotgrid-cell-padding-yString$kendo-table-md-cell-padding-yvar(--kendo-spacing-2\.5, 0.625rem)
Description
The vertical padding of the PivotGrid cell.
+
$kendo-pivotgrid-cell-border-widthNumber1px1px
Description
The border width of the PivotGrid cell.
+
$kendo-pivotgrid-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PivotGrid.
+
$kendo-pivotgrid-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the PivotGrid.
+
$kendo-pivotgrid-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the PivotGrid.
+
$kendo-pivotgrid-alt-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 ))var(--kendo-color-border-alt, rgba(0, 0, 0, 0.15))
Description
The alt border color of the PivotGrid.
+
$kendo-pivotgrid-headers-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 2%, transparent), rgba( $kendo-component-header-bg, .02 ))color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 2%, transparent)
Description
The background color of the PivotGrid header.
+
$kendo-pivotgrid-headers-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the PivotGrid header.
+
$kendo-pivotgrid-headers-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the PivotGrid header.
+
$kendo-pivotgrid-total-bgStringif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 ))var(--kendo-color-base-subtle, #ebebeb)
Description
The background color of the PivotGrid total cells.
+
$kendo-pivotgrid-total-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the PivotGrid total cells.
+
$kendo-pivotgrid-total-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the PivotGrid total cells.
+
$kendo-pivotgrid-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% ))var(--kendo-color-base-hover, #ebebeb)
Description
The hover background color of the PivotGrid.
+
$kendo-pivotgrid-hover-textNullnullnull
Description
The hover text color of the PivotGrid.
+
$kendo-pivotgrid-hover-borderNullnullnull
Description
The hover border color of the PivotGrid.
+
$kendo-pivotgrid-selected-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( base-active ) 25%, transparent), rgba( k-contrast-color( $kendo-pivotgrid-bg ), .04 ))color-mix(in srgb, var(--kendo-color-base-active, #d6d6d6) 25%, transparent)
Description
The selected background color of the PivotGrid.
+
$kendo-pivotgrid-selected-textNullnullnull
Description
The selected text color of the PivotGrid.
+
$kendo-pivotgrid-selected-borderNullnullnull
Description
The selected border color of the PivotGrid.
+
$kendo-pivotgrid-focus-shadowNull$kendo-list-item-focus-shadownull
Description
The focus shadow of the PivotGrid.
+
$kendo-pivotgrid-configurator-padding-xNullnullnull
Description
The horizontal padding of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-padding-yNullnullnull
Description
The vertical padding of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-border-widthNumber1px1px
Description
The border width of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-header-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-padding-yCalculationcalc( #{$kendo-pivotgrid-spacer} * .75 )calc(var(--kendo-spacing-4, 1rem) * 0.75)
Description
The vertical padding of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-font-sizeNumber18px18px
Description
The font size of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-font-weightNumber500500
Description
The font weight of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-content-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid configurator content.
+
$kendo-pivotgrid-configurator-content-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the PivotGrid configurator content.
+
$kendo-pivotgrid-configurator-fields-margin-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal margin of the PivotGrid configurator fields.
+
$kendo-pivotgrid-configurator-fields-margin-yCalculationcalc( #{$kendo-pivotgrid-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The vertical margin of the PivotGrid configurator fields.
+
$kendo-pivotgrid-configurator-vertical-widthNumber320px320px
Description
The default width of the PivotGrid vertical configurator.
+
$kendo-pivotgrid-configurator-horizontal-heightNumber420px420px
Description
The default height of the PivotGrid horizontal configurator.
+
$kendo-pivotgrid-configurator-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-header-bgNullnullnull
Description
The background color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-borderNullnullnull
Description
The border color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-end-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-start-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The end shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-top-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The start shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-bottom-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The top shadow of the PivotGrid configurator.
+
$kendo-pivotgrid-configurator-button-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the PivotGrid configurator button.
+
$kendo-pivotgrid-configurator-button-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the PivotGrid configurator button.
+
$kendo-pivotgrid-configurator-button-border-widthNumber1px1px
Description
The border width of the PivotGrid configurator button.
+
$kendo-pivotgrid-configurator-button-sizeCalculationcalc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) )calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
Description
The size of the PivotGrid configurator button.
+
$kendo-pivotgrid-calculated-field-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-padding-yString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-border-widthNumber1px1px
Description
The border width of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-gapString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The spacing of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the PivotGrid calculated field.
+
$kendo-pivotgrid-calculated-field-header-bgNullnullnull
Description
The background color of the PivotGrid calculated field header.
+
$kendo-pivotgrid-calculated-field-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the PivotGrid calculated field header.
+
$kendo-pivotgrid-calculated-field-header-borderNullnullnull
Description
The border color of the PivotGrid calculated field header.
+
$kendo-pivotgrid-treeview-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid treeview.
+
$kendo-pivotgrid-treeview-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the PivotGrid treeview.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/material/docs/customization-prompt.md b/packages/material/docs/customization-prompt.md index 2b6ca709d60..ebe1a53de0c 100644 --- a/packages/material/docs/customization-prompt.md +++ b/packages/material/docs/customization-prompt.md @@ -34,7 +34,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #212121) -
Description
The text color of the Prompt.
+
Description
The text color of the AIPrompt.
@@ -44,7 +44,7 @@ The following table lists the available variables for customization. var(--kendo-color-surface-alt, #ffffff) -
Description
The background color of the Prompt.
+
Description
The background color of the AIPrompt.
@@ -54,7 +54,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, rgba(0, 0, 0, 0.12)) -
Description
The border color of the Prompt.
+
Description
The border color of the AIPrompt.
@@ -64,7 +64,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #212121) -
Description
The text color of the Prompt header.
+
Description
The text color of the AIPrompt header.
@@ -74,7 +74,7 @@ The following table lists the available variables for customization. var(--kendo-color-surface-alt, #ffffff) -
Description
The background color of the Prompt header.
+
Description
The background color of the AIPrompt header.
@@ -84,7 +84,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, rgba(0, 0, 0, 0.12)) -
Description
The border color of the Prompt header.
+
Description
The border color of the AIPrompt header.
@@ -94,7 +94,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The vertical padding of the Prompt content.
+
Description
The vertical padding of the AIPrompt content.
@@ -104,7 +104,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The horizontal padding of the Prompt content.
+
Description
The horizontal padding of the AIPrompt content.
@@ -114,7 +114,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-4, 1rem) -
Description
The spacing between the items of the Prompt content.
+
Description
The spacing between the items of the AIPrompt content.
@@ -124,7 +124,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #212121) -
Description
The text color of the Prompt content.
+
Description
The text color of the AIPrompt content.
@@ -134,7 +134,7 @@ The following table lists the available variables for customization. var(--kendo-color-app-surface, #ffffff) -
Description
The background color of the Prompt content.
+
Description
The background color of the AIPrompt content.
@@ -144,7 +144,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, rgba(0, 0, 0, 0.12)) -
Description
The text border of the Prompt content.
+
Description
The text border of the AIPrompt content.
@@ -154,7 +154,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The spacing between the items of the Prompt content expander.
+
Description
The spacing between the items of the AIPrompt content expander.
@@ -164,7 +164,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The vertical padding of the Prompt suggestion container.
+
Description
The vertical padding of the AIPrompt suggestion container.
@@ -174,7 +174,7 @@ The following table lists the available variables for customization. var(--kendo-spacing-2, 0.5rem) -
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The horizontal padding of the AIPrompt suggestion container.
@@ -184,7 +184,7 @@ The following table lists the available variables for customization. var(--kendo-border-radius-md, 0.25rem) -
Description
The border radius of the Prompt suggestion container.
+
Description
The border radius of the AIPrompt suggestion container.
@@ -194,7 +194,7 @@ The following table lists the available variables for customization. var(--kendo-color-on-app-surface, #212121) -
Description
The text color of the Prompt suggestion container.
+
Description
The text color of the AIPrompt suggestion container.
@@ -204,7 +204,7 @@ The following table lists the available variables for customization. var(--kendo-color-app-surface, #ffffff) -
Description
The background color of the Prompt suggestion container.
+
Description
The background color of the AIPrompt suggestion container.
@@ -214,7 +214,7 @@ The following table lists the available variables for customization. var(--kendo-color-border, rgba(0, 0, 0, 0.12)) -
Description
The border color of the Prompt suggestion container.
+
Description
The border color of the AIPrompt suggestion container.
@@ -224,7 +224,7 @@ The following table lists the available variables for customization. var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)) -
Description
The elevation of the Prompt suggestion container.
+
Description
The elevation of the AIPrompt suggestion container.
diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md index b1984e1dadb..f79f9635e47 100644 --- a/packages/material/docs/customization.md +++ b/packages/material/docs/customization.md @@ -4218,6 +4218,136 @@ The following table lists the available variables for customizing the Material t +### ChartWizard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-chart-wizard-icon-area-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #3f51b5)
Description
The color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-bgStringif($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle)var(--kendo-color-primary-subtle, #d1d5ee)
Description
The background color of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-border-radiusStringk-border-radius(none)var(--kendo-border-radius-none, 0px)
Description
The border radius of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the area around the chart type icon.
+
$kendo-chart-wizard-icon-area-focus-shadowListinset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis)inset 0 0 0 1px var(--kendo-color-primary-emphasis, #97a0d7)
Description
The box shadow of the focused area around the chart type icon.
+
$kendo-chart-wizard-icon-area-selected-shadowListinset 0 0 0 1px $kendo-chart-wizard-icon-area-colorinset 0 0 0 1px var(--kendo-color-primary, #3f51b5)
Description
The box shadow of the selected area around the chart type icon.
+
$kendo-chart-wizard-chart-type-selected-colorStringif($kendo-enable-color-system, k-color(primary), $kendo-color-primary)var(--kendo-color-primary, #3f51b5)
Description
The color of the selected chart type items in the Property panel.
+
$kendo-chart-wizard-preview-pane-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the preview pane.
+
$kendo-chart-wizard-property-pane-paddingNumber00
Description
The padding of the property pane.
+
$kendo-chart-wizard-chart-type-spacingStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The gap between the chart type items in the Property panel.
+
$kendo-chart-wizard-icon-text-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The gap between the icon area and its text.
+
+ ### Charts @@ -4955,6 +5085,36 @@ The following table lists the available variables for customizing the Material t + + + + + + + + + + + + + + + + + + + + + + + + + + +
Description
The border color of the hovered Chat quick reply.
$kendo-chat-quick-reply-shadow-blurNullnullnull
Description
The shadow blur of the focused Chat quick reply.
+
$kendo-chat-quick-reply-shadow-spreadNullnullnull
Description
The shadow spread of the focused Chat quick reply.
+
$kendo-chat-quick-reply-shadow-opacityNumber00
Description
The shadow opacity of the focused Chat quick reply.
+
@@ -14374,7 +14534,7 @@ The following table lists the available variables for customizing the Material t -### Menu +### Map @@ -14392,319 +14552,359 @@ The following table lists the available variables for customizing the Material t - - - - - - - - - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - + - - + - + - - + - + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - + +
$kendo-menu-popup-padding-xNullnullnull
Description
Horizontal padding of the menu popup.
-
$kendo-menu-popup-padding-yNullnullnull$kendo-map-border-widthNumber0px0px
Description
Vertical padding of the menu popup.
+
Description
The border width of the Map.
$kendo-menu-popup-border-widthNumber$kendo-popup-border-width0px$kendo-map-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
Width of the border around the menu popup.
+
Description
The font size of the Map.
$kendo-menu-popup-font-size$kendo-map-line-height Stringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)var( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
Font sizes of the menu popup.
+
Description
The line height of the Map.
$kendo-menu-popup-line-heightNumber1.251.25$kendo-map-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
Line heights used along with $kendo-font-size.
+
Description
The font family of the Map.
$kendo-menu-popup-bg$kendo-map-bg String$kendo-popup-bg$kendo-component-bg var(--kendo-color-surface-alt, #ffffff)
Description
The background of the menu popup.
+
Description
The background color of the Map.
$kendo-menu-popup-text$kendo-map-text String$kendo-popup-text$kendo-component-text var(--kendo-color-on-app-surface, #212121)
Description
The text color of the menu popup.
+
Description
The text color of the Map.
$kendo-menu-popup-border$kendo-map-border String$kendo-popup-border$kendo-component-border var(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the menu popup.
+
Description
The border color of the Map.
$kendo-menu-popup-gradientNullnullnull$kendo-map-navigator-marginStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The background gradient of the menu popup.
+
Description
The margin of the Map navigator.
$kendo-menu-popup-item-padding-x$kendo-map-navigator-padding Stringk-spacing(4)var(--kendo-spacing-4, 1rem)k-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
Horizontal padding of the menu item in popup.
+
Description
The padding of the Map navigator.
$kendo-menu-popup-item-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-map-navigator-widthCalculationcalc( calc( #{$kendo-icon-size} * 3) + calc( #{$kendo-map-navigator-padding} * 2 ) )calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
Vertical padding of the menu item in popup.
+
Description
The width of the Map navigator.
$kendo-menu-popup-item-padding-end$kendo-map-navigator-height Calculationcalc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )calc(var(--kendo-spacing-4, 1rem) * 2 + 16px)$kendo-map-navigator-widthcalc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2)
Description
The end padding of the menu item in popup.
+
Description
The height of the Map navigator.
$kendo-menu-popup-sm-item-icon-margin-startString$kendo-menu-popup-sm-item-padding-xvar(--kendo-spacing-4, 1rem)$kendo-map-navigator-border-widthNumber1px1px
Description
The start margin of the menu item expand icon.
+
Description
The border width of the Map navigator.
$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(var(--kendo-spacing-4, 1rem) * 2 + 16px) - var(--kendo-spacing-4, 1rem)/2))$kendo-map-zoom-control-marginStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The end margin of the menu item expand icon.
+
Description
The margin of the Map zoom control.
$kendo-menu-popup-item-spacing$kendo-map-zoom-control-button-padding-x Stringk-spacing(0)var(--kendo-spacing-0, 0px)$kendo-button-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The spacing between the menu items in popup.
+
Description
The horizontal padding of the Map zoom control.
$kendo-menu-popup-item-bgNullnullnull$kendo-map-zoom-control-button-padding-yString$kendo-map-zoom-control-button-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The background of the menu item in popup.
+
Description
The vertical padding of the Map zoom control.
$kendo-menu-popup-item-textNullnullnull$kendo-map-attribution-padding-xString$kendo-padding-sm-xvar(--kendo-spacing-2, 0.5rem)
Description
The text color of the menu item in popup.
+
Description
The horizontal padding of the Map attribution.
$kendo-menu-popup-item-borderNullnullnull$kendo-map-attribution-padding-yString$kendo-padding-sm-yvar(--kendo-spacing-0\.5, 0.125rem)
Description
The border color of the menu item in popup.
+
Description
The vertical padding of the Map attribution.
$kendo-menu-popup-item-gradientNullnullnull$kendo-map-attribution-font-sizeCalculationcalc( #{$kendo-map-font-size} * .75 )calc(var(--kendo-font-size, inherit) * 0.75)
Description
The background gradient of the menu item in popup.
+
Description
The font size of the Map attribution.
$kendo-menu-popup-item-hover-bg$kendo-map-attribution-bg String$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #ebebeb)if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 ))color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent)
Description
The background of hovered menu item in popup.
+
Description
The background color of the Map attribution.
$kendo-menu-popup-item-hover-text$kendo-map-marker-fill String$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #212121)$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The text color of hovered menu item in popup.
+
Description
The fill color of the Map marker.
+ +### Mediaplayer + + + + + + + + + + + + + + + + + + + + + + - - - - + - + + + + + + - - - - + + + + - - + - + + + + + + + + + + - - + - - + + - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + - - -
NameTypeDefault valueComputed value
$kendo-media-player-border-widthNumber1px1px
$kendo-menu-popup-item-hover-borderNullnullnull
Description
The border width of the MediaPlayer.
+
Description
The border color of hovered menu item in popup.
+ 		$kendo-media-player-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the MediaPlayer.
$kendo-menu-popup-item-hover-gradientNullnullnull$kendo-media-player-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The background gradient of hovered menu item in popup.
+
Description
The font size of the MediaPlayer.
$kendo-menu-popup-item-expanded-bg$kendo-media-player-line-height String$kendo-list-item-selected-bgvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the MediaPlayer.
+
$kendo-media-player-bgString$kendo-component-bg var(--kendo-color-surface-alt, #ffffff)
Description
The background of expanded menu item in popup.
+
Description
The background color of the MediaPlayer.
$kendo-menu-popup-item-expanded-text$kendo-media-player-text String$kendo-list-item-selected-textvar(--kendo-color-secondary, #e51a5f)$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of expanded menu item in popup.
+
Description
The text color of the MediaPlayer.
$kendo-menu-popup-item-expanded-borderNullnullnull$kendo-media-player-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of expanded menu item in popup.
+
Description
The border color of the MediaPlayer.
$kendo-menu-popup-item-expanded-gradient$kendo-media-player-titlebar-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the MediaPlayer title.
+
$kendo-media-player-titlebar-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the MediaPlayer title.
+
$kendo-media-player-titlebar-bg Null null null
Description
The background gradient of expanded menu item in popup.
+
Description
The background color of the MediaPlayer title.
$kendo-menu-popup-item-focus-shadow$kendo-media-player-titlebar-textString$kendo-media-player-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The text color of the MediaPlayer title.
+
$kendo-media-player-titlebar-border Null null null
Description
The base shadow of focused menu item in popup.
+
Description
The border color of the MediaPlayer title.
- -### MenuButton - - - - - - - - - - - - - - - - - - - - - + + + + + -
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
$kendo-media-player-titlebar-gradientListif($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 0%, transparent)
Description
The horizontal padding of the button arrow in the Menu Button.
+
Description
The gradient of the MediaPlayer title.
-### Notification +### Menu @@ -14722,969 +14922,949 @@ The following table lists the available variables for customizing the Material t - - - - + + + + - - - - - + + + + - - + + + + + + + + + + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
$kendo-notification-group-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-menu-popup-padding-xNullnullnull
Description
The row-gap between the elements in the Notification group.
+
Description
Horizontal padding of the menu popup.
$kendo-notification-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)$kendo-menu-popup-padding-yNullnullnull
Description
The horizontal padding of the Notification.
+
Description
Vertical padding of the menu popup.
$kendo-notification-padding-y$kendo-menu-popup-border-widthNumber$kendo-popup-border-width0px
Description
Width of the border around the menu popup.
+
$kendo-menu-popup-font-size Stringk-spacing(3.5)var(--kendo-spacing-3\.5, 0.875rem)var( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The vertical padding of the Notification.
+
Description
Font sizes of the menu popup.
$kendo-notification-border-width$kendo-menu-popup-line-height Number0px0px1.251.25
Description
The width of the border around the Notification.
+
Description
Line heights used along with $kendo-font-size.
$kendo-notification-border-radius$kendo-menu-popup-bg Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)$kendo-popup-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The border radius of the Notification.
+
Description
The background of the menu popup.
$kendo-notification-font-family$kendo-menu-popup-text Stringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)$kendo-popup-textvar(--kendo-color-on-app-surface, #212121)
Description
The font family of the Notification.
+
Description
The text color of the menu popup.
$kendo-notification-font-size$kendo-menu-popup-border Stringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)$kendo-popup-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The font size of the Notification.
+
Description
The border color of the menu popup.
$kendo-notification-line-heightNumberk-math-div( 20, 14 )1.4285714286$kendo-menu-popup-gradientNullnullnull
Description
The line height of the Notification.
+
Description
The background gradient of the menu popup.
$kendo-notification-bg$kendo-menu-popup-item-padding-x String$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)k-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The background color of the Notification.
+
Description
Horizontal padding of the menu item in popup.
$kendo-notification-text$kendo-menu-popup-item-padding-y String$kendo-component-textvar(--kendo-color-on-app-surface, #212121)k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The text color of the Notification.
+
Description
Vertical padding of the menu item in popup.
$kendo-notification-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )calc(var(--kendo-spacing-4, 1rem) * 2 + 16px)
Description
The border color of the Notification.
+
Description
The end padding of the menu item in popup.
$kendo-notification-shadow$kendo-menu-popup-sm-item-icon-margin-start String$kendo-popup-shadowvar(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))$kendo-menu-popup-sm-item-padding-xvar(--kendo-spacing-4, 1rem)
Description
The box shadow of the Notification.
+
Description
The start margin of the menu item expand icon.
$kendo-notification-icon-spacingString$kendo-icon-spacingvar(--kendo-spacing-2, 0.5rem)$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(var(--kendo-spacing-4, 1rem) * 2 + 16px) - var(--kendo-spacing-4, 1rem)/2))
Description
The horizontal spacing of the Notification icon.
+
Description
The end margin of the menu item expand icon.
$kendo-notification-theme-colorsMap$kendo-theme-colors
  • primary: var(--kendo-color-primary, #3f51b5)
  • secondary: var(--kendo-color-secondary, #e51a5f)
  • tertiary: var(--kendo-color-tertiary, #00695c)
  • info: var(--kendo-color-info, #0058e9)
  • success: var(--kendo-color-success, #37b400)
  • warning: var(--kendo-color-warning, #ffc000)
  • error: var(--kendo-color-error, #f31700)
  • dark: var(--kendo-color-dark, #424242)
  • light: var(--kendo-color-light, #f5f5f5)
  • inverse: var(--kendo-color-dark, #424242)
$kendo-menu-popup-item-spacingStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The theme colors map for the Notification.
+
Description
The spacing between the menu items in popup.
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )
  • inverse: "color":"var(--kendo-color-on-inverse, #ffffff)","background-color":"var(--kendo-color-dark, #424242)","border":"var(--kendo-color-dark, #424242)"
  • light: "color":"var(--kendo-color-on-light, #000000)","background-color":"var(--kendo-color-light, #f5f5f5)","border":"var(--kendo-color-light, #f5f5f5)"
  • dark: "color":"var(--kendo-color-on-dark, #ffffff)","background-color":"var(--kendo-color-dark, #424242)","border":"var(--kendo-color-dark, #424242)"
  • error: "color":"var(--kendo-color-on-error, #ffffff)","background-color":"var(--kendo-color-error, #f31700)","border":"var(--kendo-color-error, #f31700)"
  • warning: "color":"var(--kendo-color-on-warning, #000000)","background-color":"var(--kendo-color-warning, #ffc000)","border":"var(--kendo-color-warning, #ffc000)"
  • success: "color":"var(--kendo-color-on-success, #ffffff)","background-color":"var(--kendo-color-success, #37b400)","border":"var(--kendo-color-success, #37b400)"
  • info: "color":"var(--kendo-color-on-info, #ffffff)","background-color":"var(--kendo-color-info, #0058e9)","border":"var(--kendo-color-info, #0058e9)"
  • tertiary: "color":"var(--kendo-color-on-tertiary, #ffffff)","background-color":"var(--kendo-color-tertiary, #00695c)","border":"var(--kendo-color-tertiary, #00695c)"
  • secondary: "color":"var(--kendo-color-on-secondary, #ffffff)","background-color":"var(--kendo-color-secondary, #e51a5f)","border":"var(--kendo-color-secondary, #e51a5f)"
  • primary: "color":"var(--kendo-color-on-primary, #ffffff)","background-color":"var(--kendo-color-primary, #3f51b5)","border":"var(--kendo-color-primary, #3f51b5)"
$kendo-menu-popup-item-bgNullnullnull
Description
The generated theme colors map for the Notification.
+
Description
The background of the menu item in popup.
- -### Orgchart - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - + +
NameTypeDefault valueComputed value
$kendo-orgchart-spacerStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
$kendo-menu-popup-item-textNullnullnull
Description
The spacing index of the OrgChart.
+
Description
The text color of the menu item in popup.
$kendo-orgchart-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-item-borderNullnullnull
Description
The vertical padding of the OrgChart.
+
Description
The border color of the menu item in popup.
$kendo-orgchart-padding-xString$kendo-orgchart-padding-yvar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-item-gradientNullnullnull
Description
The horizontal padding of the OrgChart.
+
Description
The background gradient of the menu item in popup.
$kendo-orgchart-font-family$kendo-menu-popup-item-hover-bg Stringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The font family of the OrgChart.
+
Description
The background of hovered menu item in popup.
$kendo-orgchart-font-size$kendo-menu-popup-item-hover-text Stringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #212121)
Description
The font size of the OrgChart.
+
Description
The text color of hovered menu item in popup.
$kendo-orgchart-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)$kendo-menu-popup-item-hover-borderNullnullnull
Description
The line height of the OrgChart.
+
Description
The border color of hovered menu item in popup.
$kendo-orgchart-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The background color of the OrgChart.
+
Description
The background gradient of hovered menu item in popup.
$kendo-orgchart-text$kendo-menu-popup-item-expanded-bg String$kendo-component-textvar(--kendo-color-on-app-surface, #212121)$kendo-list-item-selected-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The text color of the OrgChart.
+
Description
The background of expanded menu item in popup.
$kendo-orgchart-border$kendo-menu-popup-item-expanded-text String$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))$kendo-list-item-selected-textvar(--kendo-color-secondary, #e51a5f)
Description
The border color of the OrgChart.
+
Description
The text color of expanded menu item in popup.
$kendo-orgchart-node-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The spacing of the OrgChart node.
+
Description
The border color of expanded menu item in popup.
$kendo-orgchart-group-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The spacing of the OrgChart group.
+
Description
The background gradient of expanded menu item in popup.
$kendo-orgchart-node-container-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-menu-popup-item-focus-shadowNullnullnull
Description
The spacing of the OrgChart node container.
+
Description
The base shadow of focused menu item in popup.
$kendo-orgchart-node-group-padding-y
+ +### MenuButton + + + + + + + + + + + + + + + + + + - - + + - - - + +
NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-x String$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the OrgChart node group.
+
Description
The horizontal padding of the button arrow in the Menu Button.
$kendo-orgchart-node-group-padding-x
+ +### Notification + + + + + + + + + + + + + + + + + + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - + + +
NameTypeDefault valueComputed value
$kendo-notification-group-gap String$kendo-orgchart-node-group-padding-yvar(--kendo-spacing-6, 1.5rem)k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the OrgChart node group.
+
Description
The row-gap between the elements in the Notification group.
$kendo-orgchart-node-group-border-widthNumber1px1px$kendo-notification-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The border width of the OrgChart node group.
+
Description
The horizontal padding of the Notification.
$kendo-orgchart-node-group-border-radius$kendo-notification-padding-y Stringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)k-spacing(3.5)var(--kendo-spacing-3\.5, 0.875rem)
Description
The border radius of the OrgChart node group.
+
Description
The vertical padding of the Notification.
$kendo-orgchart-node-group-bgStringif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))var(--kendo-color-surface, #f5f5f5)$kendo-notification-border-widthNumber0px0px
Description
The background color of the OrgChart node group.
+
Description
The width of the border around the Notification.
$kendo-orgchart-node-group-text$kendo-notification-border-radius String$kendo-base-textvar(--kendo-color-on-app-surface, #212121)k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The text color of the OrgChart node group.
+
Description
The border radius of the Notification.
$kendo-orgchart-node-group-border$kendo-notification-font-family String$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))var( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The border color of the OrgChart node group.
+
Description
The font family of the Notification.
$kendo-orgchart-node-group-focus-borderNull$kendo-card-focus-bordernull$kendo-notification-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The border color of the focused OrgChart node group.
+
Description
The font size of the Notification.
$kendo-orgchart-node-group-focus-shadowList0 2px 4px -1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $elevation, .2 )), 0 4px 5px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 14%, transparent), rgba( $elevation, .14 )), 0 1px 10px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 12%, transparent), rgba( $elevation, .12 ))0 2px 4px -1px color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 20%, transparent), 0 4px 5px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 14%, transparent), 0 1px 10px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 12%, transparent)$kendo-notification-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The shadow of the focused OrgChart node group.
+
Description
The line height of the Notification.
$kendo-orgchart-node-group-title-font-size$kendo-notification-bg Stringvar( --kendo-font-size-xl, inherit )var(--kendo-font-size-xl, inherit)$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The font size of the OrgChart node group title.
+
Description
The background color of the Notification.
$kendo-orgchart-node-group-title-margin-bottomCalculationcalc( #{$kendo-orgchart-spacer} / 4 )calc(var(--kendo-spacing-6, 1.5rem) / 4)$kendo-notification-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The bottom margin of the OrgChart node group title.
+
Description
The text color of the Notification.
$kendo-orgchart-node-group-title-line-height$kendo-notification-border Stringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The line height of the OrgChart node group title.
+
Description
The border color of the Notification.
$kendo-orgchart-node-group-subtitle-font-size$kendo-notification-shadow Stringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)$kendo-popup-shadowvar(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))
Description
The font size of the OrgChart node group subtitle.
+
Description
The box shadow of the Notification.
$kendo-orgchart-node-group-subtitle-margin-bottom$kendo-notification-icon-spacing String$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)$kendo-icon-spacingvar(--kendo-spacing-2, 0.5rem)
Description
The bottom margin of the OrgChart node group subtitle.
+
Description
The horizontal spacing of the Notification icon.
$kendo-orgchart-node-group-subtitle-textColorrgba( black, .54 )rgba(0, 0, 0, 0.54)$kendo-notification-theme-colorsMap$kendo-theme-colors
  • primary: var(--kendo-color-primary, #3f51b5)
  • secondary: var(--kendo-color-secondary, #e51a5f)
  • tertiary: var(--kendo-color-tertiary, #00695c)
  • info: var(--kendo-color-info, #0058e9)
  • success: var(--kendo-color-success, #37b400)
  • warning: var(--kendo-color-warning, #ffc000)
  • error: var(--kendo-color-error, #f31700)
  • dark: var(--kendo-color-dark, #424242)
  • light: var(--kendo-color-light, #f5f5f5)
  • inverse: var(--kendo-color-dark, #424242)
Description
The line height of the OrgChart node group subtitle.
+
Description
The theme colors map for the Notification.
$kendo-orgchart-card-widthNumber300px300px$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )
  • inverse: "color":"var(--kendo-color-on-inverse, #ffffff)","background-color":"var(--kendo-color-dark, #424242)","border":"var(--kendo-color-dark, #424242)"
  • light: "color":"var(--kendo-color-on-light, #000000)","background-color":"var(--kendo-color-light, #f5f5f5)","border":"var(--kendo-color-light, #f5f5f5)"
  • dark: "color":"var(--kendo-color-on-dark, #ffffff)","background-color":"var(--kendo-color-dark, #424242)","border":"var(--kendo-color-dark, #424242)"
  • error: "color":"var(--kendo-color-on-error, #ffffff)","background-color":"var(--kendo-color-error, #f31700)","border":"var(--kendo-color-error, #f31700)"
  • warning: "color":"var(--kendo-color-on-warning, #000000)","background-color":"var(--kendo-color-warning, #ffc000)","border":"var(--kendo-color-warning, #ffc000)"
  • success: "color":"var(--kendo-color-on-success, #ffffff)","background-color":"var(--kendo-color-success, #37b400)","border":"var(--kendo-color-success, #37b400)"
  • info: "color":"var(--kendo-color-on-info, #ffffff)","background-color":"var(--kendo-color-info, #0058e9)","border":"var(--kendo-color-info, #0058e9)"
  • tertiary: "color":"var(--kendo-color-on-tertiary, #ffffff)","background-color":"var(--kendo-color-tertiary, #00695c)","border":"var(--kendo-color-tertiary, #00695c)"
  • secondary: "color":"var(--kendo-color-on-secondary, #ffffff)","background-color":"var(--kendo-color-secondary, #e51a5f)","border":"var(--kendo-color-secondary, #e51a5f)"
  • primary: "color":"var(--kendo-color-on-primary, #ffffff)","background-color":"var(--kendo-color-primary, #3f51b5)","border":"var(--kendo-color-primary, #3f51b5)"
Description
The width of the OrgChart Card.
+
Description
The generated theme colors map for the Notification.
+
+ +### Orgchart + + + + + + + + + + + + + + + + + + + + + + + + - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + - - + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-orgchart-spacerStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The spacing index of the OrgChart.
$kendo-orgchart-card-padding-y$kendo-orgchart-padding-y String$kendo-card-padding-yvar(--kendo-spacing-3, 0.75rem)$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the OrgChart Card.
+
Description
The vertical padding of the OrgChart.
$kendo-orgchart-card-padding-x$kendo-orgchart-padding-x String$kendo-orgchart-card-padding-yvar(--kendo-spacing-3, 0.75rem)$kendo-orgchart-padding-yvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the OrgChart Card.
+
Description
The horizontal padding of the OrgChart.
$kendo-orgchart-card-border-widthNumber1px1px$kendo-orgchart-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The border width of the OrgChart Card.
+
Description
The font family of the OrgChart.
$kendo-orgchart-card-shadow$kendo-orgchart-font-size Stringnonenonevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The shadow of the OrgChart Card.
+
Description
The font size of the OrgChart.
$kendo-orgchart-card-focus-shadowList$kendo-orgchart-node-group-focus-shadow0 2px 4px -1px color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 20%, transparent), 0 4px 5px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 14%, transparent), 0 1px 10px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 12%, transparent)$kendo-orgchart-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The shadow of the focused OrgChart Card.
+
Description
The line height of the OrgChart.
$kendo-orgchart-card-title-margin-bottom$kendo-orgchart-bg Stringk-spacing(0)var(--kendo-spacing-0, 0px)$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The bottom margin of the OrgChart Card title.
+
Description
The background color of the OrgChart.
$kendo-orgchart-card-title-font-sizeNullnullnull$kendo-orgchart-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The font size of the OrgChart Card title.
+
Description
The text color of the OrgChart.
$kendo-orgchart-card-subtitle-margin-bottom$kendo-orgchart-border Stringk-spacing(0)var(--kendo-spacing-0, 0px)$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The bottom margin of the OrgChart Card subtitle.
+
Description
The border color of the OrgChart.
$kendo-orgchart-card-subtitle-font-sizeNullnullnull$kendo-orgchart-node-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The font size of the OrgChart Card subtitle.
+
Description
The spacing of the OrgChart node.
$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0$kendo-orgchart-group-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The border width of the OrgChart Card body.
+
Description
The spacing of the OrgChart group.
$kendo-orgchart-card-body-border-colorColortransparenttransparent$kendo-orgchart-node-container-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The border color of the OrgChart Card body.
+
Description
The spacing of the OrgChart node container.
$kendo-orgchart-card-body-vbox-margin-right$kendo-orgchart-node-group-padding-y Stringk-math-div( $kendo-orgchart-spacer, 2 )var(--kendo-spacing-6, 1.5rem)/2$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The right margin of the OrgChart Card body title wrap.
+
Description
The vertical padding of the OrgChart node group.
$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px$kendo-orgchart-node-group-padding-xString$kendo-orgchart-node-group-padding-yvar(--kendo-spacing-6, 1.5rem)
Description
The min height of the OrgChart Card body title wrap.
+
Description
The horizontal padding of the OrgChart node group.
$kendo-orgchart-line-size$kendo-orgchart-node-group-border-width Number 1px 1px
Description
The size of the OrgChart connecting line.
+
Description
The border width of the OrgChart node group.
$kendo-orgchart-line-fill$kendo-orgchart-node-group-border-radius String$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))k-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The fill color of the OrgChart connecting line.
+
Description
The border radius of the OrgChart node group.
$kendo-orgchart-line-v-heightNumber25px25px$kendo-orgchart-node-group-bgStringif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))var(--kendo-color-surface, #f5f5f5)
Description
The height of the OrgChart connecting line.
+
Description
The background color of the OrgChart node group.
- -### PDFViewer - - - - - - - - - - - - - - - - - - - - - + + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + -
NameTypeDefault valueComputed value
$kendo-pdf-viewer-border-widthNumber1px1px
$kendo-orgchart-node-group-textString$kendo-base-textvar(--kendo-color-on-app-surface, #212121)
Description
The border width of the PDFViewer.
+
Description
The text color of the OrgChart node group.
$kendo-pdf-viewer-font-family$kendo-orgchart-node-group-border Stringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The font family of the PDFViewer.
+
Description
The border color of the OrgChart node group.
$kendo-pdf-viewer-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)$kendo-orgchart-node-group-focus-borderNull$kendo-card-focus-bordernull
Description
The font size of the PDFViewer.
+
Description
The border color of the focused OrgChart node group.
$kendo-pdf-viewer-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)$kendo-orgchart-node-group-focus-shadowList0 2px 4px -1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $elevation, .2 )), 0 4px 5px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 14%, transparent), rgba( $elevation, .14 )), 0 1px 10px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 12%, transparent), rgba( $elevation, .12 ))0 2px 4px -1px color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 20%, transparent), 0 4px 5px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 14%, transparent), 0 1px 10px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 12%, transparent)
Description
The line height of the PDFViewer.
+
Description
The shadow of the focused OrgChart node group.
$kendo-pdf-viewer-bg$kendo-orgchart-node-group-title-font-size String$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)var( --kendo-font-size-xl, inherit )var(--kendo-font-size-xl, inherit)
Description
The background color of the PDFViewer.
+
Description
The font size of the OrgChart node group title.
$kendo-pdf-viewer-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)$kendo-orgchart-node-group-title-margin-bottomCalculationcalc( #{$kendo-orgchart-spacer} / 4 )calc(var(--kendo-spacing-6, 1.5rem) / 4)
Description
The text color of the PDFViewer.
+
Description
The bottom margin of the OrgChart node group title.
$kendo-pdf-viewer-border$kendo-orgchart-node-group-title-line-height String$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))var( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The border color of the PDFViewer.
+
Description
The line height of the OrgChart node group title.
$kendo-pdf-viewer-toolbar-bg$kendo-orgchart-node-group-subtitle-font-size Stringif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .25 ))var(--kendo-color-surface, #f5f5f5)var( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The background color of the PDFViewer Toolbar.
+
Description
The font size of the OrgChart node group subtitle.
$kendo-pdf-viewer-toolbar-textNullnullnull$kendo-orgchart-node-group-subtitle-margin-bottomString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The text color of the PDFViewer Toolbar.
+
Description
The bottom margin of the OrgChart node group subtitle.
$kendo-pdf-viewer-toolbar-borderNullnullnull$kendo-orgchart-node-group-subtitle-textColorrgba( black, .54 )rgba(0, 0, 0, 0.54)
Description
The border color of the PDFViewer Toolbar.
+
Description
The line height of the OrgChart node group subtitle.
$kendo-pdf-viewer-toolbar-gradientNullnullnull$kendo-orgchart-card-widthNumber300px300px
Description
The gradient of the PDFViewer Toolbar.
+
Description
The width of the OrgChart Card.
$kendo-pdf-viewer-canvas-bg$kendo-orgchart-card-padding-y String$kendo-app-bgvar(--kendo-color-app-surface, #ffffff)$kendo-card-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The background color of the PDFViewer canvas.
+
Description
The vertical padding of the OrgChart Card.
$kendo-pdf-viewer-canvas-textNullnullnull$kendo-orgchart-card-padding-xString$kendo-orgchart-card-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The text color of the PDFViewer canvas.
+
Description
The horizontal padding of the OrgChart Card.
$kendo-pdf-viewer-canvas-borderNullnullnull$kendo-orgchart-card-border-widthNumber1px1px
Description
The border color of the PDFViewer canvas.
+
Description
The border width of the OrgChart Card.
$kendo-pdf-viewer-page-spacing$kendo-orgchart-card-shadow Stringk-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)nonenone
Description
The spacing of the PDFViewer page.
+
Description
The shadow of the OrgChart Card.
$kendo-pdf-viewer-page-bgColorwhitewhite$kendo-orgchart-card-focus-shadowList$kendo-orgchart-node-group-focus-shadow0 2px 4px -1px color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 20%, transparent), 0 4px 5px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 14%, transparent), 0 1px 10px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 12%, transparent)
Description
The background color of the PDFViewer page.
+
Description
The shadow of the focused OrgChart Card.
$kendo-pdf-viewer-page-text$kendo-orgchart-card-title-margin-bottom String$kendo-component-textvar(--kendo-color-on-app-surface, #212121)k-spacing(0)var(--kendo-spacing-0, 0px)
Description
The text color of the PDFViewer page.
+
Description
The bottom margin of the OrgChart Card title.
$kendo-pdf-viewer-page-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The border color of the PDFViewer page.
+
Description
The font size of the OrgChart Card title.
$kendo-pdf-viewer-page-shadow$kendo-orgchart-card-subtitle-margin-bottom String$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))k-spacing(0)var(--kendo-spacing-0, 0px)
Description
The shadow of the PDFViewer page.
+
Description
The bottom margin of the OrgChart Card subtitle.
$kendo-pdf-viewer-search-panel-padding-xString$kendo-toolbar-md-padding-xvar(--kendo-spacing-2, 0.5rem)$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The horizontal padding of the PDFViewer search panel.
+
Description
The font size of the OrgChart Card subtitle.
$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(var(--kendo-spacing-2, 0.5rem) * 2)$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The vertical padding of the PDFViewer search panel.
+
Description
The border width of the OrgChart Card body.
$kendo-pdf-viewer-search-panel-spacing$kendo-orgchart-card-body-border-colorColortransparenttransparent
Description
The border color of the OrgChart Card body.
+
$kendo-orgchart-card-body-vbox-margin-right String$kendo-toolbar-md-spacingvar(--kendo-spacing-2, 0.5rem)k-math-div( $kendo-orgchart-spacer, 2 )var(--kendo-spacing-6, 1.5rem)/2
Description
The spacing of the PDFViewer search panel.
+
Description
The right margin of the OrgChart Card body title wrap.
$kendo-pdf-viewer-search-panel-border-width$kendo-orgchart-card-body-vbox-min-height Number1px1px$kendo-card-avatar-size45px
Description
The border width of the PDFViewer search panel.
+
Description
The min height of the OrgChart Card body title wrap.
$kendo-pdf-viewer-search-panel-border-radiusStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)$kendo-orgchart-line-sizeNumber1px1px
Description
The border radius of the PDFViewer search panel.
+
Description
The size of the OrgChart connecting line.
$kendo-pdf-viewer-search-panel-bg$kendo-orgchart-line-fill String$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The background color of the PDFViewer search panel.
+
Description
The fill color of the OrgChart connecting line.
$kendo-pdf-viewer-search-panel-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the PDFViewer search panel.
-
$kendo-pdf-viewer-search-panel-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the PDFViewer search panel.
-
$kendo-pdf-viewer-search-panel-shadowString$kendo-window-shadowvar(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))
Description
The shadow of the PDFViewer search panel.
-
$kendo-pdf-viewer-search-panel-matches-spacingString$kendo-padding-sm-xvar(--kendo-spacing-2, 0.5rem)
Description
The spacing of the matches container in the PDFViewer search panel.
-
$kendo-pdf-viewer-selection-line-height$kendo-orgchart-line-v-height Number$kendo-line-height-sm1.2
Description
The line height of the PDFViewer selection.
-
$kendo-pdf-viewer-search-highlight-bgString$kendo-body-textvar(--kendo-color-on-app-surface, #212121)
Description
The background color of the PDFViewer highlight.
-
$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow
Description
The background color of the PDFViewer highlight mark.
-
$kendo-pdf-viewer-icon-textString$kendo-dropzone-icon-textvar(--kendo-color-subtle, #757575)25px25px
Description
The text color of the PDFViewer icon.
+
Description
The height of the OrgChart connecting line.
-### Pager +### PDFViewer @@ -15702,448 +15882,798 @@ The following table lists the available variables for customizing the Material t - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + + + + + + + + + + - + - - - - - - + +
$kendo-pager-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-pdf-viewer-border-widthNumber1px1px
Description
The horizontal padding of the Pager.
+
Description
The border width of the PDFViewer.
$kendo-pager-sm-padding-x$kendo-pdf-viewer-font-family Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)var( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The horizontal padding of the small Pager.
+
Description
The font family of the PDFViewer.
$kendo-pager-md-padding-x$kendo-pdf-viewer-font-size Stringk-spacing(2)var(--kendo-spacing-2, 0.5rem)var( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The horizontal padding of the medium Pager.
+
Description
The font size of the PDFViewer.
$kendo-pager-lg-padding-x$kendo-pdf-viewer-line-height Stringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)var( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The horizontal padding of the large Pager.
+
Description
The line height of the PDFViewer.
$kendo-pager-padding-y$kendo-pdf-viewer-bg String$kendo-pager-padding-xvar(--kendo-spacing-2, 0.5rem)$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The vertical padding of the Pager.
+
Description
The background color of the PDFViewer.
$kendo-pager-sm-padding-y$kendo-pdf-viewer-text String$kendo-pager-sm-padding-xvar(--kendo-spacing-1, 0.25rem)$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The vertical padding of the small Pager.
+
Description
The text color of the PDFViewer.
$kendo-pager-md-padding-y$kendo-pdf-viewer-border String$kendo-pager-md-padding-xvar(--kendo-spacing-2, 0.5rem)$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The vertical padding of the medium Pager.
+
Description
The border color of the PDFViewer.
$kendo-pager-lg-padding-y$kendo-pdf-viewer-toolbar-bg String$kendo-pager-lg-padding-xvar(--kendo-spacing-2\.5, 0.625rem)if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .25 ))var(--kendo-color-surface, #f5f5f5)
Description
The vertical padding of the large Pager.
+
Description
The background color of the PDFViewer Toolbar.
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px)$kendo-pdf-viewer-toolbar-textNullnullnull
Description
The minimum width of the items in the small Pager.
+
Description
The text color of the PDFViewer Toolbar.
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(1.4285714286em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)$kendo-pdf-viewer-toolbar-borderNullnullnull
Description
The minimum width of the items in the medium Pagers.
+
Description
The border color of the PDFViewer Toolbar.
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(1.4285714286em + var(--kendo-spacing-2\.5, 0.625rem) * 2 + 2px)$kendo-pdf-viewer-toolbar-gradientNullnullnull
Description
The minimum width of the items in the large Pagers.
+
Description
The gradient of the PDFViewer Toolbar.
$kendo-pager-sm-item-group-spacing$kendo-pdf-viewer-canvas-bg Stringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)$kendo-app-bgvar(--kendo-color-app-surface, #ffffff)
Description
The margin between the item groups in the small Pager.
+
Description
The background color of the PDFViewer canvas.
$kendo-pager-md-item-group-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-pdf-viewer-canvas-textNullnullnull
Description
The margin between the item groups in the medium Pager.
+
Description
The text color of the PDFViewer canvas.
$kendo-pager-lg-item-group-spacingStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)$kendo-pdf-viewer-canvas-borderNullnullnull
Description
The margin between the item groups in the large Pager.
+
Description
The border color of the PDFViewer canvas.
$kendo-pager-border-widthNumber1px1px$kendo-pdf-viewer-page-spacingStringk-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)
Description
The border width of the Pager.
+
Description
The spacing of the PDFViewer page.
$kendo-pager-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)$kendo-pdf-viewer-page-bgColorwhitewhite
Description
The font family of the Pager.
+
Description
The background color of the PDFViewer page.
$kendo-pager-font-size$kendo-pdf-viewer-page-text Stringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The font size of the Pager.
+
Description
The text color of the PDFViewer page.
$kendo-pager-line-height$kendo-pdf-viewer-page-border Stringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The line height of the Pager.
+
Description
The border color of the PDFViewer page.
$kendo-pager-bg$kendo-pdf-viewer-page-shadow String$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The background color of the Pager.
+
Description
The shadow of the PDFViewer page.
$kendo-pager-text$kendo-pdf-viewer-search-panel-padding-x Stringif($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ))var(--kendo-color-subtle, #757575)$kendo-toolbar-md-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The text color of the Pager.
+
Description
The horizontal padding of the PDFViewer search panel.
$kendo-pager-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(var(--kendo-spacing-2, 0.5rem) * 2)
Description
The border color of the Pager.
+
Description
The vertical padding of the PDFViewer search panel.
$kendo-pager-focus-bg$kendo-pdf-viewer-search-panel-spacing Stringif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-pager-bg, .5 ))var(--kendo-color-surface, #f5f5f5)$kendo-toolbar-md-spacingvar(--kendo-spacing-2, 0.5rem)
Description
The background color of the focused Pager.
+
Description
The spacing of the PDFViewer search panel.
$kendo-pager-focus-shadowNullnullnull$kendo-pdf-viewer-search-panel-border-widthNumber1px1px
Description
The box shadow of the focused Pager.
+
Description
The border width of the PDFViewer search panel.
$kendo-pager-section-spacing$kendo-pdf-viewer-search-panel-border-radius String$kendo-pager-padding-xvar(--kendo-spacing-2, 0.5rem)k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The spacing between the Pager sections.
+
Description
The border radius of the PDFViewer search panel.
$kendo-pager-item-border-widthNumber0px0px$kendo-pdf-viewer-search-panel-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The border width of the Pager items.
+
Description
The background color of the PDFViewer search panel.
$kendo-pager-item-border-radiusNumber5em5em$kendo-pdf-viewer-search-panel-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The border radius of the Pager items.
+
Description
The text color of the PDFViewer search panel.
$kendo-pager-item-spacing$kendo-pdf-viewer-search-panel-border Stringk-spacing(0)var(--kendo-spacing-0, 0px)$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The spacing around the Pager items.
+
Description
The border color of the PDFViewer search panel.
$kendo-pager-item-bgNullnullnull$kendo-pdf-viewer-search-panel-shadowString$kendo-window-shadowvar(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))
Description
The background color of the Pager items.
+
Description
The shadow of the PDFViewer search panel.
$kendo-pager-item-textNullnullnull$kendo-pdf-viewer-search-panel-matches-spacingString$kendo-padding-sm-xvar(--kendo-spacing-2, 0.5rem)
Description
The text color of the Pager items.
+
Description
The spacing of the matches container in the PDFViewer search panel.
$kendo-pager-item-borderNullnullnull$kendo-pdf-viewer-selection-line-heightNumber$kendo-line-height-sm1.2
Description
The border color of the Pager items.
+
Description
The line height of the PDFViewer selection.
$kendo-pager-item-hover-bg$kendo-pdf-viewer-search-highlight-bg String$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #ebebeb)$kendo-body-textvar(--kendo-color-on-app-surface, #212121)
Description
The background color of the hovered Pager items.
+
Description
The background color of the PDFViewer highlight.
$kendo-pager-item-hover-text$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow
Description
The background color of the PDFViewer highlight mark.
+
$kendo-pdf-viewer-icon-text String$kendo-pager-text$kendo-dropzone-icon-text var(--kendo-color-subtle, #757575)
Description
The text color of the hovered Pager items.
+
Description
The text color of the PDFViewer icon.
$kendo-pager-item-hover-borderNullnullnull
+ +### Pager + + + + + + + + + + + + + + + + + + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + +
NameTypeDefault valueComputed value
$kendo-pager-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The border color of the hovered Pager items.
+
Description
The horizontal padding of the Pager.
$kendo-pager-item-selected-bg$kendo-pager-sm-padding-x String$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The background color of the selected Pager items.
+
Description
The horizontal padding of the small Pager.
$kendo-pager-item-selected-text$kendo-pager-md-padding-x String$kendo-color-primary-contrastvar(--kendo-color-on-primary, #ffffff)k-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The text color of the selected Pager items.
+
Description
The horizontal padding of the medium Pager.
$kendo-pager-item-selected-borderNullnullnull$kendo-pager-lg-padding-xStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The border color of the selected Pager items.
+
Description
The horizontal padding of the large Pager.
$kendo-pager-number-border-radiusNumber$kendo-pager-item-border-radius5em$kendo-pager-padding-yString$kendo-pager-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The border radius of the Pager numbers.
+
Description
The vertical padding of the Pager.
$kendo-pager-item-focus-opacityNumber.120.12$kendo-pager-sm-padding-yString$kendo-pager-sm-padding-xvar(--kendo-spacing-1, 0.25rem)
Description
The opacity of the focused Pager items.
+
Description
The vertical padding of the small Pager.
$kendo-pager-item-focus-bg$kendo-pager-md-padding-y Stringrgba($kendo-list-item-hover-bg, $kendo-pager-item-focus-opacity)rgba(var(--kendo-color-base-hover, #ebebeb), 0.12)$kendo-pager-md-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The background color of the focused Pager items.
+
Description
The vertical padding of the medium Pager.
$kendo-pager-item-focus-shadowNullnullnull$kendo-pager-lg-padding-yString$kendo-pager-lg-padding-xvar(--kendo-spacing-2\.5, 0.625rem)
Description
The box shadow of the focused Pager items.
+
Description
The vertical padding of the large Pager.
$kendo-pager-input-widthNumber5em5em$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px)
Description
The width of the Inputs in the Pager.
+
Description
The minimum width of the items in the small Pager.
$kendo-pager-sm-dropdown-widthNumber5em5em$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(1.4285714286em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)
Description
The width of the DropDowns in the small Pager.
+
Description
The minimum width of the items in the medium Pagers.
$kendo-pager-md-dropdown-widthNumber5em5em$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc(1.4285714286em + var(--kendo-spacing-2\.5, 0.625rem) * 2 + 2px)
Description
The width of the DropDowns in the medium Pager.
+
Description
The minimum width of the items in the large Pagers.
$kendo-pager-lg-dropdown-widthNumber5em5em$kendo-pager-sm-item-group-spacingStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The width of the DropDowns in the large Pager.
+
Description
The margin between the item groups in the small Pager.
$kendo-pager-sizesMap$kendo-pager-md-item-group-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The margin between the item groups in the medium Pager.
+
$kendo-pager-lg-item-group-spacingStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The margin between the item groups in the large Pager.
+
$kendo-pager-border-widthNumber1px1px
Description
The border width of the Pager.
+
$kendo-pager-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Pager.
+
$kendo-pager-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Pager.
+
$kendo-pager-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Pager.
+
$kendo-pager-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Pager.
+
$kendo-pager-textStringif($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ))var(--kendo-color-subtle, #757575)
Description
The text color of the Pager.
+
$kendo-pager-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Pager.
+
$kendo-pager-focus-bgStringif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-pager-bg, .5 ))var(--kendo-color-surface, #f5f5f5)
Description
The background color of the focused Pager.
+
$kendo-pager-focus-shadowNullnullnull
Description
The box shadow of the focused Pager.
+
$kendo-pager-section-spacingString$kendo-pager-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The spacing between the Pager sections.
+
$kendo-pager-item-border-widthNumber0px0px
Description
The border width of the Pager items.
+
$kendo-pager-item-border-radiusNumber5em5em
Description
The border radius of the Pager items.
+
$kendo-pager-item-spacingStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The spacing around the Pager items.
+
$kendo-pager-item-bgNullnullnull
Description
The background color of the Pager items.
+
$kendo-pager-item-textNullnullnull
Description
The text color of the Pager items.
+
$kendo-pager-item-borderNullnullnull
Description
The border color of the Pager items.
+
$kendo-pager-item-hover-bgString$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered Pager items.
+
$kendo-pager-item-hover-textString$kendo-pager-textvar(--kendo-color-subtle, #757575)
Description
The text color of the hovered Pager items.
+
$kendo-pager-item-hover-borderNullnullnull
Description
The border color of the hovered Pager items.
+
$kendo-pager-item-selected-bgString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The background color of the selected Pager items.
+
$kendo-pager-item-selected-textString$kendo-color-primary-contrastvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected Pager items.
+
$kendo-pager-item-selected-borderNullnullnull
Description
The border color of the selected Pager items.
+
$kendo-pager-number-border-radiusNumber$kendo-pager-item-border-radius5em
Description
The border radius of the Pager numbers.
+
$kendo-pager-item-focus-opacityNumber.120.12
Description
The opacity of the focused Pager items.
+
$kendo-pager-item-focus-bgStringrgba($kendo-list-item-hover-bg, $kendo-pager-item-focus-opacity)rgba(var(--kendo-color-base-hover, #ebebeb), 0.12)
Description
The background color of the focused Pager items.
+
$kendo-pager-item-focus-shadowNullnullnull
Description
The box shadow of the focused Pager items.
+
$kendo-pager-input-widthNumber5em5em
Description
The width of the Inputs in the Pager.
+
$kendo-pager-sm-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the small Pager.
+
$kendo-pager-md-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the medium Pager.
+
$kendo-pager-lg-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the large Pager.
+
$kendo-pager-sizesMap ( sm: ( padding-x: $kendo-pager-sm-padding-x, @@ -16170,1637 +16700,2357 @@ The following table lists the available variables for customizing the Material t
  • sm: "padding-x":"var(--kendo-spacing-1, 0.25rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","item-group-spacing":"var(--kendo-spacing-1\\.5, 0.375rem)","item-min-width":"calc(1.4285714286em + var(--kendo-spacing-1\\.5, 0.375rem) * 2 + 2px)","pager-dropdown-width":"5em"
  • md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","item-group-spacing":"var(--kendo-spacing-2, 0.5rem)","item-min-width":"calc(1.4285714286em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)","pager-dropdown-width":"5em"
  • lg: "padding-x":"var(--kendo-spacing-2\\.5, 0.625rem)","padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","item-group-spacing":"var(--kendo-spacing-2\\.5, 0.625rem)","item-min-width":"calc(1.4285714286em + var(--kendo-spacing-2\\.5, 0.625rem) * 2 + 2px)","pager-dropdown-width":"5em"
Description
The sizes map of the Pager.
+
Description
The sizes map of the Pager.
+
+ +### Palette + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-palette-grayMap$_default-palette-gray
  • 1: #fafafa
  • 2: #f5f5f5
  • 3: #eeeeee
  • 4: #ebebeb
  • 5: #e0e0e0
  • 6: #d6d6d6
  • 7: #c7c7c7
  • 8: #c2c2c2
  • 9: #bdbdbd
  • 10: #adadad
  • 11: #9e9e9e
  • 12: #757575
  • 13: #616161
  • 14: #424242
  • 15: #212121
  • white: #ffffff
  • black: #000000
Description
The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
+
$kendo-palette-indigoMap$_default-palette-indigo
  • 1: #f0f1fa
  • 2: #e7eaf6
  • 3: #e0e3f3
  • 4: #d1d5ee
  • 5: #c5cae8
  • 6: #b5bde3
  • 7: #97a0d7
  • 8: #3f51b5
  • 9: #3a4ba7
  • 10: #37479f
  • 11: #354498
  • 12: #324191
  • 13: #303e8a
  • 14: #20295b
  • 15: #161c3f
Description
The Indigo Palette provides colors to the Primary variable group.
+
$kendo-palette-pinkMap$_default-palette-pink
  • 1: #ffeef3
  • 2: #fde5ec
  • 3: #fddee5
  • 4: #fbcdd9
  • 5: #f9afc3
  • 6: #f79bb3
  • 7: #f58da9
  • 8: #e51a5f
  • 9: #d31857
  • 10: #ca1754
  • 11: #c01650
  • 12: #b7154c
  • 13: #ae1549
  • 14: #730f2f
  • 15: #500c22
Description
The Pink Palette provides colors to the Secondary variable group.
+
$kendo-palette-dark-tealMap$_default-palette-dark-teal
  • 1: #eef3f2
  • 2: #e3eceb
  • 3: #dae7e5
  • 4: #c9dbd8
  • 5: #a9c6c1
  • 6: #92b8b1
  • 7: #84aea7
  • 8: #00695c
  • 9: #006155
  • 10: #005c51
  • 11: #00584d
  • 12: #00544a
  • 13: #054f46
  • 14: #00352e
  • 15: #002520
Description
The Dark Teal Palette provides colors to the Tertiary variable group.
+
$kendo-palette-redMap$_default-palette-red
  • 1: #ffeeed
  • 2: #ffe6e3
  • 3: #fddad6
  • 4: #fcc7c2
  • 5: #feafa8
  • 6: #fe9a91
  • 7: #fc8d83
  • 8: #f31700
  • 9: #e01701
  • 10: #d51504
  • 11: #cc1505
  • 12: #c21505
  • 13: #b91406
  • 14: #790f08
  • 15: #550c07
Description
The Red Palette provides colors to the Error variable group.
+
$kendo-palette-blueMap$_default-palette-blue
  • 1: #edf2fe
  • 2: #e2eafd
  • 3: #dae4fc
  • 4: #c8d7fb
  • 5: #a7c0f7
  • 6: #8fb0f6
  • 7: #80a5f4
  • 8: #0058e9
  • 9: #0251d6
  • 10: #054dcc
  • 11: #034ac3
  • 12: #0447ba
  • 13: #0443b0
  • 14: #072c74
  • 15: #071f51
Description
The Blue Palette provides colors to the Info variable group.
+
$kendo-palette-greenMap$_default-palette-green
  • 1: #f1f9ee
  • 2: #e8f5e4
  • 3: #e2f2dc
  • 4: #d7f0cc
  • 5: #bae2ad
  • 6: #a7db97
  • 7: #93d775
  • 8: #37b400
  • 9: #33a600
  • 10: #319e03
  • 11: #2e9704
  • 12: #2c9005
  • 13: #2b8906
  • 14: #1d5a08
  • 15: #163f09
Description
The Green Palette provides colors to the Success variable group.
+
$kendo-palette-yellowMap$_default-palette-yellow
  • 1: #fffbef
  • 2: #fef7e6
  • 3: #fff4df
  • 4: #fff0ce
  • 5: #ffe7b0
  • 6: #ffe19c
  • 7: #ffdd8f
  • 8: #ffc000
  • 9: #ebb201
  • 10: #dfa903
  • 11: #d6a202
  • 12: #cb9a07
  • 13: #c19207
  • 14: #7f600b
  • 15: #59430a
Description
The Yellow Palette provides colors to the Warning variable group.
+
$kendo-palette-deep-purpleMap$_default-palette-deep-purple
  • 1: #f5e9f7
  • 2: #e6c9eb
  • 3: #d9ade1
  • 4: #cd93d7
  • 5: #c075cc
  • 6: #b55dc4
  • 7: #a841b9
  • 8: #9c27b0
  • 9: #89229b
  • 10: #751d84
  • 11: #641971
  • 12: #4e1458
  • 13: #3b0f43
  • 14: #270a2c
  • 15: #100412
Description
The Deep Purple provides colors to the Series A variable group.
+
$kendo-palette-baby-blueMap$_default-palette-baby-blue
  • 1: #e9f4fe
  • 2: #c7e5fc
  • 3: #abd7fa
  • 4: #90cbf9
  • 5: #71bcf7
  • 6: #59b0f6
  • 7: #3ca3f4
  • 8: #2196f3
  • 9: #1d84d6
  • 10: #1971b6
  • 11: #15609c
  • 12: #114b7a
  • 13: #0d395c
  • 14: #08263d
  • 15: #030f18
Description
The Baby Blue provides colors to the Series B variable group.
+
$kendo-palette-tealMap$_default-palette-teal
  • 1: #e5f4f3
  • 2: #bfe5e1
  • 3: #9ed7d2
  • 4: #80cbc4
  • 5: #5cbcb3
  • 6: #40b0a6
  • 7: #1fa396
  • 8: #009688
  • 9: #008478
  • 10: #007166
  • 11: #006057
  • 12: #004b44
  • 13: #003934
  • 14: #002622
  • 15: #030f18
Description
The Teal provides colors to the Tertiary and Series C variable groups.
+
$kendo-palette-canary-yellowMap$_default-palette-canary-yellow
  • 1: #fffdeb
  • 2: #ffface
  • 3: #fff7b5
  • 4: #fff59d
  • 5: #fff282
  • 6: #fff06c
  • 7: #ffed53
  • 8: #ffeb3b
  • 9: #e0cf34
  • 10: #bfb02c
  • 11: #a39626
  • 12: #80761e
  • 13: #615916
  • 14: #403b0f
  • 15: #1a1806
Description
The Canary Yellow provides colors to the Series D variable group.
+
$kendo-palette-candy-redMap$_default-palette-candy-red
  • 1: #feeceb
  • 2: #fcd0cd
  • 3: #fbb8b3
  • 4: #faa19b
  • 5: #f8877e
  • 6: #f77268
  • 7: #f55a4e
  • 8: #f44336
  • 9: #d73b30
  • 10: #b73229
  • 11: #9c2b23
  • 12: #7a221b
  • 13: #5d1915
  • 14: #3d110e
  • 15: #180705
Description
The Canary Red provides colors to the Series E variable group.
+
$kendo-palette-forest-greenMap$_default-palette-forest-green
  • 1: #edf7ed
  • 2: #d2ebd3
  • 3: #bbe1bc
  • 4: #a6d7a8
  • 5: #8ccc8f
  • 6: #79c37c
  • 7: #61b965
  • 8: #4caf50
  • 9: #439a46
  • 10: #39833c
  • 11: #317033
  • 12: #265828
  • 13: #1d431e
  • 14: #132c14
  • 15: #081208
Description
The Forest Green provides colors to the Series F variable group.
+
+ +### Panel + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-panel-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Panel.
+
$kendo-panel-border-widthNumber1px1px
Description
The width of the border around the Panel.
+
$kendo-panel-border-styleStringsolidsolid
Description
The style of the border around the Panel.
+
$kendo-panel-header-padding-inlineStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The inline padding of the Panel header.
+
$kendo-panel-header-padding-blockStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The block padding of the Panel header.
+
$kendo-panel-content-padding-inlineStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The inline padding of the Panel content.
+
$kendo-panel-content-padding-blockStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The block padding of the Panel content.
+
$kendo-panel-textStringvar(--kendo-component-text, #{$kendo-component-text})var(--kendo-component-text, var(--kendo-color-on-app-surface, #212121))
Description
The text color of the Panel.
+
$kendo-panel-bgStringvar(--kendo-component-bg, #{$kendo-component-bg})var(--kendo-component-bg, var(--kendo-color-surface-alt, #ffffff))
Description
The background color of the Panel.
+
$kendo-panel-borderStringvar(--kendo-component-border, #{$kendo-component-border})var(--kendo-component-border, var(--kendo-color-border, rgba(0, 0, 0, 0.12)))
Description
The color of the border around the Panel.
+
+ +### Panelbar + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - -
NameTypeDefault valueComputed value
$kendo-panelbar-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the PanelBar.
+
$kendo-panelbar-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the PanelBar.
+
$kendo-panelbar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the PanelBar.
+
$kendo-panelbar-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the PanelBar.
+
$kendo-panelbar-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the PanelBar.
+
$kendo-panelbar-border-widthNumber1px1px
Description
The width of the border around the PanelBar.
+
$kendo-panelbar-border-styleStringsolidsolid
Description
The border style around the the PanelBar.
+
$kendo-panelbar-item-border-widthNumber1px1px
Description
The width of the border around the PanelBar items.
+
$kendo-panelbar-item-border-styleStringsolidsolid
Description
The style of the border around the PanelBar items.
+
$kendo-panelbar-header-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the PanelBar header.
+
$kendo-panelbar-header-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the PanelBar header.
+
$kendo-panelbar-item-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the PanelBar items.
+
$kendo-panelbar-item-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the PanelBar items.
+
$kendo-panelbar-item-level-countNumber44
Description
The maximum nesting of the PanelBar items.
+
$kendo-panelbar-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PanelBar.
+
$kendo-panelbar-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the PanelBar.
+
$kendo-panelbar-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the PanelBar.
+
$kendo-panelbar-header-bgString$kendo-panelbar-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PanelBar header.
+
$kendo-panelbar-header-textString$kendo-link-textvar(--kendo-color-secondary, #e51a5f)
Description
The text color of the PanelBar header.
+
$kendo-panelbar-header-borderNullnullnull
Description
The border color of the PanelBar header.
+
$kendo-panelbar-header-gradientNullnullnull
Description
The gradient of the PanelBar header.
+
$kendo-panelbar-header-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 ))var(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered PanelBar header.
+
$kendo-panelbar-header-hover-textNullnullnull
Description
The text color of the hovered PanelBar header.
+
$kendo-panelbar-header-hover-borderNullnullnull
Description
The border color of the hovered PanelBar header.
- -### Palette - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-palette-grayMap$_default-palette-gray
  • 1: #fafafa
  • 2: #f5f5f5
  • 3: #eeeeee
  • 4: #ebebeb
  • 5: #e0e0e0
  • 6: #d6d6d6
  • 7: #c7c7c7
  • 8: #c2c2c2
  • 9: #bdbdbd
  • 10: #adadad
  • 11: #9e9e9e
  • 12: #757575
  • 13: #616161
  • 14: #424242
  • 15: #212121
  • white: #ffffff
  • black: #000000
$kendo-panelbar-header-hover-gradientNullnullnull
Description
The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
+
Description
The gradient of the hovered PanelBar header.
$kendo-palette-indigoMap$_default-palette-indigo
  • 1: #f0f1fa
  • 2: #e7eaf6
  • 3: #e0e3f3
  • 4: #d1d5ee
  • 5: #c5cae8
  • 6: #b5bde3
  • 7: #97a0d7
  • 8: #3f51b5
  • 9: #3a4ba7
  • 10: #37479f
  • 11: #354498
  • 12: #324191
  • 13: #303e8a
  • 14: #20295b
  • 15: #161c3f
$kendo-panelbar-header-focus-bgStringif($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 1.5 ))var(--kendo-color-base-active, #d6d6d6)
Description
The Indigo Palette provides colors to the Primary variable group.
+
Description
The background color of the focused PanelBar header.
$kendo-palette-pinkMap$_default-palette-pink
  • 1: #ffeef3
  • 2: #fde5ec
  • 3: #fddee5
  • 4: #fbcdd9
  • 5: #f9afc3
  • 6: #f79bb3
  • 7: #f58da9
  • 8: #e51a5f
  • 9: #d31857
  • 10: #ca1754
  • 11: #c01650
  • 12: #b7154c
  • 13: #ae1549
  • 14: #730f2f
  • 15: #500c22
$kendo-panelbar-header-focus-textNullnullnull
Description
The Pink Palette provides colors to the Secondary variable group.
+
Description
The text color of the focused PanelBar header.
+
$kendo-panelbar-header-focus-borderNullnullnull
Description
The border color of the focused PanelBar header.
+
$kendo-panelbar-header-focus-gradientNullnullnull
Description
The gradient of the focused PanelBar header.
+
$kendo-panelbar-header-focus-shadowNullnullnull
Description
The shadow of the focused PanelBar header.
+
$kendo-panelbar-header-hover-focus-bgStringif($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 2 ))var(--kendo-color-base-active, #d6d6d6)
Description
The background color of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-hover-focus-textNullnullnull
Description
The text color of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-hover-focus-borderNullnullnull
Description
The border color of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-hover-focus-gradientNullnullnull
Description
The gradient of the focused and hovered PanelBar header.
+
$kendo-panelbar-header-selected-bgString$kendo-selected-bgvar(--kendo-color-secondary, #e51a5f)
Description
The background color of the selected PanelBar header.
+
$kendo-panelbar-header-selected-textString$kendo-selected-textvar(--kendo-color-on-secondary, #ffffff)
Description
The text color of the selected PanelBar header.
+
$kendo-panelbar-header-selected-borderNullnullnull
Description
The border color of the selected PanelBar header.
+
$kendo-panelbar-header-selected-gradientNullnullnull
Description
The gradient of the selected PanelBar header.
+
$kendo-panelbar-header-selected-hover-bgStringif($kendo-enable-color-system, k-color( secondary-hover ), k-try-tint($kendo-panelbar-header-selected-bg, .95))var(--kendo-color-secondary-hover, #d31857)
Description
The background color of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-hover-textNullnullnull
Description
The text color of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-hover-borderNullnullnull
Description
The border color of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-hover-gradientNullnullnull
Description
The gradient of the selected and hovered PanelBar header.
+
$kendo-panelbar-header-selected-focus-bgStringif($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-header-selected-bg, 3))var(--kendo-color-secondary-active, #c01650)
Description
The background color of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-focus-textNullnullnull
Description
The text color of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-focus-borderNullnullnull
Description
The border color of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-focus-gradientNullnullnull
Description
The gradient of the selected and focused PanelBar header.
+
$kendo-panelbar-header-selected-hover-focus-bgStringif($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-header-selected-bg, 3.95))var(--kendo-color-secondary-active, #c01650)
Description
The background color of the selected, hovered and focused PanelBar header.
$kendo-palette-dark-tealMap$_default-palette-dark-teal
  • 1: #eef3f2
  • 2: #e3eceb
  • 3: #dae7e5
  • 4: #c9dbd8
  • 5: #a9c6c1
  • 6: #92b8b1
  • 7: #84aea7
  • 8: #00695c
  • 9: #006155
  • 10: #005c51
  • 11: #00584d
  • 12: #00544a
  • 13: #054f46
  • 14: #00352e
  • 15: #002520
$kendo-panelbar-header-selected-hover-focus-textNullnullnull
Description
The Dark Teal Palette provides colors to the Tertiary variable group.
+
Description
The text color of the selected, hovered and focused PanelBar header.
$kendo-palette-redMap$_default-palette-red
  • 1: #ffeeed
  • 2: #ffe6e3
  • 3: #fddad6
  • 4: #fcc7c2
  • 5: #feafa8
  • 6: #fe9a91
  • 7: #fc8d83
  • 8: #f31700
  • 9: #e01701
  • 10: #d51504
  • 11: #cc1505
  • 12: #c21505
  • 13: #b91406
  • 14: #790f08
  • 15: #550c07
$kendo-panelbar-header-selected-hover-focus-borderNullnullnull
Description
The Red Palette provides colors to the Error variable group.
+
Description
The border color of the selected, hovered and focused PanelBar header.
$kendo-palette-blueMap$_default-palette-blue
  • 1: #edf2fe
  • 2: #e2eafd
  • 3: #dae4fc
  • 4: #c8d7fb
  • 5: #a7c0f7
  • 6: #8fb0f6
  • 7: #80a5f4
  • 8: #0058e9
  • 9: #0251d6
  • 10: #054dcc
  • 11: #034ac3
  • 12: #0447ba
  • 13: #0443b0
  • 14: #072c74
  • 15: #071f51
$kendo-panelbar-header-selected-hover-focus-gradientNullnullnull
Description
The Blue Palette provides colors to the Info variable group.
+
Description
The gradient of the selected, hovered and focused PanelBar header.
$kendo-palette-greenMap$_default-palette-green
  • 1: #f1f9ee
  • 2: #e8f5e4
  • 3: #e2f2dc
  • 4: #d7f0cc
  • 5: #bae2ad
  • 6: #a7db97
  • 7: #93d775
  • 8: #37b400
  • 9: #33a600
  • 10: #319e03
  • 11: #2e9704
  • 12: #2c9005
  • 13: #2b8906
  • 14: #1d5a08
  • 15: #163f09
$kendo-panelbar-item-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 ))var(--kendo-color-base-hover, #ebebeb)
Description
The Green Palette provides colors to the Success variable group.
+
Description
The background color of the hovered PanelBar items.
$kendo-palette-yellowMap$_default-palette-yellow
  • 1: #fffbef
  • 2: #fef7e6
  • 3: #fff4df
  • 4: #fff0ce
  • 5: #ffe7b0
  • 6: #ffe19c
  • 7: #ffdd8f
  • 8: #ffc000
  • 9: #ebb201
  • 10: #dfa903
  • 11: #d6a202
  • 12: #cb9a07
  • 13: #c19207
  • 14: #7f600b
  • 15: #59430a
$kendo-panelbar-item-hover-textNullnullnull
Description
The Yellow Palette provides colors to the Warning variable group.
+
Description
The text color of the hovered PanelBar items.
$kendo-palette-deep-purpleMap$_default-palette-deep-purple
  • 1: #f5e9f7
  • 2: #e6c9eb
  • 3: #d9ade1
  • 4: #cd93d7
  • 5: #c075cc
  • 6: #b55dc4
  • 7: #a841b9
  • 8: #9c27b0
  • 9: #89229b
  • 10: #751d84
  • 11: #641971
  • 12: #4e1458
  • 13: #3b0f43
  • 14: #270a2c
  • 15: #100412
$kendo-panelbar-item-hover-borderNullnullnull
Description
The Deep Purple provides colors to the Series A variable group.
+
Description
The border color of the hovered PanelBar items.
$kendo-palette-baby-blueMap$_default-palette-baby-blue
  • 1: #e9f4fe
  • 2: #c7e5fc
  • 3: #abd7fa
  • 4: #90cbf9
  • 5: #71bcf7
  • 6: #59b0f6
  • 7: #3ca3f4
  • 8: #2196f3
  • 9: #1d84d6
  • 10: #1971b6
  • 11: #15609c
  • 12: #114b7a
  • 13: #0d395c
  • 14: #08263d
  • 15: #030f18
$kendo-panelbar-item-hover-gradientNullnullnull
Description
The Baby Blue provides colors to the Series B variable group.
+
Description
The gradient of the hovered PanelBar items.
$kendo-palette-tealMap$_default-palette-teal
  • 1: #e5f4f3
  • 2: #bfe5e1
  • 3: #9ed7d2
  • 4: #80cbc4
  • 5: #5cbcb3
  • 6: #40b0a6
  • 7: #1fa396
  • 8: #009688
  • 9: #008478
  • 10: #007166
  • 11: #006057
  • 12: #004b44
  • 13: #003934
  • 14: #002622
  • 15: #030f18
$kendo-panelbar-item-focus-bgStringif($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 1.5 ))var(--kendo-color-base-active, #d6d6d6)
Description
The Teal provides colors to the Tertiary and Series C variable groups.
+
Description
The background color of the focused PanelBar items.
$kendo-palette-canary-yellowMap$_default-palette-canary-yellow
  • 1: #fffdeb
  • 2: #ffface
  • 3: #fff7b5
  • 4: #fff59d
  • 5: #fff282
  • 6: #fff06c
  • 7: #ffed53
  • 8: #ffeb3b
  • 9: #e0cf34
  • 10: #bfb02c
  • 11: #a39626
  • 12: #80761e
  • 13: #615916
  • 14: #403b0f
  • 15: #1a1806
$kendo-panelbar-item-focus-textNullnullnull
Description
The Canary Yellow provides colors to the Series D variable group.
+
Description
The text color of the focused PanelBar items.
$kendo-palette-candy-redMap$_default-palette-candy-red
  • 1: #feeceb
  • 2: #fcd0cd
  • 3: #fbb8b3
  • 4: #faa19b
  • 5: #f8877e
  • 6: #f77268
  • 7: #f55a4e
  • 8: #f44336
  • 9: #d73b30
  • 10: #b73229
  • 11: #9c2b23
  • 12: #7a221b
  • 13: #5d1915
  • 14: #3d110e
  • 15: #180705
$kendo-panelbar-item-focus-borderNullnullnull
Description
The Canary Red provides colors to the Series E variable group.
+
Description
The border color of the focused PanelBar items.
$kendo-palette-forest-greenMap$_default-palette-forest-green
  • 1: #edf7ed
  • 2: #d2ebd3
  • 3: #bbe1bc
  • 4: #a6d7a8
  • 5: #8ccc8f
  • 6: #79c37c
  • 7: #61b965
  • 8: #4caf50
  • 9: #439a46
  • 10: #39833c
  • 11: #317033
  • 12: #265828
  • 13: #1d431e
  • 14: #132c14
  • 15: #081208
$kendo-panelbar-item-focus-gradientNullnullnull
Description
The Forest Green provides colors to the Series F variable group.
+
Description
The gradient of the focused PanelBar items.
- -### Panel - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - -
NameTypeDefault valueComputed value
$kendo-panel-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
$kendo-panelbar-item-focus-shadowNullnullnull
Description
The border radius of the Panel.
+
Description
The box shadow of the focused PanelBar items.
$kendo-panel-border-widthNumber1px1px$kendo-panelbar-item-hover-focus-bgStringif($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 2 ))var(--kendo-color-base-active, #d6d6d6)
Description
The width of the border around the Panel.
+
Description
The background color of the focused and hovered PanelBar items.
$kendo-panel-border-styleStringsolidsolid$kendo-panelbar-item-hover-focus-textNullnullnull
Description
The style of the border around the Panel.
+
Description
The text color of the focused and hovered PanelBar items.
$kendo-panel-header-padding-inlineStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-panelbar-item-hover-focus-borderNullnullnull
Description
The inline padding of the Panel header.
+
Description
The border color of the focused and hovered PanelBar items.
$kendo-panel-header-padding-blockStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)$kendo-panelbar-item-hover-focus-gradientNullnullnull
Description
The block padding of the Panel header.
+
Description
The gradient of the focused and hovered PanelBar items.
$kendo-panel-content-padding-inline$kendo-panelbar-item-selected-bg Stringk-spacing(2)var(--kendo-spacing-2, 0.5rem)$kendo-selected-bgvar(--kendo-color-secondary, #e51a5f)
Description
The inline padding of the Panel content.
+
Description
The background color of the selected PanelBar items.
$kendo-panel-content-padding-block$kendo-panelbar-item-selected-text Stringk-spacing(1)var(--kendo-spacing-1, 0.25rem)$kendo-selected-textvar(--kendo-color-on-secondary, #ffffff)
Description
The block padding of the Panel content.
+
Description
The text color of the selected PanelBar items.
$kendo-panel-textStringvar(--kendo-component-text, #{$kendo-component-text})var(--kendo-component-text, var(--kendo-color-on-app-surface, #212121))$kendo-panelbar-item-selected-borderNullnullnull
Description
The text color of the Panel.
+
Description
The border color of the selected PanelBar items.
$kendo-panel-bgStringvar(--kendo-component-bg, #{$kendo-component-bg})var(--kendo-component-bg, var(--kendo-color-surface-alt, #ffffff))$kendo-panelbar-item-selected-gradientNullnullnull
Description
The background color of the Panel.
+
Description
The gradient of the selected PanelBar items.
$kendo-panel-border$kendo-panelbar-item-selected-hover-bg Stringvar(--kendo-component-border, #{$kendo-component-border})var(--kendo-component-border, var(--kendo-color-border, rgba(0, 0, 0, 0.12)))if($kendo-enable-color-system, k-color( secondary-hover ), k-try-tint($kendo-panelbar-item-selected-bg, .95))var(--kendo-color-secondary-hover, #d31857)
Description
The color of the border around the Panel.
+
Description
The background color of the selected and hovered PanelBar items.
- -### Panelbar - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-panelbar-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
$kendo-panelbar-item-selected-hover-textNullnullnull
Description
The horizontal padding of the PanelBar.
+
Description
The text color of the selected and hovered PanelBar items.
$kendo-panelbar-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)$kendo-panelbar-item-selected-hover-borderNullnullnull
Description
The vertical padding of the PanelBar.
+
Description
The border color of the selected and hovered PanelBar items.
$kendo-panelbar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)$kendo-panelbar-item-selected-hover-gradientNullnullnull
Description
The font family of the PanelBar.
+
Description
The gradient of the selected and hovered PanelBar items.
$kendo-panelbar-font-size$kendo-panelbar-item-selected-focus-bg Stringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-item-selected-bg, 3))var(--kendo-color-secondary-active, #c01650)
Description
The font size of the PanelBar.
+
Description
The background color of the selected and focused PanelBar items.
$kendo-panelbar-line-heightNumberk-math-div( 20, 14 )1.4285714286$kendo-panelbar-item-selected-focus-textNullnullnull
Description
The line height of the PanelBar.
+
Description
The text color of the selected and focused PanelBar items.
$kendo-panelbar-border-widthNumber1px1px$kendo-panelbar-item-selected-focus-borderNullnullnull
Description
The width of the border around the PanelBar.
+
Description
The border color of the selected and focused PanelBar items.
$kendo-panelbar-border-styleStringsolidsolid$kendo-panelbar-item-selected-focus-gradientNullnullnull
Description
The border style around the the PanelBar.
+
Description
The gradient of the selected and focused PanelBar items.
$kendo-panelbar-item-border-widthNumber1px1px$kendo-panelbar-item-selected-hover-focus-bgStringif($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-item-selected-bg, 3.95))var(--kendo-color-secondary-active, #c01650)
Description
The width of the border around the PanelBar items.
+
Description
The background color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-border-styleStringsolidsolid$kendo-panelbar-item-selected-hover-focus-textNullnullnull
Description
The style of the border around the PanelBar items.
+
Description
The text color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-header-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)$kendo-panelbar-item-selected-hover-focus-borderNullnullnull
Description
The horizontal padding of the PanelBar header.
+
Description
The border color of the selected, hovered and focused PanelBar items.
$kendo-panelbar-header-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)$kendo-panelbar-item-selected-hover-focus-gradientNullnullnull
Description
The vertical padding of the PanelBar header.
+
Description
The gradient of the selected, hovered and focused PanelBar items.
$kendo-panelbar-item-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)$kendo-panelbar-header-expanded-bgNullnullnull
Description
The horizontal padding of the PanelBar items.
+
Description
The background color of the expanded PanelBar header.
$kendo-panelbar-item-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)$kendo-panelbar-header-expanded-textNullnullnull
Description
The vertical padding of the PanelBar items.
+
Description
The text color of the expanded PanelBar header.
$kendo-panelbar-item-level-countNumber44$kendo-panelbar-header-expanded-borderNullnullnull
Description
The maximum nesting of the PanelBar items.
+
Description
The border color of the expanded PanelBar header.
$kendo-panelbar-bg$kendo-panelbar-header-expanded-gradientNullnullnull
Description
The gradient of the expanded PanelBar header.
+
+ +### Picker + + + + + + + + + + + + + + + + + + - - + + - - + - + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - + - - + - + - - + - - + + - - + - - + - + - - + + + + + + + + + + - - + - - + + - - + - - + - + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + - - + - - + - - + + - - + - - + + - - + - - + - - + - - + + - - - - - + + + + - - + - - + + + + + + + + + + - - - - - + + + + - - + - - + - - + - - + - - + + - - - - - + + + + - - + - - + - - - - - + + + + - - + - - - - - + + + + - - + - - - - - + + + + - - + - - + - + + +
NameTypeDefault valueComputed value
$kendo-picker-bg String$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)$kendo-input-bgvar(--kendo-color-surface, #f5f5f5)
Description
The background color of the PanelBar.
+
Description
The background color of the Picker components.
$kendo-panelbar-text$kendo-picker-text String$kendo-component-text$kendo-input-text var(--kendo-color-on-app-surface, #212121)
Description
The text color of the PanelBar.
+
Description
The text color of the Picker components.
$kendo-panelbar-border$kendo-picker-border String$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))$kendo-input-bordercolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 44%, transparent)
Description
The border color of the PanelBar.
+
Description
The border color of the Picker components.
$kendo-panelbar-header-bgString$kendo-panelbar-bgvar(--kendo-color-surface-alt, #ffffff)$kendo-picker-gradientNullnullnull
Description
The background color of the PanelBar header.
+
Description
The gradient of the Picker components.
$kendo-panelbar-header-textString$kendo-link-textvar(--kendo-color-secondary, #e51a5f)$kendo-picker-shadowNull$kendo-input-shadownull
Description
The text color of the PanelBar header.
+
Description
The shadow of the Picker components.
$kendo-panelbar-header-border$kendo-picker-hover-bg Nullnull$kendo-input-hover-bg null
Description
The border color of the PanelBar header.
+
Description
The background color of the hovered Picker components.
$kendo-panelbar-header-gradient$kendo-picker-hover-text Nullnull$kendo-input-hover-text null
Description
The gradient of the PanelBar header.
+
Description
The text color of the hovered Picker components.
$kendo-panelbar-header-hover-bg$kendo-picker-hover-border Stringif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 ))var(--kendo-color-base-hover, #ebebeb)$kendo-input-hover-bordervar(--kendo-color-on-app-surface, #212121)
Description
The background color of the hovered PanelBar header.
+
Description
The border color of the hovered Picker components.
$kendo-panelbar-header-hover-text$kendo-picker-hover-gradient Null null null
Description
The text color of the hovered PanelBar header.
+
Description
The gradient of the hovered Picker components.
$kendo-panelbar-header-hover-border$kendo-picker-hover-shadow Nullnull$kendo-input-hover-shadow null
Description
The border color of the hovered PanelBar header.
+
Description
The shadow of the hovered Picker components.
$kendo-panelbar-header-hover-gradient$kendo-picker-focus-bg Null$kendo-input-focus-bg null
Description
The background color of the focused Picker components.
+
$kendo-picker-focus-textNull$kendo-input-focus-text null
Description
The gradient of the hovered PanelBar header.
+
Description
The text color of the focused Picker components.
$kendo-panelbar-header-focus-bg$kendo-picker-focus-border Stringif($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 1.5 ))var(--kendo-color-base-active, #d6d6d6)$kendo-input-focus-bordervar(--kendo-color-primary, #3f51b5)
Description
The background color of the focused PanelBar header.
+
Description
The border color of the focused Picker components.
$kendo-panelbar-header-focus-text$kendo-picker-focus-gradient Null null null
Description
The text color of the focused PanelBar header.
+
Description
The gradient of the focused Picker components.
$kendo-panelbar-header-focus-border$kendo-picker-focus-shadow Nullnull$kendo-input-focus-shadow null
Description
The border color of the focused PanelBar header.
+
Description
The shadow of the focused Picker components.
$kendo-panelbar-header-focus-gradientNullnullnull$kendo-picker-disabled-bgString$kendo-input-disabled-bgcolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 3%, transparent)
Description
The gradient of the focused PanelBar header.
+
Description
The background color of the disabled Picker components.
$kendo-panelbar-header-focus-shadowNullnullnull$kendo-picker-disabled-textString$kendo-input-disabled-textcolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 27%, transparent)
Description
The shadow of the focused PanelBar header.
+
Description
The text color of the disabled Picker components.
$kendo-panelbar-header-hover-focus-bg$kendo-picker-disabled-border Stringif($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 2 ))var(--kendo-color-base-active, #d6d6d6)$kendo-input-disabled-bordercolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 3%, transparent)
Description
The background color of the focused and hovered PanelBar header.
+
Description
The border color of the disabled Picker components.
$kendo-panelbar-header-hover-focus-text$kendo-picker-disabled-gradient Null null null
Description
The text color of the focused and hovered PanelBar header.
+
Description
The gradient of the disabled Picker components.
$kendo-panelbar-header-hover-focus-border$kendo-picker-disabled-shadow Null null null
Description
The border color of the focused and hovered PanelBar header.
+
Description
The shadow of the disabled Picker components.
$kendo-panelbar-header-hover-focus-gradient$kendo-picker-outline-bg Null null null
Description
The gradient of the focused and hovered PanelBar header.
+
Description
The background color of the outline Picker components.
$kendo-panelbar-header-selected-bg$kendo-picker-outline-text String$kendo-selected-bgvar(--kendo-color-secondary, #e51a5f)$kendo-picker-textvar(--kendo-color-on-app-surface, #212121)
Description
The background color of the selected PanelBar header.
+
Description
The text color of the outline Picker components.
$kendo-panelbar-header-selected-text$kendo-picker-outline-border String$kendo-selected-textvar(--kendo-color-on-secondary, #ffffff)$kendo-picker-bordercolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 44%, transparent)
Description
The text color of the selected PanelBar header.
+
Description
The border color of the outline Picker components.
$kendo-panelbar-header-selected-border$kendo-picker-outline-hover-bg Null null null
Description
The border color of the selected PanelBar header.
+
Description
The background color of the outline hovered Picker components.
$kendo-panelbar-header-selected-gradient$kendo-picker-outline-hover-text Null null null
Description
The gradient of the selected PanelBar header.
+
Description
The text color of the outline hovered Picker components.
$kendo-panelbar-header-selected-hover-bg$kendo-picker-outline-hover-border Stringif($kendo-enable-color-system, k-color( secondary-hover ), k-try-tint($kendo-panelbar-header-selected-bg, .95))var(--kendo-color-secondary-hover, #d31857)$kendo-picker-hover-bordervar(--kendo-color-on-app-surface, #212121)
Description
The background color of the selected and hovered PanelBar header.
+
Description
The border color of the outline hovered Picker components.
$kendo-panelbar-header-selected-hover-textNullnullnull$kendo-picker-outline-focus-bgStringnulnul
Description
The text color of the selected and hovered PanelBar header.
+
Description
The background color of the outline focused Picker components.
$kendo-panelbar-header-selected-hover-border$kendo-picker-outline-focus-text Null null null
Description
The border color of the selected and hovered PanelBar header.
+
Description
The text color of the outline focused Picker components.
$kendo-panelbar-header-selected-hover-gradient$kendo-picker-outline-focus-borderString$kendo-picker-focus-bordervar(--kendo-color-primary, #3f51b5)
Description
The border color of the outline focused Picker components.
+
$kendo-picker-outline-focus-shadow Null null null
Description
The gradient of the selected and hovered PanelBar header.
+
Description
The shadow of the outline focused Picker components.
$kendo-panelbar-header-selected-focus-bgStringif($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-header-selected-bg, 3))var(--kendo-color-secondary-active, #c01650)$kendo-picker-outline-hover-focus-bgNullnullnull
Description
The background color of the selected and focused PanelBar header.
+
Description
The background color of the outline hovered and focused Picker components.
$kendo-panelbar-header-selected-focus-text$kendo-picker-outline-hover-focus-text Null null null
Description
The text color of the selected and focused PanelBar header.
+
Description
The text color of the outline hovered and focused Picker components.
$kendo-panelbar-header-selected-focus-border$kendo-picker-outline-hover-focus-border Null null null
Description
The border color of the selected and focused PanelBar header.
+
Description
The border color of the outline hovered and focused Picker components.
$kendo-panelbar-header-selected-focus-gradient$kendo-picker-flat-bg Null null null
Description
The gradient of the selected and focused PanelBar header.
+
Description
The background color of the flat Picker components.
$kendo-panelbar-header-selected-hover-focus-bg$kendo-picker-flat-text Stringif($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-header-selected-bg, 3.95))var(--kendo-color-secondary-active, #c01650)$kendo-picker-textvar(--kendo-color-on-app-surface, #212121)
Description
The background color of the selected, hovered and focused PanelBar header.
+
Description
The text color of the flat Picker components.
$kendo-panelbar-header-selected-hover-focus-textNullnullnull$kendo-picker-flat-borderString$kendo-picker-bordercolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 44%, transparent)
Description
The text color of the selected, hovered and focused PanelBar header.
+
Description
The border color of the flat Picker components.
$kendo-panelbar-header-selected-hover-focus-border$kendo-picker-flat-hover-bg Null null null
Description
The border color of the selected, hovered and focused PanelBar header.
+
Description
The background color of the flat hovered Picker components.
$kendo-panelbar-header-selected-hover-focus-gradient$kendo-picker-flat-hover-text Null null null
Description
The gradient of the selected, hovered and focused PanelBar header.
+
Description
The text color of the flat hovered Picker components.
$kendo-panelbar-item-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 ))var(--kendo-color-base-hover, #ebebeb)$kendo-picker-flat-focus-bgNullnullnull
Description
The background color of the hovered PanelBar items.
+
Description
The background color of the flat focused Picker components.
$kendo-panelbar-item-hover-text$kendo-picker-flat-focus-text Null null null
Description
The text color of the hovered PanelBar items.
+
Description
The text color of the flat focused Picker components.
$kendo-panelbar-item-hover-borderNullnullnull$kendo-picker-flat-focus-borderString$kendo-picker-focus-bordervar(--kendo-color-primary, #3f51b5)
Description
The border color of the hovered PanelBar items.
+
Description
The border color of the flat focused Picker components.
$kendo-panelbar-item-hover-gradient$kendo-picker-flat-focus-shadow Null null null
Description
The gradient of the hovered PanelBar items.
+
Description
The shadow of the flat focused Picker components.
$kendo-panelbar-item-focus-bgStringif($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 1.5 ))var(--kendo-color-base-active, #d6d6d6)$kendo-picker-flat-hover-focus-bgNullnullnull
Description
The background color of the focused PanelBar items.
+
Description
The background color of the flat hovered and focused Picker components.
$kendo-panelbar-item-focus-text$kendo-picker-flat-hover-focus-text Null null null
Description
The text color of the focused PanelBar items.
+
Description
The text color of the flat hovered and focused Picker components.
$kendo-panelbar-item-focus-border$kendo-picker-flat-hover-focus-border Null null null
Description
The border color of the focused PanelBar items.
+
Description
The border color of the flat hovered and focused Picker components.
+
+ +### Pickers + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-picker-flat-hover-borderString$kendo-picker-hover-bordervar(--kendo-color-on-app-surface, #212121)
Description
The border color of the flat hovered Picker components.
+
+ +### Pivotgrid + + + + + + + + + + + + + + + + + + + + + + + + - + - - + - - + - - - - - - - - - - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + - - - -
NameTypeDefault valueComputed value
$kendo-pivotgrid-spacerStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacer of the PivotGrid.
$kendo-panelbar-item-focus-gradient$kendo-pivotgrid-padding-x Null null null
Description
The gradient of the focused PanelBar items.
+
Description
The horizontal padding of the PivotGrid.
$kendo-panelbar-item-focus-shadow$kendo-pivotgrid-padding-y Null null null
Description
The box shadow of the focused PanelBar items.
+
Description
The vertical of the PivotGrid.
$kendo-panelbar-item-hover-focus-bg$kendo-pivotgrid-font-family Stringif($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 2 ))var(--kendo-color-base-active, #d6d6d6)
Description
The background color of the focused and hovered PanelBar items.
-
$kendo-panelbar-item-hover-focus-textNullnullnullvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The text color of the focused and hovered PanelBar items.
+
Description
The font family of the PivotGrid.
$kendo-panelbar-item-hover-focus-borderNullnullnull$kendo-pivotgrid-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The border color of the focused and hovered PanelBar items.
+
Description
The font size of the PivotGrid.
$kendo-panelbar-item-hover-focus-gradientNullnullnull$kendo-pivotgrid-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The gradient of the focused and hovered PanelBar items.
+
Description
The line height of the PivotGrid.
$kendo-panelbar-item-selected-bgString$kendo-selected-bgvar(--kendo-color-secondary, #e51a5f)$kendo-pivotgrid-border-widthNumber1px1px
Description
The background color of the selected PanelBar items.
+
Description
The border width of the PivotGrid.
$kendo-panelbar-item-selected-text$kendo-pivotgrid-icon-spacing String$kendo-selected-textvar(--kendo-color-on-secondary, #ffffff)k-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The text color of the selected PanelBar items.
+
Description
The icon spacing of the PivotGrid.
$kendo-panelbar-item-selected-borderNullnullnull$kendo-pivotgrid-row-header-widthNumber300px300px
Description
The border color of the selected PanelBar items.
+
Description
The default width of the PivotGrid row header.
$kendo-panelbar-item-selected-gradientNullnullnull$kendo-pivotgrid-column-header-heightNumber75px75px
Description
The gradient of the selected PanelBar items.
+
Description
The default height of the PivotGrid column header.
$kendo-panelbar-item-selected-hover-bg$kendo-pivotgrid-cell-padding-x Stringif($kendo-enable-color-system, k-color( secondary-hover ), k-try-tint($kendo-panelbar-item-selected-bg, .95))var(--kendo-color-secondary-hover, #d31857)$kendo-table-md-cell-padding-xvar(--kendo-spacing-6, 1.5rem)
Description
The background color of the selected and hovered PanelBar items.
+
Description
The horizontal padding of the PivotGrid cell.
$kendo-panelbar-item-selected-hover-textNullnullnull$kendo-pivotgrid-cell-padding-yString$kendo-table-md-cell-padding-yvar(--kendo-spacing-2\.5, 0.625rem)
Description
The text color of the selected and hovered PanelBar items.
+
Description
The vertical padding of the PivotGrid cell.
$kendo-panelbar-item-selected-hover-borderNullnullnull$kendo-pivotgrid-cell-border-widthNumber1px1px
Description
The border color of the selected and hovered PanelBar items.
+
Description
The border width of the PivotGrid cell.
$kendo-panelbar-item-selected-hover-gradientNullnullnull$kendo-pivotgrid-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The gradient of the selected and hovered PanelBar items.
+
Description
The background color of the PivotGrid.
$kendo-panelbar-item-selected-focus-bg$kendo-pivotgrid-text Stringif($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-item-selected-bg, 3))var(--kendo-color-secondary-active, #c01650)$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The background color of the selected and focused PanelBar items.
+
Description
The text color of the PivotGrid.
$kendo-panelbar-item-selected-focus-textNullnullnull$kendo-pivotgrid-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The text color of the selected and focused PanelBar items.
+
Description
The border color of the PivotGrid.
$kendo-panelbar-item-selected-focus-borderNullnullnull$kendo-pivotgrid-alt-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 ))var(--kendo-color-border-alt, rgba(0, 0, 0, 0.15))
Description
The border color of the selected and focused PanelBar items.
+
Description
The alt border color of the PivotGrid.
$kendo-panelbar-item-selected-focus-gradientNullnullnull$kendo-pivotgrid-headers-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 2%, transparent), rgba( $kendo-component-header-bg, .02 ))color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 2%, transparent)
Description
The gradient of the selected and focused PanelBar items.
+
Description
The background color of the PivotGrid header.
$kendo-panelbar-item-selected-hover-focus-bg$kendo-pivotgrid-headers-text Stringif($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-item-selected-bg, 3.95))var(--kendo-color-secondary-active, #c01650)$kendo-component-header-textvar(--kendo-color-on-app-surface, #212121)
Description
The background color of the selected, hovered and focused PanelBar items.
+
Description
The text color of the PivotGrid header.
$kendo-panelbar-item-selected-hover-focus-textNullnullnull$kendo-pivotgrid-headers-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The text color of the selected, hovered and focused PanelBar items.
+
Description
The border color of the PivotGrid header.
$kendo-panelbar-item-selected-hover-focus-borderNullnullnull$kendo-pivotgrid-total-bgStringif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 ))var(--kendo-color-base-subtle, #ebebeb)
Description
The border color of the selected, hovered and focused PanelBar items.
+
Description
The background color of the PivotGrid total cells.
$kendo-panelbar-item-selected-hover-focus-gradientNullnullnull$kendo-pivotgrid-total-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212121)
Description
The gradient of the selected, hovered and focused PanelBar items.
+
Description
The text color of the PivotGrid total cells.
$kendo-panelbar-header-expanded-bgNullnullnull$kendo-pivotgrid-total-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The background color of the expanded PanelBar header.
+
Description
The border color of the PivotGrid total cells.
$kendo-panelbar-header-expanded-textNullnullnull$kendo-pivotgrid-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% ))var(--kendo-color-base-hover, #ebebeb)
Description
The text color of the expanded PanelBar header.
+
Description
The hover background color of the PivotGrid.
$kendo-panelbar-header-expanded-border$kendo-pivotgrid-hover-text Null null null
Description
The border color of the expanded PanelBar header.
+
Description
The hover text color of the PivotGrid.
$kendo-panelbar-header-expanded-gradient$kendo-pivotgrid-hover-border Null null null
Description
The gradient of the expanded PanelBar header.
-
- -### Picker - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - + + - - + - - + - + - - + - + - - + - + - - - - - - - - - - - + - - - - - + + + + - - - - - - - - + + + + + + - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - + - - + - - + + - - + - - + + + + + + + + + + - - + - - + + - - + - - + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - + - - + + - - + - - - - - + + + + - - + - - - - - + + + + - - -
NameTypeDefault valueComputed value
$kendo-picker-bgString$kendo-input-bgvar(--kendo-color-surface, #f5f5f5)
Description
The background color of the Picker components.
-
$kendo-picker-textString$kendo-input-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Picker components.
+
Description
The hover border color of the PivotGrid.
$kendo-picker-border$kendo-pivotgrid-selected-bg String$kendo-input-bordercolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 44%, transparent)if($kendo-enable-color-system, color-mix(in srgb, k-color( base-active ) 25%, transparent), rgba( k-contrast-color( $kendo-pivotgrid-bg ), .04 ))color-mix(in srgb, var(--kendo-color-base-active, #d6d6d6) 25%, transparent)
Description
The border color of the Picker components.
+
Description
The selected background color of the PivotGrid.
$kendo-picker-gradient$kendo-pivotgrid-selected-text Null null null
Description
The gradient of the Picker components.
+
Description
The selected text color of the PivotGrid.
$kendo-picker-shadow$kendo-pivotgrid-selected-border Null$kendo-input-shadownull null
Description
The shadow of the Picker components.
+
Description
The selected border color of the PivotGrid.
$kendo-picker-hover-bg$kendo-pivotgrid-focus-shadow Null$kendo-input-hover-bg$kendo-list-item-focus-shadow null
Description
The background color of the hovered Picker components.
+
Description
The focus shadow of the PivotGrid.
$kendo-picker-hover-text$kendo-pivotgrid-configurator-padding-x Null$kendo-input-hover-textnull null
Description
The text color of the hovered Picker components.
-
$kendo-picker-hover-borderString$kendo-input-hover-bordervar(--kendo-color-on-app-surface, #212121)
Description
The border color of the hovered Picker components.
+
Description
The horizontal padding of the PivotGrid configurator.
$kendo-picker-hover-gradient$kendo-pivotgrid-configurator-padding-y Null null null
Description
The gradient of the hovered Picker components.
+
Description
The vertical padding of the PivotGrid configurator.
$kendo-picker-hover-shadowNull$kendo-input-hover-shadownull$kendo-pivotgrid-configurator-border-widthNumber1px1px
Description
The shadow of the hovered Picker components.
+
Description
The border width of the PivotGrid configurator.
$kendo-picker-focus-bgNull$kendo-input-focus-bgnull
Description
The background color of the focused Picker components.
+ 		$kendo-pivotgrid-configurator-header-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the PivotGrid configurator header.
$kendo-picker-focus-textNull$kendo-input-focus-textnull$kendo-pivotgrid-configurator-header-padding-yCalculationcalc( #{$kendo-pivotgrid-spacer} * .75 )calc(var(--kendo-spacing-4, 1rem) * 0.75)
Description
The text color of the focused Picker components.
+
Description
The vertical padding of the PivotGrid configurator header.
$kendo-picker-focus-borderString$kendo-input-focus-bordervar(--kendo-color-primary, #3f51b5)$kendo-pivotgrid-configurator-header-font-sizeNumber18px18px
Description
The border color of the focused Picker components.
+
Description
The font size of the PivotGrid configurator header.
$kendo-picker-focus-gradientNullnullnull$kendo-pivotgrid-configurator-header-font-weightNumber500500
Description
The gradient of the focused Picker components.
+
Description
The font weight of the PivotGrid configurator header.
$kendo-picker-focus-shadowNull$kendo-input-focus-shadownull$kendo-pivotgrid-configurator-content-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The shadow of the focused Picker components.
+
Description
The horizontal padding of the PivotGrid configurator content.
$kendo-picker-disabled-bg$kendo-pivotgrid-configurator-content-padding-y String$kendo-input-disabled-bgcolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 3%, transparent)k-spacing(0)var(--kendo-spacing-0, 0px)
Description
The background color of the disabled Picker components.
+
Description
The vertical padding of the PivotGrid configurator content.
$kendo-picker-disabled-text$kendo-pivotgrid-configurator-fields-margin-x String$kendo-input-disabled-textcolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 27%, transparent)k-spacing(0)var(--kendo-spacing-0, 0px)
Description
The text color of the disabled Picker components.
+
Description
The horizontal margin of the PivotGrid configurator fields.
$kendo-picker-disabled-borderString$kendo-input-disabled-bordercolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 3%, transparent)$kendo-pivotgrid-configurator-fields-margin-yCalculationcalc( #{$kendo-pivotgrid-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The border color of the disabled Picker components.
+
Description
The vertical margin of the PivotGrid configurator fields.
$kendo-picker-disabled-gradientNullnullnull$kendo-pivotgrid-configurator-vertical-widthNumber320px320px
Description
The gradient of the disabled Picker components.
+
Description
The default width of the PivotGrid vertical configurator.
$kendo-picker-disabled-shadowNullnullnull$kendo-pivotgrid-configurator-horizontal-heightNumber420px420px
Description
The shadow of the disabled Picker components.
+
Description
The default height of the PivotGrid horizontal configurator.
$kendo-picker-outline-bgNullnullnull$kendo-pivotgrid-configurator-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the outline Picker components.
+
Description
The background color of the PivotGrid configurator.
$kendo-picker-outline-text$kendo-pivotgrid-configurator-text String$kendo-picker-text$kendo-component-text var(--kendo-color-on-app-surface, #212121)
Description
The text color of the outline Picker components.
+
Description
The text color of the PivotGrid configurator.
$kendo-picker-outline-border$kendo-pivotgrid-configurator-border String$kendo-picker-bordercolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 44%, transparent)$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the outline Picker components.
+
Description
The border color of the PivotGrid configurator.
$kendo-picker-outline-hover-bg$kendo-pivotgrid-configurator-header-bg Null null null
Description
The background color of the outline hovered Picker components.
+
Description
The background color of the PivotGrid configurator header.
$kendo-picker-outline-hover-text$kendo-pivotgrid-configurator-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the PivotGrid configurator header.
+
$kendo-pivotgrid-configurator-header-border Null null null
Description
The text color of the outline hovered Picker components.
+
Description
The border color of the PivotGrid configurator header.
$kendo-picker-outline-hover-border$kendo-pivotgrid-configurator-end-shadow String$kendo-picker-hover-bordervar(--kendo-color-on-app-surface, #212121)$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The border color of the outline hovered Picker components.
+
Description
The shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-bg$kendo-pivotgrid-configurator-start-shadow Stringnulnul$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The background color of the outline focused Picker components.
+
Description
The end shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-textNullnullnull$kendo-pivotgrid-configurator-top-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The text color of the outline focused Picker components.
+
Description
The start shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-border$kendo-pivotgrid-configurator-bottom-shadow String$kendo-picker-focus-bordervar(--kendo-color-primary, #3f51b5)$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The border color of the outline focused Picker components.
+
Description
The top shadow of the PivotGrid configurator.
$kendo-picker-outline-focus-shadowNullnullnull$kendo-pivotgrid-configurator-button-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The shadow of the outline focused Picker components.
+
Description
The horizontal padding of the PivotGrid configurator button.
$kendo-picker-outline-hover-focus-bgNullnullnull$kendo-pivotgrid-configurator-button-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The background color of the outline hovered and focused Picker components.
+
Description
The vertical padding of the PivotGrid configurator button.
$kendo-picker-outline-hover-focus-textNullnullnull$kendo-pivotgrid-configurator-button-border-widthNumber1px1px
Description
The text color of the outline hovered and focused Picker components.
+
Description
The border width of the PivotGrid configurator button.
$kendo-picker-outline-hover-focus-borderNullnullnull$kendo-pivotgrid-configurator-button-sizeCalculationcalc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) )calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
Description
The border color of the outline hovered and focused Picker components.
+
Description
The size of the PivotGrid configurator button.
$kendo-picker-flat-bgNullnullnull$kendo-pivotgrid-calculated-field-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The background color of the flat Picker components.
+
Description
The horizontal padding of the PivotGrid calculated field.
$kendo-picker-flat-text$kendo-pivotgrid-calculated-field-padding-y String$kendo-picker-textvar(--kendo-color-on-app-surface, #212121)$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The text color of the flat Picker components.
+
Description
The vertical padding of the PivotGrid calculated field.
$kendo-picker-flat-borderString$kendo-picker-bordercolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 44%, transparent)$kendo-pivotgrid-calculated-field-border-widthNumber1px1px
Description
The border color of the flat Picker components.
+
Description
The border width of the PivotGrid calculated field.
$kendo-picker-flat-hover-bgNullnullnull$kendo-pivotgrid-calculated-field-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The background color of the flat hovered Picker components.
+
Description
The border radius of the PivotGrid calculated field.
$kendo-picker-flat-hover-textNullnullnull$kendo-pivotgrid-calculated-field-gapString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The text color of the flat hovered Picker components.
+
Description
The spacing of the PivotGrid calculated field.
$kendo-picker-flat-focus-bgNullnullnull$kendo-pivotgrid-calculated-field-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the flat focused Picker components.
+
Description
The background color of the PivotGrid calculated field.
$kendo-picker-flat-focus-textNullnullnull$kendo-pivotgrid-calculated-field-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the flat focused Picker components.
+
Description
The text color of the PivotGrid calculated field.
$kendo-picker-flat-focus-border$kendo-pivotgrid-calculated-field-border String$kendo-picker-focus-bordervar(--kendo-color-primary, #3f51b5)$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the flat focused Picker components.
+
Description
The border color of the PivotGrid calculated field.
$kendo-picker-flat-focus-shadow$kendo-pivotgrid-calculated-field-header-bg Null null null
Description
The shadow of the flat focused Picker components.
+
Description
The background color of the PivotGrid calculated field header.
$kendo-picker-flat-hover-focus-bgNullnullnull$kendo-pivotgrid-calculated-field-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212121)
Description
The background color of the flat hovered and focused Picker components.
+
Description
The text color of the PivotGrid calculated field header.
$kendo-picker-flat-hover-focus-text$kendo-pivotgrid-calculated-field-header-border Null null null
Description
The text color of the flat hovered and focused Picker components.
+
Description
The border color of the PivotGrid calculated field header.
$kendo-picker-flat-hover-focus-borderNullnullnull$kendo-pivotgrid-treeview-padding-xString$kendo-pivotgrid-spacervar(--kendo-spacing-4, 1rem)
Description
The border color of the flat hovered and focused Picker components.
+
Description
The horizontal padding of the PivotGrid treeview.
- -### Pickers - - - - - - - - - - - - - - - - - - + + - - + + - @@ -18490,7 +19740,7 @@ The following table lists the available variables for customizing the Material t - @@ -18500,7 +19750,7 @@ The following table lists the available variables for customizing the Material t - @@ -18510,7 +19760,7 @@ The following table lists the available variables for customizing the Material t - @@ -18520,7 +19770,7 @@ The following table lists the available variables for customizing the Material t - @@ -18530,7 +19780,7 @@ The following table lists the available variables for customizing the Material t - @@ -18540,7 +19790,7 @@ The following table lists the available variables for customizing the Material t - @@ -18550,7 +19800,7 @@ The following table lists the available variables for customizing the Material t - @@ -18560,7 +19810,7 @@ The following table lists the available variables for customizing the Material t - @@ -18570,7 +19820,7 @@ The following table lists the available variables for customizing the Material t - @@ -18580,7 +19830,7 @@ The following table lists the available variables for customizing the Material t - @@ -18590,7 +19840,7 @@ The following table lists the available variables for customizing the Material t - @@ -18600,7 +19850,7 @@ The following table lists the available variables for customizing the Material t - @@ -18610,7 +19860,7 @@ The following table lists the available variables for customizing the Material t - @@ -18620,7 +19870,7 @@ The following table lists the available variables for customizing the Material t - @@ -18630,7 +19880,7 @@ The following table lists the available variables for customizing the Material t - @@ -18640,7 +19890,7 @@ The following table lists the available variables for customizing the Material t - @@ -18650,7 +19900,7 @@ The following table lists the available variables for customizing the Material t - @@ -18660,7 +19910,7 @@ The following table lists the available variables for customizing the Material t - @@ -18670,7 +19920,7 @@ The following table lists the available variables for customizing the Material t - @@ -18680,7 +19930,7 @@ The following table lists the available variables for customizing the Material t - diff --git a/packages/material/docs/index.md b/packages/material/docs/index.md index 5436331a5ff..5a755117cc1 100644 --- a/packages/material/docs/index.md +++ b/packages/material/docs/index.md @@ -26,7 +26,7 @@ The KendoReact Material theme is part of the KendoReact library of React UI comp ## Dependencies -For the Kendo UI Material theme to closely implement the [Material Design Guidelines](https://material.io/guidelines/), provide [the Roboto font family](#toc-fonts) and [configure additional modules](#toc-additional-configuration) in your application. +For the Kendo UI Material theme to closely implement the [Material Design Guidelines](https://material.io/guidelines/), provide the Roboto font family and [configure additional modules](#toc-additional-configuration) in your application. By default, the Material theme uses the Roboto font family but the font itself is not included in the theme package. @@ -45,7 +45,7 @@ You can add the font to the page from Google Fonts in the following way: The following additional configuration improves the look and feel of the theme in your application: * Use a [Ripple effect]({% slug overview_ripple %})—Available through the `kendoRippleContainer` directive from the `@progress/kendo-angular-ripple` NPM module. The `kendoRippleContainer` directive provides the [Material ink ripple effect](https://material.io/guidelines/motion/choreography.html#choreography-radial-reaction) for the Kendo UI components for Angular and is fully compatible with all available Kendo UI themes. -* Use the [Floating label component]({% slug overview_floatinglabel %})—with [HTML Input elements]({% slug overview_floatinglabel %}#toc-using-with-html-input-elements) and with Kendo UI for Angular components from the [inputs]({% slug overview_floatinglabel %}#toc-using-with-kendo-ui-for-angular-inputs), [dateinputs]({% slug overview_floatinglabel %}#toc-using-with-kendo-ui-for-angular-date-inputs) or [dropdowns]({% slug overview_floatinglabel %}#toc-using-with-kendo-ui-for-angular-dropdowns) packages. +* Use the [FloatingLabel component](slug:overview_floatinglabel)—with [HTML input elements](slug:associate_floatinglabel#toc-html-input-elements) and with [Kendo UI for Angular Inputs components](slug:overview_floatinglabel), [dateinputs](slug:associate_floatinglabel#toc-kendo-ui-for-angular-date-inputs) or [dropdowns](slug:associate_floatinglabel#toc-kendo-ui-for-angular-dropdowns) packages. {% endplatform_content %} {% platform_content react %} diff --git a/packages/material/package.json b/packages/material/package.json index bf607c120dd..0a0736406d0 100644 --- a/packages/material/package.json +++ b/packages/material/package.json @@ -1,7 +1,7 @@ { "name": "@progress/kendo-theme-material", "description": "Material theme for Kendo UI", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "author": "Progress", "license": "Apache-2.0", "keywords": [ @@ -55,9 +55,9 @@ }, "dependencies": { "@progress/kendo-svg-icons": "3.0.0", - "@progress/kendo-theme-core": "8.1.0-dev.2", - "@progress/kendo-theme-default": "8.1.0-dev.2", - "@progress/kendo-theme-utils": "8.1.0-dev.2" + "@progress/kendo-theme-core": "8.2.0-dev.0", + "@progress/kendo-theme-default": "8.2.0-dev.0", + "@progress/kendo-theme-utils": "8.2.0-dev.0" }, "directories": { "doc": "docs", diff --git a/packages/material/scss/chart-wizard/_index.scss b/packages/material/scss/chart-wizard/_index.scss new file mode 100644 index 00000000000..c1bcaf00a99 --- /dev/null +++ b/packages/material/scss/chart-wizard/_index.scss @@ -0,0 +1,57 @@ +@import "../core/_index.scss"; +@import "../utils/_index.scss"; + + +// Module meta +$_kendo-module-meta: ( + name: "chart-wizard", + dependencies: ( + "icon", + "window", + "splitter", + "dataviz", + "expansion-panel", + "grid", + "tabstrip", + "listview", + "forms", + "combobox" + ) +); + + +// Dependencies +@import "../icons/_index.scss"; +@import "../window/_index.scss"; +@import "../splitter/_index.scss"; +@import "../dataviz/_index.scss"; +@import "../expansion-panel/_index.scss"; +@import "../grid/_index.scss"; +@import "../tabstrip/_index.scss"; +@import "../listview/_index.scss"; +@import "../forms/_index.scss"; +@import "../combobox/_index.scss"; + + +// Component +@import "./_variables.scss"; +@import "./_layout.scss"; +@import "./_theme.scss"; + + +// Register +@import "../core/module-system/index.import.scss"; +@include module-register( $_kendo-module-meta... ); + + +// Expose +@mixin kendo-chart-wizard--styles() { + @include module-render( "chart-wizard" ) { + @include kendo-chart-wizard--layout(); + @include kendo-chart-wizard--theme(); + } +} + +@if $kendo-auto-bootstrap { + @include kendo-chart-wizard--styles(); +} diff --git a/packages/material/scss/chart-wizard/_layout.scss b/packages/material/scss/chart-wizard/_layout.scss new file mode 100644 index 00000000000..9f8ffd1a5e4 --- /dev/null +++ b/packages/material/scss/chart-wizard/_layout.scss @@ -0,0 +1,5 @@ +@import "@progress/kendo-theme-default/scss/chart-wizard/_layout.scss"; + +@mixin kendo-chart-wizard--layout() { + @include kendo-chart-wizard--layout-base(); +} diff --git a/packages/material/scss/chart-wizard/_theme.scss b/packages/material/scss/chart-wizard/_theme.scss new file mode 100644 index 00000000000..a870e71d7e5 --- /dev/null +++ b/packages/material/scss/chart-wizard/_theme.scss @@ -0,0 +1,5 @@ +@import "@progress/kendo-theme-default/scss/chart-wizard/_theme.scss"; + +@mixin kendo-chart-wizard--theme() { + @include kendo-chart-wizard--theme-base(); +} diff --git a/packages/material/scss/chart-wizard/_variables.scss b/packages/material/scss/chart-wizard/_variables.scss new file mode 100644 index 00000000000..98cde89c363 --- /dev/null +++ b/packages/material/scss/chart-wizard/_variables.scss @@ -0,0 +1,38 @@ +// Chart wizard + +/// The color of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default; +/// The background color of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-bg: if($kendo-enable-color-system, k-color(primary-subtle), $kendo-color-primary-subtle) !default; +/// The border radius of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-border-radius: k-border-radius(none) !default; +/// The padding of the area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-padding: k-spacing(4) !default; +/// The box shadow of the focused area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), $kendo-color-primary-emphasis) !default; +/// The box shadow of the selected area around the chart type icon. +/// @group chart-wizard +$kendo-chart-wizard-icon-area-selected-shadow: inset 0 0 0 1px $kendo-chart-wizard-icon-area-color !default; + +/// The color of the selected chart type items in the Property panel. +/// @group chart-wizard +$kendo-chart-wizard-chart-type-selected-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default; + +/// The padding of the preview pane. +/// @group chart-wizard +$kendo-chart-wizard-preview-pane-padding: k-spacing(4) !default; +/// The padding of the property pane. +/// @group chart-wizard +$kendo-chart-wizard-property-pane-padding: 0 !default; + +/// The gap between the chart type items in the Property panel. +/// @group chart-wizard +$kendo-chart-wizard-chart-type-spacing: k-spacing(6) !default; +/// The gap between the icon area and its text. +/// @group chart-wizard +$kendo-chart-wizard-icon-text-gap: k-spacing(3) !default; diff --git a/packages/material/scss/chat/_layout.scss b/packages/material/scss/chat/_layout.scss index 0a93102fc22..93fe3cbbe91 100644 --- a/packages/material/scss/chat/_layout.scss +++ b/packages/material/scss/chat/_layout.scss @@ -3,4 +3,34 @@ @mixin kendo-chat--layout() { @include kendo-chat--layout-base(); + + .k-chat { + .k-quick-reply { + position: relative; + + &::before { + @include border-radius( inherit ); + content: ""; + background: currentColor; + opacity: 0; + display: block; + pointer-events: none; + position: absolute; + left: -$kendo-button-border-width; + right: -$kendo-button-border-width; + top: -$kendo-button-border-width; + bottom: -$kendo-button-border-width; + z-index: 0; + transition: opacity .2s ease-in-out; + } + + // Focused state + &:focus, + &.k-focus { + &::before { + opacity: $kendo-flat-button-focus-opacity; + } + } + } + } } diff --git a/packages/material/scss/chat/_theme.scss b/packages/material/scss/chat/_theme.scss index 5ecfbb1a98c..a3678c751c9 100644 --- a/packages/material/scss/chat/_theme.scss +++ b/packages/material/scss/chat/_theme.scss @@ -3,4 +3,11 @@ @mixin kendo-chat--theme() { @include kendo-chat--theme-base(); + + .k-chat .k-quick-reply { + &:focus, + &.k-focus { + color: if($kendo-enable-color-system, k-color( primary-on-surface ), $kendo-color-primary); + } + } } diff --git a/packages/material/scss/chat/_variables.scss b/packages/material/scss/chat/_variables.scss index cf3c6709065..943cc1ecfb9 100644 --- a/packages/material/scss/chat/_variables.scss +++ b/packages/material/scss/chat/_variables.scss @@ -199,3 +199,13 @@ $kendo-chat-quick-reply-hover-text: $kendo-color-primary-contrast !default; /// The border color of the hovered Chat quick reply. /// @group chat $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default; + +/// The shadow blur of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-blur: null !default; +/// The shadow spread of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-spread: null !default; +/// The shadow opacity of the focused Chat quick reply. +/// @group chat +$kendo-chat-quick-reply-shadow-opacity: 0 !default; diff --git a/packages/material/scss/index.scss b/packages/material/scss/index.scss index b8aa9bc22a7..fe7a48d64ca 100644 --- a/packages/material/scss/index.scss +++ b/packages/material/scss/index.scss @@ -122,6 +122,7 @@ @import "./splitter/_index.scss"; @import "./tilelayout/_index.scss"; @import "./dock-manager/_index.scss"; +@import "./chart-wizard/_index.scss"; // Data management @@ -293,6 +294,7 @@ @include kendo-splitter--styles(); @include kendo-tile-layout--styles(); @include kendo-dock-manager--styles(); + @include kendo-chart-wizard--styles(); // Data management diff --git a/packages/material/scss/map/_variables.scss b/packages/material/scss/map/_variables.scss index e1f07c10d1c..1ecae38d88b 100644 --- a/packages/material/scss/map/_variables.scss +++ b/packages/material/scss/map/_variables.scss @@ -2,29 +2,69 @@ // Map +/// The border width of the Map. +/// @group map $kendo-map-border-width: 0px !default; +/// The font size of the Map. +/// @group map $kendo-map-font-size: var( --kendo-font-size, inherit ) !default; +/// The line height of the Map. +/// @group map $kendo-map-line-height: var( --kendo-line-height, normal ) !default; +/// The font family of the Map. +/// @group map $kendo-map-font-family: var( --kendo-font-family, inherit ) !default; +/// The background color of the Map. +/// @group map $kendo-map-bg: $kendo-component-bg !default; +/// The text color of the Map. +/// @group map $kendo-map-text: $kendo-component-text !default; +/// The border color of the Map. +/// @group map $kendo-map-border: $kendo-component-border !default; +/// The margin of the Map navigator. +/// @group map $kendo-map-navigator-margin: k-spacing(4) !default; +/// The padding of the Map navigator. +/// @group map $kendo-map-navigator-padding: k-spacing(0.5) !default; +/// The width of the Map navigator. +/// @group map $kendo-map-navigator-width: calc( calc( #{$kendo-icon-size} * 3) + calc( #{$kendo-map-navigator-padding} * 2 ) ) !default; +/// The height of the Map navigator. +/// @group map $kendo-map-navigator-height: $kendo-map-navigator-width !default; +/// The border width of the Map navigator. +/// @group map $kendo-map-navigator-border-width: 1px !default; +/// The margin of the Map zoom control. +/// @group map $kendo-map-zoom-control-margin: k-spacing(4) !default; +/// The horizontal padding of the Map zoom control. +/// @group map $kendo-map-zoom-control-button-padding-x: $kendo-button-padding-y !default; +/// The vertical padding of the Map zoom control. +/// @group map $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-x !default; +/// The horizontal padding of the Map attribution. +/// @group map $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default; +/// The vertical padding of the Map attribution. +/// @group map $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default; +/// The font size of the Map attribution. +/// @group map $kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default; +/// The background color of the Map attribution. +/// @group map $kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) !default; +/// The fill color of the Map marker. +/// @group map $kendo-map-marker-fill: $kendo-color-primary !default; diff --git a/packages/material/scss/mediaplayer/_variables.scss b/packages/material/scss/mediaplayer/_variables.scss index b9691b5143a..f6f278c4d6b 100644 --- a/packages/material/scss/mediaplayer/_variables.scss +++ b/packages/material/scss/mediaplayer/_variables.scss @@ -1,16 +1,43 @@ // Media player + +/// The border width of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-border-width: 1px !default; +/// The font family of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-font-family: var( --kendo-font-family, inherit ) !default; +/// The font size of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-font-size: var( --kendo-font-size, inherit ) !default; +/// The line height of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-line-height: var( --kendo-line-height, normal ) !default; +/// The background color of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-bg: $kendo-component-bg !default; +/// The text color of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-text: $kendo-component-text !default; +/// The border color of the MediaPlayer. +/// @group mediaplayer $kendo-media-player-border: $kendo-component-border !default; +/// The horizontal padding of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-padding-x: k-spacing(2) !default; +/// The vertical padding of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-padding-y: k-spacing(2) !default; +/// The background color of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-bg: null !default; +/// The text color of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-text: $kendo-media-player-bg !default; +/// The border color of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-border: null !default; +/// The gradient of the MediaPlayer title. +/// @group mediaplayer $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default; diff --git a/packages/material/scss/pivotgrid/_variables.scss b/packages/material/scss/pivotgrid/_variables.scss index 87d200913f7..fc2fbc0c169 100644 --- a/packages/material/scss/pivotgrid/_variables.scss +++ b/packages/material/scss/pivotgrid/_variables.scss @@ -3,99 +3,239 @@ // Pivot grid +/// The spacer of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-spacer: k-spacing(4) !default; +/// The horizontal padding of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-padding-x: null !default; +/// The vertical of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-padding-y: null !default; +/// The font family of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-font-family: var( --kendo-font-family, inherit ) !default; +/// The font size of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-font-size: var( --kendo-font-size, inherit ) !default; +/// The line height of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default; +/// The border width of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-border-width: 1px !default; +/// The icon spacing of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-icon-spacing: k-spacing(1) !default; +/// The default width of the PivotGrid row header. +/// @group pivotgrid $kendo-pivotgrid-row-header-width: 300px !default; +/// The default height of the PivotGrid column header. +/// @group pivotgrid $kendo-pivotgrid-column-header-height: 75px !default; +/// The horizontal padding of the PivotGrid cell. +/// @group pivotgrid $kendo-pivotgrid-cell-padding-x: $kendo-table-md-cell-padding-x !default; +/// The vertical padding of the PivotGrid cell. +/// @group pivotgrid $kendo-pivotgrid-cell-padding-y: $kendo-table-md-cell-padding-y !default; +/// The border width of the PivotGrid cell. +/// @group pivotgrid $kendo-pivotgrid-cell-border-width: 1px !default; +/// The background color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-bg: $kendo-component-bg !default; +/// The text color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-text: $kendo-component-text !default; +/// The border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-border: $kendo-component-border !default; +/// The alt border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 )) !default; +/// The background color of the PivotGrid header. +/// @group pivotgrid $kendo-pivotgrid-headers-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 2%, transparent), rgba( $kendo-component-header-bg, .02 )) !default; +/// The text color of the PivotGrid header. +/// @group pivotgrid $kendo-pivotgrid-headers-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid header. +/// @group pivotgrid $kendo-pivotgrid-headers-border: $kendo-component-header-border !default; +/// The background color of the PivotGrid total cells. +/// @group pivotgrid $kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default; +/// The text color of the PivotGrid total cells. +/// @group pivotgrid $kendo-pivotgrid-total-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid total cells. +/// @group pivotgrid $kendo-pivotgrid-total-border: $kendo-component-header-border !default; +/// The hover background color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% )) !default; +/// The hover text color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-hover-text: null !default; +/// The hover border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-hover-border: null !default; +/// The selected background color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( base-active ) 25%, transparent), rgba( k-contrast-color( $kendo-pivotgrid-bg ), .04 )) !default; +/// The selected text color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-selected-text: null !default; +/// The selected border color of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-selected-border: null !default; +/// The focus shadow of the PivotGrid. +/// @group pivotgrid $kendo-pivotgrid-focus-shadow: $kendo-list-item-focus-shadow !default; // Pivotgrid Configurator +/// The horizontal padding of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-padding-x: null !default; +/// The vertical padding of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-padding-y: null !default; +/// The border width of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-border-width: 1px !default; +/// The horizontal padding of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-padding-y: calc( #{$kendo-pivotgrid-spacer} * .75 ) !default; +/// The font size of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-font-size: 18px !default; +/// The font weight of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-font-weight: 500 !default; +/// The horizontal padding of the PivotGrid configurator content. +/// @group pivotgrid $kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid configurator content. +/// @group pivotgrid $kendo-pivotgrid-configurator-content-padding-y: k-spacing(0) !default; +/// The horizontal margin of the PivotGrid configurator fields. +/// @group pivotgrid $kendo-pivotgrid-configurator-fields-margin-x: k-spacing(0) !default; +/// The vertical margin of the PivotGrid configurator fields. +/// @group pivotgrid $kendo-pivotgrid-configurator-fields-margin-y: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default; +/// The default width of the PivotGrid vertical configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-vertical-width: 320px !default; +/// The default height of the PivotGrid horizontal configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-horizontal-height: 420px !default; +/// The background color of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-bg: $kendo-component-bg !default; +/// The text color of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-text: $kendo-component-text !default; +/// The border color of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-border: $kendo-component-border !default; +/// The background color of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-bg: null !default; +/// The text color of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid configurator header. +/// @group pivotgrid $kendo-pivotgrid-configurator-header-border: null !default; +/// The shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-end-shadow: $box-shadow-depth-3 !default; +/// The end shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-start-shadow: $box-shadow-depth-3 !default; +/// The start shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-top-shadow: $box-shadow-depth-3 !default; +/// The top shadow of the PivotGrid configurator. +/// @group pivotgrid $kendo-pivotgrid-configurator-bottom-shadow: $box-shadow-depth-3 !default; +/// The horizontal padding of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-padding-x: k-spacing(1) !default; +/// The vertical padding of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-padding-y: k-spacing(1) !default; +/// The border width of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-border-width: 1px !default; +/// The size of the PivotGrid configurator button. +/// @group pivotgrid $kendo-pivotgrid-configurator-button-size: calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) ) !default; // Calculated fields +/// The horizontal padding of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default; +/// The border width of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-border-width: 1px !default; +/// The border radius of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-border-radius: k-border-radius(md) !default; +/// The spacing of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default; +/// The background color of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-bg: $kendo-component-bg !default; +/// The text color of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-text: $kendo-component-text !default; +/// The border color of the PivotGrid calculated field. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-border: $kendo-component-border !default; +/// The background color of the PivotGrid calculated field header. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-bg: null !default; +/// The text color of the PivotGrid calculated field header. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-text: $kendo-component-header-text !default; +/// The border color of the PivotGrid calculated field header. +/// @group pivotgrid $kendo-pivotgrid-calculated-field-header-border: null !default; +/// The horizontal padding of the PivotGrid treeview. +/// @group pivotgrid $kendo-pivotgrid-treeview-padding-x: $kendo-pivotgrid-spacer !default; +/// The vertical padding of the PivotGrid treeview. +/// @group pivotgrid $kendo-pivotgrid-treeview-padding-y: k-spacing(0) !default; // Legacy variables diff --git a/packages/material/scss/prompt/_variables.scss b/packages/material/scss/prompt/_variables.scss index 7b4c0ed1777..3cbd5c39501 100644 --- a/packages/material/scss/prompt/_variables.scss +++ b/packages/material/scss/prompt/_variables.scss @@ -1,66 +1,66 @@ -// Prompt +// AIPrompt -/// The text color of the Prompt. +/// The text color of the AIPrompt. /// @group prompt $kendo-prompt-text: $kendo-component-text !default; -/// The background color of the Prompt. +/// The background color of the AIPrompt. /// @group prompt $kendo-prompt-bg: $kendo-component-bg !default; -/// The border color of the Prompt. +/// The border color of the AIPrompt. /// @group prompt $kendo-prompt-border: $kendo-component-border !default; -/// The text color of the Prompt header. +/// The text color of the AIPrompt header. /// @group prompt $kendo-prompt-header-text: $kendo-component-header-text !default; -/// The background color of the Prompt header. +/// The background color of the AIPrompt header. /// @group prompt $kendo-prompt-header-bg: $kendo-component-bg !default; -/// The border color of the Prompt header. +/// The border color of the AIPrompt header. /// @group prompt $kendo-prompt-header-border: $kendo-component-header-border !default; -/// The vertical padding of the Prompt content. +/// The vertical padding of the AIPrompt content. /// @group prompt $kendo-prompt-content-padding-y: k-spacing(4) !default; -/// The horizontal padding of the Prompt content. +/// The horizontal padding of the AIPrompt content. /// @group prompt $kendo-prompt-content-padding-x: k-spacing(4) !default; -/// The spacing between the items of the Prompt content. +/// The spacing between the items of the AIPrompt content. /// @group prompt $kendo-prompt-content-spacing: k-spacing(4) !default; -/// The text color of the Prompt content. +/// The text color of the AIPrompt content. /// @group prompt $kendo-prompt-content-text: $kendo-component-header-text !default; -/// The background color of the Prompt content. +/// The background color of the AIPrompt content. /// @group prompt $kendo-prompt-content-bg: $kendo-component-header-bg !default; -/// The text border of the Prompt content. +/// The text border of the AIPrompt content. /// @group prompt $kendo-prompt-content-border: $kendo-component-header-border !default; -/// The spacing between the items of the Prompt content expander. +/// The spacing between the items of the AIPrompt content expander. /// @group prompt $kendo-prompt-expander-spacing: k-spacing(2) !default; -/// The vertical padding of the Prompt suggestion container. +/// The vertical padding of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-padding-y: k-spacing(2) !default; -/// The horizontal padding of the Prompt suggestion container. +/// The horizontal padding of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-padding-x: k-spacing(2) !default; -/// The border radius of the Prompt suggestion container. +/// The border radius of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-border-radius: k-border-radius(md) !default; -/// The text color of the Prompt suggestion container. +/// The text color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-text: $kendo-component-text !default; -/// The background color of the Prompt suggestion container. +/// The background color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-bg: $kendo-body-bg !default; -/// The border color of the Prompt suggestion container. +/// The border color of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-border: $kendo-component-border !default; -/// The elevation of the Prompt suggestion container. +/// The elevation of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-shadow: k-elevation(1) !default; diff --git a/packages/nouvelle/CHANGELOG.md b/packages/nouvelle/CHANGELOG.md index 117925b9d23..cc9609fea1b 100644 --- a/packages/nouvelle/CHANGELOG.md +++ b/packages/nouvelle/CHANGELOG.md @@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [8.2.0-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.1-dev.0...v8.2.0-dev.0) (2024-07-15) + +**Note:** Version bump only for package @progress/kendo-theme-nouvelle + + + + + +## [8.1.1-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.0...v8.1.1-dev.0) (2024-07-08) + +**Note:** Version bump only for package @progress/kendo-theme-nouvelle + + + + + +# [8.1.0](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.2...v8.1.0) (2024-07-03) + +**Note:** Version bump only for package @progress/kendo-theme-nouvelle + + + + + # [8.1.0-dev.2](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.1...v8.1.0-dev.2) (2024-07-01) **Note:** Version bump only for package @progress/kendo-theme-nouvelle diff --git a/packages/nouvelle/package.json b/packages/nouvelle/package.json index 9bd96aa83b2..47008bbab9d 100644 --- a/packages/nouvelle/package.json +++ b/packages/nouvelle/package.json @@ -1,7 +1,7 @@ { "name": "@progress/kendo-theme-nouvelle", "description": "A css variables heavy theme for Kendo UI", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "author": "Progress", "license": "Apache-2.0", "keywords": [ @@ -55,8 +55,8 @@ }, "dependencies": { "@progress/kendo-svg-icons": "3.0.0", - "@progress/kendo-theme-core": "8.1.0-dev.2", - "@progress/kendo-theme-utils": "8.1.0-dev.2" + "@progress/kendo-theme-core": "8.2.0-dev.0", + "@progress/kendo-theme-utils": "8.2.0-dev.0" }, "directories": { "doc": "docs" diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md index 5d2392ba225..c98b4bc7858 100644 --- a/packages/utils/CHANGELOG.md +++ b/packages/utils/CHANGELOG.md @@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [8.2.0-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.1-dev.0...v8.2.0-dev.0) (2024-07-15) + +**Note:** Version bump only for package @progress/kendo-theme-utils + + + + + +## [8.1.1-dev.0](https://github.com/telerik/kendo-themes/compare/v8.1.0...v8.1.1-dev.0) (2024-07-08) + +**Note:** Version bump only for package @progress/kendo-theme-utils + + + + + +# [8.1.0](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.2...v8.1.0) (2024-07-03) + +**Note:** Version bump only for package @progress/kendo-theme-utils + + + + + # [8.1.0-dev.2](https://github.com/telerik/kendo-themes/compare/v8.1.0-dev.1...v8.1.0-dev.2) (2024-07-01) **Note:** Version bump only for package @progress/kendo-theme-utils diff --git a/packages/utils/package.json b/packages/utils/package.json index 2b99d401291..3a793b512ad 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,7 +1,7 @@ { "name": "@progress/kendo-theme-utils", "description": "Utility first library alongside Kendo UI", - "version": "8.1.0-dev.2", + "version": "8.2.0-dev.0", "author": "Progress", "license": "Apache-2.0", "keywords": [ @@ -43,7 +43,7 @@ "postpublish": "echo 'no postpublish for utils'" }, "dependencies": { - "@progress/kendo-theme-core": "8.1.0-dev.2" + "@progress/kendo-theme-core": "8.2.0-dev.0" }, "directories": { "doc": "docs" diff --git a/scripts/test-contrast.mjs b/scripts/test-contrast.mjs index 6c59df53d68..5939df35552 100644 --- a/scripts/test-contrast.mjs +++ b/scripts/test-contrast.mjs @@ -30,7 +30,8 @@ const EXCLUDED_ELEMENTS_FOCUS = [ 'k-button-link-warning', 'k-button-solid-warning', 'k-fab-solid-warning', - 'k-step-last' + 'k-step-last', + 'k-quick-reply' ]; // Below are elements with failing text contrast ratio requirement diff --git a/tests/_output/bootstrap/chart-wizard/chart-wizard-icon-area-states.png b/tests/_output/bootstrap/chart-wizard/chart-wizard-icon-area-states.png new file mode 100644 index 00000000000..b6a985ea99c Binary files /dev/null and b/tests/_output/bootstrap/chart-wizard/chart-wizard-icon-area-states.png differ diff --git a/tests/_output/bootstrap/chart-wizard/chart-wizard-tabs-content.png b/tests/_output/bootstrap/chart-wizard/chart-wizard-tabs-content.png new file mode 100644 index 00000000000..5df21bc1930 Binary files /dev/null and b/tests/_output/bootstrap/chart-wizard/chart-wizard-tabs-content.png differ diff --git a/tests/_output/bootstrap/chart-wizard/chart-wizard.png b/tests/_output/bootstrap/chart-wizard/chart-wizard.png new file mode 100644 index 00000000000..158dfc7e1e4 Binary files /dev/null and b/tests/_output/bootstrap/chart-wizard/chart-wizard.png differ diff --git a/tests/_output/bootstrap/chart-wizard/tab-chart-sections-expanded.png b/tests/_output/bootstrap/chart-wizard/tab-chart-sections-expanded.png new file mode 100644 index 00000000000..4ba8d6ea46d Binary files /dev/null and b/tests/_output/bootstrap/chart-wizard/tab-chart-sections-expanded.png differ diff --git a/tests/_output/bootstrap/chart-wizard/tab-data-sections-expanded.png b/tests/_output/bootstrap/chart-wizard/tab-data-sections-expanded.png new file mode 100644 index 00000000000..044ff3e5339 Binary files /dev/null and b/tests/_output/bootstrap/chart-wizard/tab-data-sections-expanded.png differ diff --git a/tests/_output/bootstrap/chart-wizard/tab-format-sections-expanded.png b/tests/_output/bootstrap/chart-wizard/tab-format-sections-expanded.png new file mode 100644 index 00000000000..a6286bc9afb Binary files /dev/null and b/tests/_output/bootstrap/chart-wizard/tab-format-sections-expanded.png differ diff --git a/tests/_output/bootstrap/chat/chat-content-rtl.png b/tests/_output/bootstrap/chat/chat-content-rtl.png index d91efaabf79..c17a4de23c8 100644 Binary files a/tests/_output/bootstrap/chat/chat-content-rtl.png and b/tests/_output/bootstrap/chat/chat-content-rtl.png differ diff --git a/tests/_output/bootstrap/chat/chat-content.png b/tests/_output/bootstrap/chat/chat-content.png index aab5ea2cf33..678c99fde8d 100644 Binary files a/tests/_output/bootstrap/chat/chat-content.png and b/tests/_output/bootstrap/chat/chat-content.png differ diff --git a/tests/_output/classic/chart-wizard/chart-wizard-icon-area-states.png b/tests/_output/classic/chart-wizard/chart-wizard-icon-area-states.png new file mode 100644 index 00000000000..956a78e0788 Binary files /dev/null and b/tests/_output/classic/chart-wizard/chart-wizard-icon-area-states.png differ diff --git a/tests/_output/classic/chart-wizard/chart-wizard-tabs-content.png b/tests/_output/classic/chart-wizard/chart-wizard-tabs-content.png new file mode 100644 index 00000000000..43342145f10 Binary files /dev/null and b/tests/_output/classic/chart-wizard/chart-wizard-tabs-content.png differ diff --git a/tests/_output/classic/chart-wizard/chart-wizard.png b/tests/_output/classic/chart-wizard/chart-wizard.png new file mode 100644 index 00000000000..de7d21226a2 Binary files /dev/null and b/tests/_output/classic/chart-wizard/chart-wizard.png differ diff --git a/tests/_output/classic/chart-wizard/tab-chart-sections-expanded.png b/tests/_output/classic/chart-wizard/tab-chart-sections-expanded.png new file mode 100644 index 00000000000..9fa558018f0 Binary files /dev/null and b/tests/_output/classic/chart-wizard/tab-chart-sections-expanded.png differ diff --git a/tests/_output/classic/chart-wizard/tab-data-sections-expanded.png b/tests/_output/classic/chart-wizard/tab-data-sections-expanded.png new file mode 100644 index 00000000000..30be3253687 Binary files /dev/null and b/tests/_output/classic/chart-wizard/tab-data-sections-expanded.png differ diff --git a/tests/_output/classic/chart-wizard/tab-format-sections-expanded.png b/tests/_output/classic/chart-wizard/tab-format-sections-expanded.png new file mode 100644 index 00000000000..d95c8533fe4 Binary files /dev/null and b/tests/_output/classic/chart-wizard/tab-format-sections-expanded.png differ diff --git a/tests/_output/classic/chat/chat-content-rtl.png b/tests/_output/classic/chat/chat-content-rtl.png index 647cfc4e6ad..eb0771352f6 100644 Binary files a/tests/_output/classic/chat/chat-content-rtl.png and b/tests/_output/classic/chat/chat-content-rtl.png differ diff --git a/tests/_output/classic/chat/chat-content.png b/tests/_output/classic/chat/chat-content.png index 9bc0812e81e..d06eb98390f 100644 Binary files a/tests/_output/classic/chat/chat-content.png and b/tests/_output/classic/chat/chat-content.png differ diff --git a/tests/_output/default/chart-wizard/chart-wizard-icon-area-states.png b/tests/_output/default/chart-wizard/chart-wizard-icon-area-states.png new file mode 100644 index 00000000000..70d885967ca Binary files /dev/null and b/tests/_output/default/chart-wizard/chart-wizard-icon-area-states.png differ diff --git a/tests/_output/default/chart-wizard/chart-wizard-tabs-content.png b/tests/_output/default/chart-wizard/chart-wizard-tabs-content.png new file mode 100644 index 00000000000..61f793d279c Binary files /dev/null and b/tests/_output/default/chart-wizard/chart-wizard-tabs-content.png differ diff --git a/tests/_output/default/chart-wizard/chart-wizard.png b/tests/_output/default/chart-wizard/chart-wizard.png new file mode 100644 index 00000000000..982e35e0099 Binary files /dev/null and b/tests/_output/default/chart-wizard/chart-wizard.png differ diff --git a/tests/_output/default/chart-wizard/tab-chart-sections-expanded.png b/tests/_output/default/chart-wizard/tab-chart-sections-expanded.png new file mode 100644 index 00000000000..ae7c0c53a7f Binary files /dev/null and b/tests/_output/default/chart-wizard/tab-chart-sections-expanded.png differ diff --git a/tests/_output/default/chart-wizard/tab-data-sections-expanded.png b/tests/_output/default/chart-wizard/tab-data-sections-expanded.png new file mode 100644 index 00000000000..0d621bee687 Binary files /dev/null and b/tests/_output/default/chart-wizard/tab-data-sections-expanded.png differ diff --git a/tests/_output/default/chart-wizard/tab-format-sections-expanded.png b/tests/_output/default/chart-wizard/tab-format-sections-expanded.png new file mode 100644 index 00000000000..4d55c837869 Binary files /dev/null and b/tests/_output/default/chart-wizard/tab-format-sections-expanded.png differ diff --git a/tests/_output/default/chat/chat-content-rtl.png b/tests/_output/default/chat/chat-content-rtl.png index 3dcab977c62..651235bab49 100644 Binary files a/tests/_output/default/chat/chat-content-rtl.png and b/tests/_output/default/chat/chat-content-rtl.png differ diff --git a/tests/_output/default/chat/chat-content.png b/tests/_output/default/chat/chat-content.png index 745c9c4b500..613a1991688 100644 Binary files a/tests/_output/default/chat/chat-content.png and b/tests/_output/default/chat/chat-content.png differ diff --git a/tests/_output/fluent/chart-wizard/chart-wizard-icon-area-states.png b/tests/_output/fluent/chart-wizard/chart-wizard-icon-area-states.png new file mode 100644 index 00000000000..8494f6dad82 Binary files /dev/null and b/tests/_output/fluent/chart-wizard/chart-wizard-icon-area-states.png differ diff --git a/tests/_output/fluent/chart-wizard/chart-wizard-tabs-content.png b/tests/_output/fluent/chart-wizard/chart-wizard-tabs-content.png new file mode 100644 index 00000000000..85c2341b405 Binary files /dev/null and b/tests/_output/fluent/chart-wizard/chart-wizard-tabs-content.png differ diff --git a/tests/_output/fluent/chart-wizard/chart-wizard.png b/tests/_output/fluent/chart-wizard/chart-wizard.png new file mode 100644 index 00000000000..4ec4fb43362 Binary files /dev/null and b/tests/_output/fluent/chart-wizard/chart-wizard.png differ diff --git a/tests/_output/fluent/chart-wizard/tab-chart-sections-expanded.png b/tests/_output/fluent/chart-wizard/tab-chart-sections-expanded.png new file mode 100644 index 00000000000..0875dc34434 Binary files /dev/null and b/tests/_output/fluent/chart-wizard/tab-chart-sections-expanded.png differ diff --git a/tests/_output/fluent/chart-wizard/tab-data-sections-expanded.png b/tests/_output/fluent/chart-wizard/tab-data-sections-expanded.png new file mode 100644 index 00000000000..efa7e4dd556 Binary files /dev/null and b/tests/_output/fluent/chart-wizard/tab-data-sections-expanded.png differ diff --git a/tests/_output/fluent/chart-wizard/tab-format-sections-expanded.png b/tests/_output/fluent/chart-wizard/tab-format-sections-expanded.png new file mode 100644 index 00000000000..77991c187c4 Binary files /dev/null and b/tests/_output/fluent/chart-wizard/tab-format-sections-expanded.png differ diff --git a/tests/_output/fluent/chat/chat-content-rtl.png b/tests/_output/fluent/chat/chat-content-rtl.png index f0e264fcef8..c45c4eb71e9 100644 Binary files a/tests/_output/fluent/chat/chat-content-rtl.png and b/tests/_output/fluent/chat/chat-content-rtl.png differ diff --git a/tests/_output/fluent/chat/chat-content.png b/tests/_output/fluent/chat/chat-content.png index 06dc941a7d4..d6aeba358d5 100644 Binary files a/tests/_output/fluent/chat/chat-content.png and b/tests/_output/fluent/chat/chat-content.png differ diff --git a/tests/_output/material/chart-wizard/chart-wizard-icon-area-states.png b/tests/_output/material/chart-wizard/chart-wizard-icon-area-states.png new file mode 100644 index 00000000000..44fb25e9231 Binary files /dev/null and b/tests/_output/material/chart-wizard/chart-wizard-icon-area-states.png differ diff --git a/tests/_output/material/chart-wizard/chart-wizard-tabs-content.png b/tests/_output/material/chart-wizard/chart-wizard-tabs-content.png new file mode 100644 index 00000000000..b514846bccc Binary files /dev/null and b/tests/_output/material/chart-wizard/chart-wizard-tabs-content.png differ diff --git a/tests/_output/material/chart-wizard/chart-wizard.png b/tests/_output/material/chart-wizard/chart-wizard.png new file mode 100644 index 00000000000..a2ca07e92a3 Binary files /dev/null and b/tests/_output/material/chart-wizard/chart-wizard.png differ diff --git a/tests/_output/material/chart-wizard/tab-chart-sections-expanded.png b/tests/_output/material/chart-wizard/tab-chart-sections-expanded.png new file mode 100644 index 00000000000..aab910eb2a3 Binary files /dev/null and b/tests/_output/material/chart-wizard/tab-chart-sections-expanded.png differ diff --git a/tests/_output/material/chart-wizard/tab-data-sections-expanded.png b/tests/_output/material/chart-wizard/tab-data-sections-expanded.png new file mode 100644 index 00000000000..1529bac3acd Binary files /dev/null and b/tests/_output/material/chart-wizard/tab-data-sections-expanded.png differ diff --git a/tests/_output/material/chart-wizard/tab-format-sections-expanded.png b/tests/_output/material/chart-wizard/tab-format-sections-expanded.png new file mode 100644 index 00000000000..a39c9f395b7 Binary files /dev/null and b/tests/_output/material/chart-wizard/tab-format-sections-expanded.png differ diff --git a/tests/_output/material/chat/chat-content-rtl.png b/tests/_output/material/chat/chat-content-rtl.png index e4acd8d865e..fb97de9de2c 100644 Binary files a/tests/_output/material/chat/chat-content-rtl.png and b/tests/_output/material/chat/chat-content-rtl.png differ diff --git a/tests/_output/material/chat/chat-content.png b/tests/_output/material/chat/chat-content.png index d5c46077955..507241bd831 100644 Binary files a/tests/_output/material/chat/chat-content.png and b/tests/_output/material/chat/chat-content.png differ diff --git a/tests/_output/nouvelle/chart-wizard/chart-wizard-icon-area-states.png b/tests/_output/nouvelle/chart-wizard/chart-wizard-icon-area-states.png new file mode 100644 index 00000000000..8e0463173bb Binary files /dev/null and b/tests/_output/nouvelle/chart-wizard/chart-wizard-icon-area-states.png differ diff --git a/tests/_output/nouvelle/chart-wizard/chart-wizard-tabs-content.png b/tests/_output/nouvelle/chart-wizard/chart-wizard-tabs-content.png new file mode 100644 index 00000000000..6f41e0d4eac Binary files /dev/null and b/tests/_output/nouvelle/chart-wizard/chart-wizard-tabs-content.png differ diff --git a/tests/_output/nouvelle/chart-wizard/chart-wizard.png b/tests/_output/nouvelle/chart-wizard/chart-wizard.png new file mode 100644 index 00000000000..fdc5db11606 Binary files /dev/null and b/tests/_output/nouvelle/chart-wizard/chart-wizard.png differ diff --git a/tests/_output/nouvelle/chart-wizard/tab-chart-sections-expanded.png b/tests/_output/nouvelle/chart-wizard/tab-chart-sections-expanded.png new file mode 100644 index 00000000000..004cd773bd1 Binary files /dev/null and b/tests/_output/nouvelle/chart-wizard/tab-chart-sections-expanded.png differ diff --git a/tests/_output/nouvelle/chart-wizard/tab-data-sections-expanded.png b/tests/_output/nouvelle/chart-wizard/tab-data-sections-expanded.png new file mode 100644 index 00000000000..e008514336d Binary files /dev/null and b/tests/_output/nouvelle/chart-wizard/tab-data-sections-expanded.png differ diff --git a/tests/_output/nouvelle/chart-wizard/tab-format-sections-expanded.png b/tests/_output/nouvelle/chart-wizard/tab-format-sections-expanded.png new file mode 100644 index 00000000000..669f6bed7aa Binary files /dev/null and b/tests/_output/nouvelle/chart-wizard/tab-format-sections-expanded.png differ diff --git a/tests/chart-wizard/chart-wizard-icon-area-states.html b/tests/chart-wizard/chart-wizard-icon-area-states.html new file mode 100644 index 00000000000..0f917cb9a4f --- /dev/null +++ b/tests/chart-wizard/chart-wizard-icon-area-states.html @@ -0,0 +1,75 @@ + + + + Document + + + + + + + +
+
+
+
+
States
+ +
+ + + + + +
+
+
+
+
+
+ + + +
Normal +
+
+
+ + + +
Focus +
+
+
+ + + +
Selected +
+
+
+
+
+
+
+ + diff --git a/tests/chart-wizard/chart-wizard-tabs-content.html b/tests/chart-wizard/chart-wizard-tabs-content.html new file mode 100644 index 00000000000..286b796f543 --- /dev/null +++ b/tests/chart-wizard/chart-wizard-tabs-content.html @@ -0,0 +1,284 @@ + + + + Document + + + + + + + +
+
Chart Tab
+
Data Tab
+
Format Tab
+
+
+
+
    +
  • + Chart +
    • +
  • + Data +
    • +
  • + Format +
    • +
+
+
+
+
+
Bar Chart
+ +
+ + + + + +
+
+
+
+
+
+
+
Pie Chart
+ +
+ + + + + +
+
+
+
+
+
+
+
Column Chart
+ +
+ + + + + +
+
+
+
+
+
+
+
Line Chart
+ +
+ + + + + +
+
+
+
+
+
+
+
Scatter Chart
+ +
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
    +
  • + Chart +
    • +
  • + Data +
    • +
  • + Format +
    • +
+
+
+
+
+
Configuration
+ +
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
    +
  • + Chart +
    • +
  • + Data +
    • +
  • + Format +
    • +
+
+
+
+
+
Chart area
+ +
+ + + + + +
+
+
+
+
+
+
+
Title
+ +
+ + + + + +
+
+
+
+
+
+
+
Series
+ +
+ + + + + +
+
+
+
+
+
+
+
Legend
+ +
+ + + + + +
+
+
+
+
+
+
+
Category axis
+ +
+ + + + + +
+
+
+
+
+
+
+
Value axis
+ +
+ + + + + +
+
+
+
+
+
+
+
+
+ + diff --git a/tests/chart-wizard/chart-wizard.html b/tests/chart-wizard/chart-wizard.html new file mode 100644 index 00000000000..c4d56a45351 --- /dev/null +++ b/tests/chart-wizard/chart-wizard.html @@ -0,0 +1,419 @@ + + + + Document + + + + + + + +
+
+
+
+ Chart Preview +
+ + +
+
+
+
+
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2002 + 2003 + 2004 + 2005 + 2006 + 2007 + 2008 + 2009 + 2010 + 2011 + -8% + -6% + -4% + -2% + 0% + 2% + 4% + 6% + 8% + 10% + 12% + Gross domestic product growth + /GDP annual %/ + + + + India + + + + + + + World + + + + + + + Haiti + + + + + + +
+
+
+
+
+
+ + + +
+
+
+
+
+
    +
  • + Chart +
    • +
  • + Data +
    • +
  • + Format +
    • +
+
+
+
+
+
Bar chart
+ +
+ + + + + +
+
+
+
+
+
+ + + +
Bar +
+
+
+ + + +
Stacked Bar +
+
+
+ + + +
100% Stacked Bar +
+
+
+
+
+
+
+
Pie chart
+ +
+ + + + + +
+
+
+
+
+
+ + + +
Pie +
+
+
+
+
+
+
+
Column chart
+ +
+ + + + + +
+
+
+
+
+
+ + + +
Column +
+
+
+ + + +
Stacked Column +
+
+
+ + + +
100% Stacked Column +
+
+
+
+
+
+
+
Line chart
+ +
+ + + + + +
+
+
+
+
+
+ + + +
Line +
+
+
+ + + +
Stacked Line +
+
+
+ + + +
100% Stacked Line +
+
+
+
+
+
+
+
Scatter chart
+ +
+ + + + + +
+
+
+
+
+
+ + + +
Scatter +
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/tests/chart-wizard/tab-chart-sections-expanded.html b/tests/chart-wizard/tab-chart-sections-expanded.html new file mode 100644 index 00000000000..83503c49365 --- /dev/null +++ b/tests/chart-wizard/tab-chart-sections-expanded.html @@ -0,0 +1,244 @@ + + + + Document + + + + + + + +
+
+ Bar chart section expanded +
+
+
+
Bar chart
+ +
+ + + + + +
+
+
+
+
+
+ + + +
Bar +
+
+
+ + + +
Stacked Bar +
+
+
+ + + +
100% Stacked Bar +
+
+
+
+
+
+
+
+ Pie chart section expanded +
+
+
+
Pie chart
+ +
+ + + + + +
+
+
+
+
+
+ + + +
Pie +
+
+
+
+
+
+
+
+ Column chart section expanded +
+
+
+
Column chart
+ +
+ + + + + +
+
+
+
+
+
+ + + +
Column +
+
+
+ + + +
Stacked Column +
+
+
+ + + +
100% Stacked Column +
+
+
+
+
+
+
+
+ Line chart section expanded +
+
+
+
Line chart
+ +
+ + + + + +
+
+
+
+
+
+ + + +
Line +
+
+
+ + + +
Stacked Line +
+
+
+ + + +
100% Stacked Line +
+
+
+
+
+
+
+
+ Scatter chart section expanded +
+
+
+
Scatter chart
+ +
+ + + + + +
+
+
+
+
+
+ + + +
Scatter +
+
+
+
+
+
+
+
+ + diff --git a/tests/chart-wizard/tab-data-sections-expanded.html b/tests/chart-wizard/tab-data-sections-expanded.html new file mode 100644 index 00000000000..d94a7e2bb82 --- /dev/null +++ b/tests/chart-wizard/tab-data-sections-expanded.html @@ -0,0 +1,198 @@ + + + + Document + + + + + + + +
+
+ Configuration section expanded +
+
+
Configuration
+ +
+ + + + + +
+
+
+
+
+ X axis (category) + + + Current item + + + +
+
+ Series +
+
+ +
+
+
+
+
NameTypeDefault valueComputed value
$kendo-picker-flat-hover-border
$kendo-pivotgrid-treeview-padding-y String$kendo-picker-hover-bordervar(--kendo-color-on-app-surface, #212121)k-spacing(0)var(--kendo-spacing-0, 0px)
Description
The border color of the flat hovered Picker components.
+
Description
The vertical padding of the PivotGrid treeview.
var(--kendo-color-on-app-surface, #212121)
Description
The text color of the Prompt.
+
Description
The text color of the AIPrompt.
var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Prompt.
+
Description
The background color of the AIPrompt.
var(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Prompt.
+
Description
The border color of the AIPrompt.
var(--kendo-color-on-app-surface, #212121)
Description
The text color of the Prompt header.
+
Description
The text color of the AIPrompt header.
var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Prompt header.
+
Description
The background color of the AIPrompt header.
var(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Prompt header.
+
Description
The border color of the AIPrompt header.
var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the Prompt content.
+
Description
The vertical padding of the AIPrompt content.
var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Prompt content.
+
Description
The horizontal padding of the AIPrompt content.
var(--kendo-spacing-4, 1rem)
Description
The spacing between the items of the Prompt content.
+
Description
The spacing between the items of the AIPrompt content.
var(--kendo-color-on-app-surface, #212121)
Description
The text color of the Prompt content.
+
Description
The text color of the AIPrompt content.
var(--kendo-color-app-surface, #ffffff)
Description
The background color of the Prompt content.
+
Description
The background color of the AIPrompt content.
var(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The text border of the Prompt content.
+
Description
The text border of the AIPrompt content.
var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the items of the Prompt content expander.
+
Description
The spacing between the items of the AIPrompt content expander.
var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Prompt suggestion container.
+
Description
The vertical padding of the AIPrompt suggestion container.
var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Prompt suggestion container.
+
Description
The horizontal padding of the AIPrompt suggestion container.
var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Prompt suggestion container.
+
Description
The border radius of the AIPrompt suggestion container.
var(--kendo-color-on-app-surface, #212121)
Description
The text color of the Prompt suggestion container.
+
Description
The text color of the AIPrompt suggestion container.
var(--kendo-color-app-surface, #ffffff)
Description
The background color of the Prompt suggestion container.
+
Description
The background color of the AIPrompt suggestion container.
var(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Prompt suggestion container.
+
Description
The border color of the AIPrompt suggestion container.
var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The elevation of the Prompt suggestion container.
+
Description
The elevation of the AIPrompt suggestion container.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + Series Name + +
+ + + + Series Name + +
+ + + + Series Name + +
+ + + + Series Name + +
+ + + + Series Name + +
+ + + + +
+
+ Y axis (value) + + + Current item + + + +
+ + + + + + + + diff --git a/tests/chart-wizard/tab-format-sections-expanded.html b/tests/chart-wizard/tab-format-sections-expanded.html new file mode 100644 index 00000000000..d2c1e60c0e7 --- /dev/null +++ b/tests/chart-wizard/tab-format-sections-expanded.html @@ -0,0 +1,765 @@ + + + + Document + + + + + + + +
+
+ ChartArea section expanded +
+
+
Chart area
+ +
+ + + + + +
+
+
+
+
+ Margins +
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+
+
+
+ Background +
+ +
+ + + + + + + + +
+
+
+
+
+
+
+
+
+ Title section expanded +
+
+
Title
+ +
+ + + + + +
+
+
+
+
+
+ +
+ + Chart title + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + + + + + +
+
+
+
+
+
+
+
+
+ CategoryAxis section expanded +
+
+
Category axis
+ +
+ + + + + +
+
+
+
+
+ Title +
+
+
+ + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + + + + + +
+
+
+
+
+ Labels +
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + + + + + +
+
+
+ +
+ + + 0° + + + +
+
+ +
+
+ + + + +
+
+
+
+
+
+
+
+
+
+ ValueAxis section expanded +
+
+
Value axis
+ +
+ + + + + +
+
+
+
+
+ Title +
+
+
+ + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + + + + + +
+
+
+
+
+ Labels +
+
+ +
+ + + Number + + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + + + + + +
+
+
+ +
+ + + 0° + + + +
+
+
+
+
+
+
+
+
+
+ Legend section expanded +
+
+
Legend
+ +
+ + + + + +
+
+
+
+
+ + + + On + Off + + + + + +
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + + + + + +
+
+
+ +
+ + + Top + + + +
+
+
+
+
+
+
+
+
+ Series section expanded +
+
+
Series
+ +
+ + + + + +
+
+
+
+
+ +
+ + All Series + + +
+
+
+ +
+ + + + + + + + +
+
+
+
+ + + + +
+
+
+
+
+
+
+
+ + diff --git a/tests/chat/chat-content-rtl.html b/tests/chat/chat-content-rtl.html index 6ef02c7396a..30f24684ac9 100644 --- a/tests/chat/chat-content-rtl.html +++ b/tests/chat/chat-content-rtl.html @@ -123,7 +123,8 @@
Quick Reply - Another quick + Focused + Hovered quick Reply with different length
Card Deck Normal
diff --git a/tests/chat/chat-content.html b/tests/chat/chat-content.html index 7346c91499a..ae711a2aafc 100644 --- a/tests/chat/chat-content.html +++ b/tests/chat/chat-content.html @@ -123,7 +123,8 @@
Quick Reply - Another quick + Focused + Hovered quick Reply with different length
Card Deck Normal