From eaf43096f3667fcc758549ab12ff1fb6a784e483 Mon Sep 17 00:00:00 2001 From: Mohamed Imran Date: Wed, 7 May 2025 15:45:04 +0530 Subject: [PATCH 1/9] Pure React Components release packages committed --- README.md | 260 +- components/base/README.md | 43 + components/base/bin/syncfusion-license.js | 2 + components/base/index.d.ts | 4 + components/base/index.js | 4 + components/base/intl.d.ts | 4 + components/base/intl.js | 4 + components/base/license | 13 + components/base/package.json | 30 + components/base/src/animation.d.ts | 115 + components/base/src/animation.js | 198 + components/base/src/base.d.ts | 81 + components/base/src/base.js | 93 + components/base/src/browser.d.ts | 96 + components/base/src/browser.js | 334 + components/base/src/component.d.ts | 18 + components/base/src/component.js | 86 + components/base/src/dom.d.ts | 199 + components/base/src/dom.js | 453 ++ components/base/src/event-handler.d.ts | 25 + components/base/src/event-handler.js | 134 + components/base/src/fetch.d.ts | 108 + components/base/src/fetch.js | 110 + components/base/src/hijri-parser.d.ts | 17 + components/base/src/hijri-parser.js | 206 + components/base/src/index.d.ts | 21 + components/base/src/index.js | 21 + components/base/src/internationalization.d.ts | 236 + components/base/src/internationalization.js | 214 + components/base/src/intl/date-formatter.d.ts | 54 + components/base/src/intl/date-formatter.js | 280 + components/base/src/intl/date-parser.d.ts | 109 + components/base/src/intl/date-parser.js | 377 ++ components/base/src/intl/index.d.ts | 8 + components/base/src/intl/index.js | 8 + components/base/src/intl/intl-base.d.ts | 274 + components/base/src/intl/intl-base.js | 942 +++ .../base/src/intl/number-formatter.d.ts | 68 + components/base/src/intl/number-formatter.js | 375 ++ components/base/src/intl/number-parser.d.ts | 33 + components/base/src/intl/number-parser.js | 127 + components/base/src/intl/parser-base.d.ts | 111 + components/base/src/intl/parser-base.js | 195 + components/base/src/l10n.d.ts | 32 + components/base/src/l10n.js | 65 + components/base/src/observer.d.ts | 26 + components/base/src/observer.js | 167 + components/base/src/provider.d.ts | 42 + components/base/src/provider.js | 18 + components/base/src/ripple.d.ts | 96 + components/base/src/ripple.js | 151 + components/base/src/sanitize-helper.d.ts | 51 + components/base/src/sanitize-helper.js | 240 + components/base/src/svg-icon.d.ts | 44 + components/base/src/svg-icon.js | 13 + components/base/src/touch.d.ts | 185 + components/base/src/touch.js | 326 + components/base/src/util.d.ts | 176 + components/base/src/util.js | 381 ++ components/base/src/validate-lic.d.ts | 73 + components/base/src/validate-lic.js | 448 ++ components/base/styles/_all.scss | 2 + .../styles/_material3-dark-definition.scss | 15 + .../base/styles/_material3-definition.scss | 16 + components/base/styles/animation/_all.scss | 505 ++ components/base/styles/common/_all.scss | 2 + components/base/styles/common/_core.scss | 111 + components/base/styles/common/_mixin.scss | 11 + .../styles/definition/_material3-dark.scss | 662 ++ .../base/styles/definition/_material3.scss | 731 ++ components/base/styles/material3-dark.css | 549 ++ components/base/styles/material3-dark.scss | 2 + components/base/styles/material3.css | 605 ++ components/base/styles/material3.scss | 2 + components/buttons/README.md | 156 + components/buttons/button.d.ts | 4 + components/buttons/button.js | 4 + components/buttons/check-box.d.ts | 4 + components/buttons/check-box.js | 4 + components/buttons/chip.d.ts | 4 + components/buttons/chip.js | 4 + components/buttons/chipList.d.ts | 4 + components/buttons/chipList.js | 4 + .../buttons/floating-action-button.d.ts | 4 + components/buttons/floating-action-button.js | 4 + components/buttons/index.d.ts | 4 + components/buttons/index.js | 4 + components/buttons/license | 13 + components/buttons/package.json | 50 + components/buttons/radio-button.d.ts | 4 + components/buttons/radio-button.js | 4 + components/buttons/src/button/button.d.ts | 171 + components/buttons/src/button/button.js | 146 + components/buttons/src/button/index.d.ts | 4 + components/buttons/src/button/index.js | 4 + .../buttons/src/check-box/check-box.d.ts | 74 + components/buttons/src/check-box/check-box.js | 125 + components/buttons/src/check-box/index.d.ts | 4 + components/buttons/src/check-box/index.js | 4 + components/buttons/src/chip/chip.d.ts | 128 + components/buttons/src/chip/chip.js | 117 + components/buttons/src/chip/index.d.ts | 4 + components/buttons/src/chip/index.js | 4 + .../buttons/src/chipList/chip-list.d.ts | 156 + components/buttons/src/chipList/chip-list.js | 226 + components/buttons/src/chipList/index.d.ts | 4 + components/buttons/src/chipList/index.js | 4 + .../floating-action-button.d.ts | 108 + .../floating-action-button.js | 116 + .../src/floating-action-button/index.d.ts | 4 + .../src/floating-action-button/index.js | 4 + components/buttons/src/index.d.ts | 10 + components/buttons/src/index.js | 10 + .../buttons/src/radio-button/index.d.ts | 4 + components/buttons/src/radio-button/index.js | 4 + .../src/radio-button/radio-button.d.ts | 58 + .../buttons/src/radio-button/radio-button.js | 54 + components/buttons/src/switch/index.d.ts | 4 + components/buttons/src/switch/index.js | 4 + components/buttons/src/switch/switch.d.ts | 74 + components/buttons/src/switch/switch.js | 99 + components/buttons/styles/button/_all.scss | 2 + components/buttons/styles/button/_layout.scss | 564 ++ .../button/_material3-dark-definition.scss | 1 + .../styles/button/_material3-definition.scss | 375 ++ components/buttons/styles/button/_mixin.scss | 480 ++ components/buttons/styles/button/_theme.scss | 1677 +++++ .../buttons/styles/button/material3-dark.css | 1635 +++++ .../buttons/styles/button/material3-dark.scss | 3 + .../buttons/styles/button/material3.css | 1689 +++++ .../buttons/styles/button/material3.scss | 3 + components/buttons/styles/check-box/_all.scss | 1 + .../buttons/styles/check-box/_layout.scss | 460 ++ .../check-box/_material3-dark-definition.scss | 1 + .../check-box/_material3-definition.scss | 68 + .../styles/check-box/material3-dark.css | 339 + .../styles/check-box/material3-dark.scss | 3 + .../buttons/styles/check-box/material3.css | 393 ++ .../buttons/styles/check-box/material3.scss | 3 + components/buttons/styles/chips/_all.scss | 2 + components/buttons/styles/chips/_layout.scss | 189 + .../chips/_material3-dark-definition.scss | 1 + .../styles/chips/_material3-definition.scss | 564 ++ components/buttons/styles/chips/_theme.scss | 451 ++ .../buttons/styles/chips/material3-dark.css | 2315 +++++++ .../buttons/styles/chips/material3-dark.scss | 3 + components/buttons/styles/chips/material3.css | 2369 +++++++ .../buttons/styles/chips/material3.scss | 3 + .../styles/floating-action-button/_all.scss | 2 + .../floating-action-button/_layout.scss | 140 + .../_material3-dark-definition.scss | 1 + .../_material3-definition.scss | 27 + .../styles/floating-action-button/_theme.scss | 24 + .../floating-action-button/material3-dark.css | 133 + .../material3-dark.scss | 4 + .../floating-action-button/material3.css | 187 + .../floating-action-button/material3.scss | 4 + components/buttons/styles/material3-dark.css | 5692 ++++++++++++++++ components/buttons/styles/material3-dark.scss | 13 + components/buttons/styles/material3.css | 5746 ++++++++++++++++ components/buttons/styles/material3.scss | 13 + .../buttons/styles/radio-button/_all.scss | 1 + .../buttons/styles/radio-button/_layout.scss | 486 ++ .../_material3-dark-definition.scss | 1 + .../radio-button/_material3-definition.scss | 47 + .../styles/radio-button/material3-dark.css | 297 + .../styles/radio-button/material3-dark.scss | 3 + .../buttons/styles/radio-button/material3.css | 351 + .../styles/radio-button/material3.scss | 3 + components/buttons/styles/switch/_all.scss | 2 + components/buttons/styles/switch/_layout.scss | 644 ++ .../switch/_material3-dark-definition.scss | 1 + .../styles/switch/_material3-definition.scss | 160 + components/buttons/styles/switch/_theme.scss | 406 ++ .../buttons/styles/switch/material3-dark.css | 973 +++ .../buttons/styles/switch/material3-dark.scss | 3 + .../buttons/styles/switch/material3.css | 1027 +++ .../buttons/styles/switch/material3.scss | 3 + components/buttons/switch.d.ts | 4 + components/buttons/switch.js | 4 + components/inputs/README.md | 95 + components/inputs/common.d.ts | 4 + components/inputs/common.js | 4 + components/inputs/index.d.ts | 4 + components/inputs/index.js | 4 + components/inputs/license | 13 + components/inputs/numerictextbox.d.ts | 4 + components/inputs/numerictextbox.js | 4 + components/inputs/package.json | 77 + components/inputs/src/common/index.d.ts | 4 + components/inputs/src/common/index.js | 4 + components/inputs/src/common/inputbase.d.ts | 85 + components/inputs/src/common/inputbase.js | 89 + components/inputs/src/index.d.ts | 7 + components/inputs/src/index.js | 7 + .../inputs/src/numerictextbox/index.d.ts | 4 + components/inputs/src/numerictextbox/index.js | 4 + .../src/numerictextbox/numerictextbox.d.ts | 142 + .../src/numerictextbox/numerictextbox.js | 287 + components/inputs/src/textarea/index.d.ts | 4 + components/inputs/src/textarea/index.js | 4 + components/inputs/src/textarea/textarea.d.ts | 112 + components/inputs/src/textarea/textarea.js | 138 + components/inputs/src/textbox/index.d.ts | 4 + components/inputs/src/textbox/index.js | 4 + components/inputs/src/textbox/textbox.d.ts | 132 + components/inputs/src/textbox/textbox.js | 136 + components/inputs/styles/input/_all.scss | 2 + components/inputs/styles/input/_layout.scss | 5780 ++++++++++++++++ .../input/_material3-dark-definition.scss | 1 + .../styles/input/_material3-definition.scss | 1982 ++++++ .../inputs/styles/input/_responsive.scss | 1 + .../inputs/styles/input/material3-dark.css | 5763 ++++++++++++++++ .../inputs/styles/input/material3-dark.scss | 3 + components/inputs/styles/input/material3.css | 5817 ++++++++++++++++ components/inputs/styles/input/material3.scss | 3 + components/inputs/styles/material3-dark.css | 5953 +++++++++++++++++ components/inputs/styles/material3-dark.scss | 11 + components/inputs/styles/material3.css | 5885 ++++++++++++++++ components/inputs/styles/material3.scss | 12 + .../inputs/styles/numerictextbox/_all.scss | 1 + .../inputs/styles/numerictextbox/_layout.scss | 37 + .../_material3-dark-definition.scss | 1 + .../numerictextbox/_material3-definition.scss | 8 + .../numerictextbox/icons/_material3-dark.scss | 1 + .../styles/numerictextbox/material3-dark.css | 2776 ++++++++ .../styles/numerictextbox/material3-dark.scss | 5 + .../styles/numerictextbox/material3.css | 1415 ++++ .../styles/numerictextbox/material3.scss | 4 + components/inputs/styles/textarea/_all.scss | 1 + .../inputs/styles/textarea/_layout.scss | 36 + .../textarea/_material3-dark-definition.scss | 1 + .../textarea/_material3-definition.scss | 1 + .../inputs/styles/textarea/material3-dark.css | 1363 ++++ .../styles/textarea/material3-dark.scss | 5 + .../inputs/styles/textarea/material3.css | 1417 ++++ .../inputs/styles/textarea/material3.scss | 5 + components/inputs/styles/textbox/_all.scss | 1 + components/inputs/styles/textbox/_layout.scss | 12 + .../textbox/_material3-dark-definition.scss | 1 + .../styles/textbox/_material3-definition.scss | 4 + .../inputs/styles/textbox/material3-dark.css | 1344 ++++ .../inputs/styles/textbox/material3-dark.scss | 4 + .../inputs/styles/textbox/material3.css | 1398 ++++ .../inputs/styles/textbox/material3.scss | 4 + components/inputs/textarea.d.ts | 4 + components/inputs/textarea.js | 4 + components/inputs/textbox.d.ts | 4 + components/inputs/textbox.js | 4 + components/notifications/README.md | 85 + components/notifications/index.d.ts | 4 + components/notifications/index.js | 4 + components/notifications/license | 13 + components/notifications/message.d.ts | 4 + components/notifications/message.js | 4 + components/notifications/package.json | 28 + components/notifications/skeleton.d.ts | 4 + components/notifications/skeleton.js | 4 + components/notifications/src/index.d.ts | 6 + components/notifications/src/index.js | 6 + .../notifications/src/message/index.d.ts | 4 + components/notifications/src/message/index.js | 4 + .../notifications/src/message/message.d.ts | 109 + .../notifications/src/message/message.js | 160 + .../notifications/src/skeleton/index.d.ts | 4 + .../notifications/src/skeleton/index.js | 4 + .../notifications/src/skeleton/skeleton.d.ts | 114 + .../notifications/src/skeleton/skeleton.js | 108 + components/notifications/src/toast/index.d.ts | 4 + components/notifications/src/toast/index.js | 4 + components/notifications/src/toast/toast.d.ts | 297 + components/notifications/src/toast/toast.js | 298 + .../notifications/styles/material3-dark.css | 746 +++ .../notifications/styles/material3-dark.scss | 8 + components/notifications/styles/material3.css | 800 +++ .../notifications/styles/material3.scss | 8 + .../notifications/styles/message/_all.scss | 1 + .../notifications/styles/message/_layout.scss | 171 + .../message/_material3-dark-definition.scss | 1 + .../styles/message/_material3-definition.scss | 116 + .../styles/message/material3-dark.css | 362 + .../styles/message/material3-dark.scss | 3 + .../styles/message/material3.css | 416 ++ .../styles/message/material3.scss | 3 + .../notifications/styles/skeleton/_all.scss | 1 + .../styles/skeleton/_layout.scss | 118 + .../skeleton/_material3-dark-definition.scss | 1 + .../skeleton/_material3-definition.scss | 12 + .../styles/skeleton/material3-dark.css | 78 + .../styles/skeleton/material3-dark.scss | 3 + .../styles/skeleton/material3.css | 132 + .../styles/skeleton/material3.scss | 3 + .../notifications/styles/toast/_all.scss | 1 + .../notifications/styles/toast/_layout.scss | 456 ++ .../toast/_material3-dark-definition.scss | 1 + .../styles/toast/_material3-definition.scss | 119 + .../styles/toast/material3-dark.css | 306 + .../styles/toast/material3-dark.scss | 4 + .../notifications/styles/toast/material3.css | 360 + .../notifications/styles/toast/material3.scss | 4 + components/notifications/toast.d.ts | 4 + components/notifications/toast.js | 4 + components/popups/README.md | 57 + components/popups/common.d.ts | 4 + components/popups/common.js | 4 + components/popups/index.d.ts | 4 + components/popups/index.js | 4 + components/popups/license | 13 + components/popups/package.json | 41 + components/popups/popup.d.ts | 4 + components/popups/popup.js | 4 + components/popups/src/common/collision.d.ts | 55 + components/popups/src/common/collision.js | 165 + components/popups/src/common/index.d.ts | 5 + components/popups/src/common/index.js | 5 + components/popups/src/common/position.d.ts | 34 + components/popups/src/common/position.js | 54 + components/popups/src/index.d.ts | 6 + components/popups/src/index.js | 6 + components/popups/src/popup/index.d.ts | 4 + components/popups/src/popup/index.js | 4 + components/popups/src/popup/popup.d.ts | 263 + components/popups/src/popup/popup.js | 559 ++ components/popups/src/tooltip/index.d.ts | 4 + components/popups/src/tooltip/index.js | 4 + components/popups/src/tooltip/tooltip.d.ts | 266 + components/popups/src/tooltip/tooltip.js | 1209 ++++ components/popups/styles/material3-dark.css | 165 + components/popups/styles/material3-dark.scss | 5 + components/popups/styles/material3.css | 219 + components/popups/styles/material3.scss | 5 + components/popups/styles/popup/_all.scss | 1 + components/popups/styles/popup/_layout.scss | 18 + .../popups/styles/popup/material3-dark.css | 13 + .../popups/styles/popup/material3-dark.scss | 2 + components/popups/styles/popup/material3.css | 67 + components/popups/styles/popup/material3.scss | 2 + components/popups/styles/tooltip/_all.scss | 2 + components/popups/styles/tooltip/_layout.scss | 77 + .../tooltip/_material3-dark-definition.scss | 1 + .../styles/tooltip/_material3-definition.scss | 51 + components/popups/styles/tooltip/_theme.scss | 106 + .../popups/styles/tooltip/material3-dark.css | 152 + .../popups/styles/tooltip/material3-dark.scss | 3 + .../popups/styles/tooltip/material3.css | 206 + .../popups/styles/tooltip/material3.scss | 3 + components/popups/tooltip.d.ts | 4 + components/popups/tooltip.js | 4 + components/splitbuttons/README.md | 73 + components/splitbuttons/dropdown-button.d.ts | 4 + components/splitbuttons/dropdown-button.js | 4 + components/splitbuttons/index.d.ts | 4 + components/splitbuttons/index.js | 4 + components/splitbuttons/license | 13 + components/splitbuttons/package.json | 29 + components/splitbuttons/split-button.d.ts | 4 + components/splitbuttons/split-button.js | 4 + .../src/dropdown-button/dropdown-button.d.ts | 194 + .../src/dropdown-button/dropdown-button.js | 214 + .../src/dropdown-button/index.d.ts | 4 + .../splitbuttons/src/dropdown-button/index.js | 4 + components/splitbuttons/src/index.d.ts | 5 + components/splitbuttons/src/index.js | 5 + .../splitbuttons/src/split-button/index.d.ts | 4 + .../splitbuttons/src/split-button/index.js | 4 + .../src/split-button/split-button.d.ts | 163 + .../src/split-button/split-button.js | 57 + .../styles/drop-down-button/_all.scss | 2 + .../styles/drop-down-button/_layout.scss | 303 + .../_material3-dark-definition.scss | 1 + .../_material3-definition.scss | 49 + .../styles/drop-down-button/_theme.scss | 68 + .../drop-down-button/material3-dark.css | 262 + .../drop-down-button/material3-dark.scss | 4 + .../styles/drop-down-button/material3.css | 316 + .../styles/drop-down-button/material3.scss | 4 + .../splitbuttons/styles/material3-dark.css | 450 ++ .../splitbuttons/styles/material3-dark.scss | 6 + components/splitbuttons/styles/material3.css | 499 ++ components/splitbuttons/styles/material3.scss | 6 + .../styles/split-button/_all.scss | 1 + .../styles/split-button/_layout.scss | 245 + .../_material3-dark-definition.scss | 1 + .../split-button/_material3-definition.scss | 27 + .../styles/split-button/material3-dark.css | 188 + .../styles/split-button/material3-dark.scss | 5 + .../styles/split-button/material3.css | 237 + .../styles/split-button/material3.scss | 5 + license | 13 + 389 files changed, 99167 insertions(+), 2 deletions(-) create mode 100644 components/base/README.md create mode 100644 components/base/bin/syncfusion-license.js create mode 100644 components/base/index.d.ts create mode 100644 components/base/index.js create mode 100644 components/base/intl.d.ts create mode 100644 components/base/intl.js create mode 100644 components/base/license create mode 100644 components/base/package.json create mode 100644 components/base/src/animation.d.ts create mode 100644 components/base/src/animation.js create mode 100644 components/base/src/base.d.ts create mode 100644 components/base/src/base.js create mode 100644 components/base/src/browser.d.ts create mode 100644 components/base/src/browser.js create mode 100644 components/base/src/component.d.ts create mode 100644 components/base/src/component.js create mode 100644 components/base/src/dom.d.ts create mode 100644 components/base/src/dom.js create mode 100644 components/base/src/event-handler.d.ts create mode 100644 components/base/src/event-handler.js create mode 100644 components/base/src/fetch.d.ts create mode 100644 components/base/src/fetch.js create mode 100644 components/base/src/hijri-parser.d.ts create mode 100644 components/base/src/hijri-parser.js create mode 100644 components/base/src/index.d.ts create mode 100644 components/base/src/index.js create mode 100644 components/base/src/internationalization.d.ts create mode 100644 components/base/src/internationalization.js create mode 100644 components/base/src/intl/date-formatter.d.ts create mode 100644 components/base/src/intl/date-formatter.js create mode 100644 components/base/src/intl/date-parser.d.ts create mode 100644 components/base/src/intl/date-parser.js create mode 100644 components/base/src/intl/index.d.ts create mode 100644 components/base/src/intl/index.js create mode 100644 components/base/src/intl/intl-base.d.ts create mode 100644 components/base/src/intl/intl-base.js create mode 100644 components/base/src/intl/number-formatter.d.ts create mode 100644 components/base/src/intl/number-formatter.js create mode 100644 components/base/src/intl/number-parser.d.ts create mode 100644 components/base/src/intl/number-parser.js create mode 100644 components/base/src/intl/parser-base.d.ts create mode 100644 components/base/src/intl/parser-base.js create mode 100644 components/base/src/l10n.d.ts create mode 100644 components/base/src/l10n.js create mode 100644 components/base/src/observer.d.ts create mode 100644 components/base/src/observer.js create mode 100644 components/base/src/provider.d.ts create mode 100644 components/base/src/provider.js create mode 100644 components/base/src/ripple.d.ts create mode 100644 components/base/src/ripple.js create mode 100644 components/base/src/sanitize-helper.d.ts create mode 100644 components/base/src/sanitize-helper.js create mode 100644 components/base/src/svg-icon.d.ts create mode 100644 components/base/src/svg-icon.js create mode 100644 components/base/src/touch.d.ts create mode 100644 components/base/src/touch.js create mode 100644 components/base/src/util.d.ts create mode 100644 components/base/src/util.js create mode 100644 components/base/src/validate-lic.d.ts create mode 100644 components/base/src/validate-lic.js create mode 100644 components/base/styles/_all.scss create mode 100644 components/base/styles/_material3-dark-definition.scss create mode 100644 components/base/styles/_material3-definition.scss create mode 100644 components/base/styles/animation/_all.scss create mode 100644 components/base/styles/common/_all.scss create mode 100644 components/base/styles/common/_core.scss create mode 100644 components/base/styles/common/_mixin.scss create mode 100644 components/base/styles/definition/_material3-dark.scss create mode 100644 components/base/styles/definition/_material3.scss create mode 100644 components/base/styles/material3-dark.css create mode 100644 components/base/styles/material3-dark.scss create mode 100644 components/base/styles/material3.css create mode 100644 components/base/styles/material3.scss create mode 100644 components/buttons/README.md create mode 100644 components/buttons/button.d.ts create mode 100644 components/buttons/button.js create mode 100644 components/buttons/check-box.d.ts create mode 100644 components/buttons/check-box.js create mode 100644 components/buttons/chip.d.ts create mode 100644 components/buttons/chip.js create mode 100644 components/buttons/chipList.d.ts create mode 100644 components/buttons/chipList.js create mode 100644 components/buttons/floating-action-button.d.ts create mode 100644 components/buttons/floating-action-button.js create mode 100644 components/buttons/index.d.ts create mode 100644 components/buttons/index.js create mode 100644 components/buttons/license create mode 100644 components/buttons/package.json create mode 100644 components/buttons/radio-button.d.ts create mode 100644 components/buttons/radio-button.js create mode 100644 components/buttons/src/button/button.d.ts create mode 100644 components/buttons/src/button/button.js create mode 100644 components/buttons/src/button/index.d.ts create mode 100644 components/buttons/src/button/index.js create mode 100644 components/buttons/src/check-box/check-box.d.ts create mode 100644 components/buttons/src/check-box/check-box.js create mode 100644 components/buttons/src/check-box/index.d.ts create mode 100644 components/buttons/src/check-box/index.js create mode 100644 components/buttons/src/chip/chip.d.ts create mode 100644 components/buttons/src/chip/chip.js create mode 100644 components/buttons/src/chip/index.d.ts create mode 100644 components/buttons/src/chip/index.js create mode 100644 components/buttons/src/chipList/chip-list.d.ts create mode 100644 components/buttons/src/chipList/chip-list.js create mode 100644 components/buttons/src/chipList/index.d.ts create mode 100644 components/buttons/src/chipList/index.js create mode 100644 components/buttons/src/floating-action-button/floating-action-button.d.ts create mode 100644 components/buttons/src/floating-action-button/floating-action-button.js create mode 100644 components/buttons/src/floating-action-button/index.d.ts create mode 100644 components/buttons/src/floating-action-button/index.js create mode 100644 components/buttons/src/index.d.ts create mode 100644 components/buttons/src/index.js create mode 100644 components/buttons/src/radio-button/index.d.ts create mode 100644 components/buttons/src/radio-button/index.js create mode 100644 components/buttons/src/radio-button/radio-button.d.ts create mode 100644 components/buttons/src/radio-button/radio-button.js create mode 100644 components/buttons/src/switch/index.d.ts create mode 100644 components/buttons/src/switch/index.js create mode 100644 components/buttons/src/switch/switch.d.ts create mode 100644 components/buttons/src/switch/switch.js create mode 100644 components/buttons/styles/button/_all.scss create mode 100644 components/buttons/styles/button/_layout.scss create mode 100644 components/buttons/styles/button/_material3-dark-definition.scss create mode 100644 components/buttons/styles/button/_material3-definition.scss create mode 100644 components/buttons/styles/button/_mixin.scss create mode 100644 components/buttons/styles/button/_theme.scss create mode 100644 components/buttons/styles/button/material3-dark.css create mode 100644 components/buttons/styles/button/material3-dark.scss create mode 100644 components/buttons/styles/button/material3.css create mode 100644 components/buttons/styles/button/material3.scss create mode 100644 components/buttons/styles/check-box/_all.scss create mode 100644 components/buttons/styles/check-box/_layout.scss create mode 100644 components/buttons/styles/check-box/_material3-dark-definition.scss create mode 100644 components/buttons/styles/check-box/_material3-definition.scss create mode 100644 components/buttons/styles/check-box/material3-dark.css create mode 100644 components/buttons/styles/check-box/material3-dark.scss create mode 100644 components/buttons/styles/check-box/material3.css create mode 100644 components/buttons/styles/check-box/material3.scss create mode 100644 components/buttons/styles/chips/_all.scss create mode 100644 components/buttons/styles/chips/_layout.scss create mode 100644 components/buttons/styles/chips/_material3-dark-definition.scss create mode 100644 components/buttons/styles/chips/_material3-definition.scss create mode 100644 components/buttons/styles/chips/_theme.scss create mode 100644 components/buttons/styles/chips/material3-dark.css create mode 100644 components/buttons/styles/chips/material3-dark.scss create mode 100644 components/buttons/styles/chips/material3.css create mode 100644 components/buttons/styles/chips/material3.scss create mode 100644 components/buttons/styles/floating-action-button/_all.scss create mode 100644 components/buttons/styles/floating-action-button/_layout.scss create mode 100644 components/buttons/styles/floating-action-button/_material3-dark-definition.scss create mode 100644 components/buttons/styles/floating-action-button/_material3-definition.scss create mode 100644 components/buttons/styles/floating-action-button/_theme.scss create mode 100644 components/buttons/styles/floating-action-button/material3-dark.css create mode 100644 components/buttons/styles/floating-action-button/material3-dark.scss create mode 100644 components/buttons/styles/floating-action-button/material3.css create mode 100644 components/buttons/styles/floating-action-button/material3.scss create mode 100644 components/buttons/styles/material3-dark.css create mode 100644 components/buttons/styles/material3-dark.scss create mode 100644 components/buttons/styles/material3.css create mode 100644 components/buttons/styles/material3.scss create mode 100644 components/buttons/styles/radio-button/_all.scss create mode 100644 components/buttons/styles/radio-button/_layout.scss create mode 100644 components/buttons/styles/radio-button/_material3-dark-definition.scss create mode 100644 components/buttons/styles/radio-button/_material3-definition.scss create mode 100644 components/buttons/styles/radio-button/material3-dark.css create mode 100644 components/buttons/styles/radio-button/material3-dark.scss create mode 100644 components/buttons/styles/radio-button/material3.css create mode 100644 components/buttons/styles/radio-button/material3.scss create mode 100644 components/buttons/styles/switch/_all.scss create mode 100644 components/buttons/styles/switch/_layout.scss create mode 100644 components/buttons/styles/switch/_material3-dark-definition.scss create mode 100644 components/buttons/styles/switch/_material3-definition.scss create mode 100644 components/buttons/styles/switch/_theme.scss create mode 100644 components/buttons/styles/switch/material3-dark.css create mode 100644 components/buttons/styles/switch/material3-dark.scss create mode 100644 components/buttons/styles/switch/material3.css create mode 100644 components/buttons/styles/switch/material3.scss create mode 100644 components/buttons/switch.d.ts create mode 100644 components/buttons/switch.js create mode 100644 components/inputs/README.md create mode 100644 components/inputs/common.d.ts create mode 100644 components/inputs/common.js create mode 100644 components/inputs/index.d.ts create mode 100644 components/inputs/index.js create mode 100644 components/inputs/license create mode 100644 components/inputs/numerictextbox.d.ts create mode 100644 components/inputs/numerictextbox.js create mode 100644 components/inputs/package.json create mode 100644 components/inputs/src/common/index.d.ts create mode 100644 components/inputs/src/common/index.js create mode 100644 components/inputs/src/common/inputbase.d.ts create mode 100644 components/inputs/src/common/inputbase.js create mode 100644 components/inputs/src/index.d.ts create mode 100644 components/inputs/src/index.js create mode 100644 components/inputs/src/numerictextbox/index.d.ts create mode 100644 components/inputs/src/numerictextbox/index.js create mode 100644 components/inputs/src/numerictextbox/numerictextbox.d.ts create mode 100644 components/inputs/src/numerictextbox/numerictextbox.js create mode 100644 components/inputs/src/textarea/index.d.ts create mode 100644 components/inputs/src/textarea/index.js create mode 100644 components/inputs/src/textarea/textarea.d.ts create mode 100644 components/inputs/src/textarea/textarea.js create mode 100644 components/inputs/src/textbox/index.d.ts create mode 100644 components/inputs/src/textbox/index.js create mode 100644 components/inputs/src/textbox/textbox.d.ts create mode 100644 components/inputs/src/textbox/textbox.js create mode 100644 components/inputs/styles/input/_all.scss create mode 100644 components/inputs/styles/input/_layout.scss create mode 100644 components/inputs/styles/input/_material3-dark-definition.scss create mode 100644 components/inputs/styles/input/_material3-definition.scss create mode 100644 components/inputs/styles/input/_responsive.scss create mode 100644 components/inputs/styles/input/material3-dark.css create mode 100644 components/inputs/styles/input/material3-dark.scss create mode 100644 components/inputs/styles/input/material3.css create mode 100644 components/inputs/styles/input/material3.scss create mode 100644 components/inputs/styles/material3-dark.css create mode 100644 components/inputs/styles/material3-dark.scss create mode 100644 components/inputs/styles/material3.css create mode 100644 components/inputs/styles/material3.scss create mode 100644 components/inputs/styles/numerictextbox/_all.scss create mode 100644 components/inputs/styles/numerictextbox/_layout.scss create mode 100644 components/inputs/styles/numerictextbox/_material3-dark-definition.scss create mode 100644 components/inputs/styles/numerictextbox/_material3-definition.scss create mode 100644 components/inputs/styles/numerictextbox/icons/_material3-dark.scss create mode 100644 components/inputs/styles/numerictextbox/material3-dark.css create mode 100644 components/inputs/styles/numerictextbox/material3-dark.scss create mode 100644 components/inputs/styles/numerictextbox/material3.css create mode 100644 components/inputs/styles/numerictextbox/material3.scss create mode 100644 components/inputs/styles/textarea/_all.scss create mode 100644 components/inputs/styles/textarea/_layout.scss create mode 100644 components/inputs/styles/textarea/_material3-dark-definition.scss create mode 100644 components/inputs/styles/textarea/_material3-definition.scss create mode 100644 components/inputs/styles/textarea/material3-dark.css create mode 100644 components/inputs/styles/textarea/material3-dark.scss create mode 100644 components/inputs/styles/textarea/material3.css create mode 100644 components/inputs/styles/textarea/material3.scss create mode 100644 components/inputs/styles/textbox/_all.scss create mode 100644 components/inputs/styles/textbox/_layout.scss create mode 100644 components/inputs/styles/textbox/_material3-dark-definition.scss create mode 100644 components/inputs/styles/textbox/_material3-definition.scss create mode 100644 components/inputs/styles/textbox/material3-dark.css create mode 100644 components/inputs/styles/textbox/material3-dark.scss create mode 100644 components/inputs/styles/textbox/material3.css create mode 100644 components/inputs/styles/textbox/material3.scss create mode 100644 components/inputs/textarea.d.ts create mode 100644 components/inputs/textarea.js create mode 100644 components/inputs/textbox.d.ts create mode 100644 components/inputs/textbox.js create mode 100644 components/notifications/README.md create mode 100644 components/notifications/index.d.ts create mode 100644 components/notifications/index.js create mode 100644 components/notifications/license create mode 100644 components/notifications/message.d.ts create mode 100644 components/notifications/message.js create mode 100644 components/notifications/package.json create mode 100644 components/notifications/skeleton.d.ts create mode 100644 components/notifications/skeleton.js create mode 100644 components/notifications/src/index.d.ts create mode 100644 components/notifications/src/index.js create mode 100644 components/notifications/src/message/index.d.ts create mode 100644 components/notifications/src/message/index.js create mode 100644 components/notifications/src/message/message.d.ts create mode 100644 components/notifications/src/message/message.js create mode 100644 components/notifications/src/skeleton/index.d.ts create mode 100644 components/notifications/src/skeleton/index.js create mode 100644 components/notifications/src/skeleton/skeleton.d.ts create mode 100644 components/notifications/src/skeleton/skeleton.js create mode 100644 components/notifications/src/toast/index.d.ts create mode 100644 components/notifications/src/toast/index.js create mode 100644 components/notifications/src/toast/toast.d.ts create mode 100644 components/notifications/src/toast/toast.js create mode 100644 components/notifications/styles/material3-dark.css create mode 100644 components/notifications/styles/material3-dark.scss create mode 100644 components/notifications/styles/material3.css create mode 100644 components/notifications/styles/material3.scss create mode 100644 components/notifications/styles/message/_all.scss create mode 100644 components/notifications/styles/message/_layout.scss create mode 100644 components/notifications/styles/message/_material3-dark-definition.scss create mode 100644 components/notifications/styles/message/_material3-definition.scss create mode 100644 components/notifications/styles/message/material3-dark.css create mode 100644 components/notifications/styles/message/material3-dark.scss create mode 100644 components/notifications/styles/message/material3.css create mode 100644 components/notifications/styles/message/material3.scss create mode 100644 components/notifications/styles/skeleton/_all.scss create mode 100644 components/notifications/styles/skeleton/_layout.scss create mode 100644 components/notifications/styles/skeleton/_material3-dark-definition.scss create mode 100644 components/notifications/styles/skeleton/_material3-definition.scss create mode 100644 components/notifications/styles/skeleton/material3-dark.css create mode 100644 components/notifications/styles/skeleton/material3-dark.scss create mode 100644 components/notifications/styles/skeleton/material3.css create mode 100644 components/notifications/styles/skeleton/material3.scss create mode 100644 components/notifications/styles/toast/_all.scss create mode 100644 components/notifications/styles/toast/_layout.scss create mode 100644 components/notifications/styles/toast/_material3-dark-definition.scss create mode 100644 components/notifications/styles/toast/_material3-definition.scss create mode 100644 components/notifications/styles/toast/material3-dark.css create mode 100644 components/notifications/styles/toast/material3-dark.scss create mode 100644 components/notifications/styles/toast/material3.css create mode 100644 components/notifications/styles/toast/material3.scss create mode 100644 components/notifications/toast.d.ts create mode 100644 components/notifications/toast.js create mode 100644 components/popups/README.md create mode 100644 components/popups/common.d.ts create mode 100644 components/popups/common.js create mode 100644 components/popups/index.d.ts create mode 100644 components/popups/index.js create mode 100644 components/popups/license create mode 100644 components/popups/package.json create mode 100644 components/popups/popup.d.ts create mode 100644 components/popups/popup.js create mode 100644 components/popups/src/common/collision.d.ts create mode 100644 components/popups/src/common/collision.js create mode 100644 components/popups/src/common/index.d.ts create mode 100644 components/popups/src/common/index.js create mode 100644 components/popups/src/common/position.d.ts create mode 100644 components/popups/src/common/position.js create mode 100644 components/popups/src/index.d.ts create mode 100644 components/popups/src/index.js create mode 100644 components/popups/src/popup/index.d.ts create mode 100644 components/popups/src/popup/index.js create mode 100644 components/popups/src/popup/popup.d.ts create mode 100644 components/popups/src/popup/popup.js create mode 100644 components/popups/src/tooltip/index.d.ts create mode 100644 components/popups/src/tooltip/index.js create mode 100644 components/popups/src/tooltip/tooltip.d.ts create mode 100644 components/popups/src/tooltip/tooltip.js create mode 100644 components/popups/styles/material3-dark.css create mode 100644 components/popups/styles/material3-dark.scss create mode 100644 components/popups/styles/material3.css create mode 100644 components/popups/styles/material3.scss create mode 100644 components/popups/styles/popup/_all.scss create mode 100644 components/popups/styles/popup/_layout.scss create mode 100644 components/popups/styles/popup/material3-dark.css create mode 100644 components/popups/styles/popup/material3-dark.scss create mode 100644 components/popups/styles/popup/material3.css create mode 100644 components/popups/styles/popup/material3.scss create mode 100644 components/popups/styles/tooltip/_all.scss create mode 100644 components/popups/styles/tooltip/_layout.scss create mode 100644 components/popups/styles/tooltip/_material3-dark-definition.scss create mode 100644 components/popups/styles/tooltip/_material3-definition.scss create mode 100644 components/popups/styles/tooltip/_theme.scss create mode 100644 components/popups/styles/tooltip/material3-dark.css create mode 100644 components/popups/styles/tooltip/material3-dark.scss create mode 100644 components/popups/styles/tooltip/material3.css create mode 100644 components/popups/styles/tooltip/material3.scss create mode 100644 components/popups/tooltip.d.ts create mode 100644 components/popups/tooltip.js create mode 100644 components/splitbuttons/README.md create mode 100644 components/splitbuttons/dropdown-button.d.ts create mode 100644 components/splitbuttons/dropdown-button.js create mode 100644 components/splitbuttons/index.d.ts create mode 100644 components/splitbuttons/index.js create mode 100644 components/splitbuttons/license create mode 100644 components/splitbuttons/package.json create mode 100644 components/splitbuttons/split-button.d.ts create mode 100644 components/splitbuttons/split-button.js create mode 100644 components/splitbuttons/src/dropdown-button/dropdown-button.d.ts create mode 100644 components/splitbuttons/src/dropdown-button/dropdown-button.js create mode 100644 components/splitbuttons/src/dropdown-button/index.d.ts create mode 100644 components/splitbuttons/src/dropdown-button/index.js create mode 100644 components/splitbuttons/src/index.d.ts create mode 100644 components/splitbuttons/src/index.js create mode 100644 components/splitbuttons/src/split-button/index.d.ts create mode 100644 components/splitbuttons/src/split-button/index.js create mode 100644 components/splitbuttons/src/split-button/split-button.d.ts create mode 100644 components/splitbuttons/src/split-button/split-button.js create mode 100644 components/splitbuttons/styles/drop-down-button/_all.scss create mode 100644 components/splitbuttons/styles/drop-down-button/_layout.scss create mode 100644 components/splitbuttons/styles/drop-down-button/_material3-dark-definition.scss create mode 100644 components/splitbuttons/styles/drop-down-button/_material3-definition.scss create mode 100644 components/splitbuttons/styles/drop-down-button/_theme.scss create mode 100644 components/splitbuttons/styles/drop-down-button/material3-dark.css create mode 100644 components/splitbuttons/styles/drop-down-button/material3-dark.scss create mode 100644 components/splitbuttons/styles/drop-down-button/material3.css create mode 100644 components/splitbuttons/styles/drop-down-button/material3.scss create mode 100644 components/splitbuttons/styles/material3-dark.css create mode 100644 components/splitbuttons/styles/material3-dark.scss create mode 100644 components/splitbuttons/styles/material3.css create mode 100644 components/splitbuttons/styles/material3.scss create mode 100644 components/splitbuttons/styles/split-button/_all.scss create mode 100644 components/splitbuttons/styles/split-button/_layout.scss create mode 100644 components/splitbuttons/styles/split-button/_material3-dark-definition.scss create mode 100644 components/splitbuttons/styles/split-button/_material3-definition.scss create mode 100644 components/splitbuttons/styles/split-button/material3-dark.css create mode 100644 components/splitbuttons/styles/split-button/material3-dark.scss create mode 100644 components/splitbuttons/styles/split-button/material3.css create mode 100644 components/splitbuttons/styles/split-button/material3.scss create mode 100644 license diff --git a/README.md b/README.md index 187df9c..f105d72 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,258 @@ -# react-ui-components -Syncfusion React UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 14+ UI components that every applications will ever need. +# Syncfusion Pure React UI Components Library + +Syncfusion Pure React UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 15+ UI components that every applications will ever need. + +> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). + +> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. + +See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. + + +## Resources +* [Getting Started](https://react.syncfusion.com/getting-started/introduction) +* [View Online Demos](https://react.syncfusion.com/button) +* [Product Page](https://www.syncfusion.com/react-ui-components?utm_source=npm&utm_campaign=ej2-react-ui-components) + +## Framework highlights + ### Lightweight and user friendly + The entire Library framework is built from scratch to be lightweight and modular. Its footprint can be reduced further by including only the specific components and features your application requires. + ### Modular architecture + All components have been built as modules to enable selective referencing, so only the components and features you need are included in your application. + ### Built for performance + Performance is critical for delivering a good user experience. We ensure that all our components are designed and built to achieve the best performance possible. + ### Responsive and touch friendly + All the components are touch friendly and render adaptively based on the device they are on to provide optimal usage experience on phones, tablets and desktops. + ### Globalization simplified + Easily build applications to be used by a global audience in various language and culture settings. + ### Stay current + With our commitment to at least four major updates per year, you receive the most up-to-date functionality and new components in addition to monthly service packs and bug fixes. Custom patches are available as needed. + +## Control List + +### Buttons + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Button + + npm package @syncfusion/react-buttons + + Source + + Live demo +
+ Chip + + Source + + Live demo +
+ ChipList + + Source + + Live demo +
+ Floating Action Button + + Source + + Live demo +
+ Dropdown Button + + npm package @syncfusion/react-splitbuttons + + Source + + Live demo +
+ Split Button + + Source + + Live demo +
+ +### Notifications + + + + + + + + + + + + + + + + + + +
+ Toast + + npm package @syncfusion/react-notifications + + Source + + Live demo +
+ Skeleton + + Source + + Live demo +
+ Message + + Source + + Live demo +
+ +### Inputs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Numeric TextBox + + npm package @syncfusion/react-inputs + + Source + + Live demo +
+ TextBox + + Source + + Live demo +
+ TextArea + + Source + + Live demo +
+ Checkbox + + npm package @syncfusion/react-buttons + + Source + + Live demo +
+ Radio Button + + Source + + Live demo +
+ Switch Button + + Source + + Live demo +
+ +### Layout + + + + + + + + +
+ Tooltip + + npm package @syncfusion/react-popups + + Source + + Live demo +
+ +## Support + Product support is available for through following mediums. + * Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=ej2-react-ui-components) support system or [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_campaign=ej2-react-ui-components). +* New [GitHub issue](https://github.com/syncfusion/react-ui-components/issues/new). +* Ask your query in [Stack Overflow](https://stackoverflow.com/) with tag `syncfusion` and `react-pure`. +## License +Check the license detail [here](https://github.com/syncfusion/react-ui-components/blob/master/license). + +## Changelog +Check the changelog [here](https://react.syncfusion.com/api/release-notes/29.1.33). + +© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. \ No newline at end of file diff --git a/components/base/README.md b/components/base/README.md new file mode 100644 index 0000000..be657db --- /dev/null +++ b/components/base/README.md @@ -0,0 +1,43 @@ +# React Base Library + +A common package of Essential® studio Pure React components which contains base libraries, providers and functions. + +**Key Features** + +* Animation +* Ripple +* Internationalization +* Localization +* Right to Left + +

+Trusted by the world's leading companies + + Syncfusion logo + +

+ +## Setup + +To install `base` and its dependent packages, use the following command, + +```sh +npm install @syncfusion/react-base +``` + +## Support + +Product support is available through following mediums. + +* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* Live chat + +## License and copyright + +> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). + +> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. + +See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. + +© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. diff --git a/components/base/bin/syncfusion-license.js b/components/base/bin/syncfusion-license.js new file mode 100644 index 0000000..30e04f6 --- /dev/null +++ b/components/base/bin/syncfusion-license.js @@ -0,0 +1,2 @@ +#! /usr/bin/env node +'use strict';var _0x55b28d=_0x3597;(function(_0x3938a2,_0x29ec32){var _0x47c5a6=_0x3597,_0x2fa789=_0x3938a2();while(!![]){try{var _0x11a7ba=-parseInt(_0x47c5a6(0x213))/0x1+parseInt(_0x47c5a6(0x20e))/0x2+-parseInt(_0x47c5a6(0x210))/0x3+-parseInt(_0x47c5a6(0x1f8))/0x4+parseInt(_0x47c5a6(0x206))/0x5*(parseInt(_0x47c5a6(0x1f4))/0x6)+-parseInt(_0x47c5a6(0x201))/0x7+parseInt(_0x47c5a6(0x21d))/0x8*(parseInt(_0x47c5a6(0x1f5))/0x9);if(_0x11a7ba===_0x29ec32)break;else _0x2fa789['push'](_0x2fa789['shift']());}catch(_0x304db1){_0x2fa789['push'](_0x2fa789['shift']());}}}(_0x3ab7,0xaa6b8));var fs=global['fs']=global['fs']||require('fs');const args=process['argv']['slice'](0x2),isActivate=args[0x0]=='activate',customPath=args[0x1],platform=/JavaScript|ASPNET|ASPNETCORE|ASPNETMVC|FileFormats|essentialstudio/i,version=_0x55b28d(0x207);var errorMsg=![];function _0x3597(_0x32a386,_0x36332a){var _0x3ab75c=_0x3ab7();return _0x3597=function(_0x359729,_0x5b8469){_0x359729=_0x359729-0x1ef;var _0x495a7b=_0x3ab75c[_0x359729];return _0x495a7b;},_0x3597(_0x32a386,_0x36332a);}const envKey=process['env'][_0x55b28d(0x1f0)];if(isActivate){var licKey='';if(fs['existsSync'](_0x55b28d(0x209)))licKey=fs[_0x55b28d(0x1fd)]('./syncfusion-license.txt',_0x55b28d(0x1ef));else{if(envKey)licKey=envKey;else customPath&&fs[_0x55b28d(0x208)](customPath)&&(licKey=fs[_0x55b28d(0x1fd)](customPath,_0x55b28d(0x1ef)));}if(licKey!=''){var licKeySplit=licKey['split'](';'),pkey=[0x530000,0x790000,0x4e0000,0x630000,0x460000,0x750000,0x530000,0x690000,0x4f0000,0x6e0000,0x400000,0x440000,0x650000,0x760000,0x500000,0x6c0000,0x610000,0x740000,0x460000,0x6f0000,0x720000,0x6d0000],decryptedStr=[],resultArray=[];for(var i=0x0;i>0x10);}decryptedStr=buffr['split'](';');if(decryptedStr['length']>0x3){var minVersion=parseInt(decryptedStr[0x1]['split']('.')[0x0],0xa),lastValue=parseInt(decryptedStr[0x4],0xa);resultArray['push']({'currentPlatform':decryptedStr[0x0],'version':decryptedStr[0x1],'expiryDate':decryptedStr[0x2],'lastValue':lastValue,'minVersion':minVersion});if(resultArray&&resultArray[_0x55b28d(0x203)])for(const res of resultArray){!platform['test'](res[_0x55b28d(0x21b)])?(errorMsg=!![],console[_0x55b28d(0x1f2)]('The\x20key\x20entered\x20is\x20for\x20the\x20'+res[_0x55b28d(0x21b)]+_0x55b28d(0x1f1))):res['minVersion']>=res[_0x55b28d(0x1fb)]&&res[_0x55b28d(0x211)]!=res[_0x55b28d(0x1fb)]||res[_0x55b28d(0x1fb)] void; + /** + * Triggers when the animation is started + * + * @event begin + */ + begin?: (args: AnimationOptions) => void; + /** + * Triggers when animation is completed + * + * @event end + */ + end?: (args: AnimationOptions) => void; + /** + * Triggers when animation is failed due to any scripts + * + * @event fail + */ + fail?: (args: AnimationOptions) => void; + /** + * Get current time-stamp in progress EventHandler + */ + timeStamp?: number; + /** + * Get current animation element in progress EventHandler + */ + element?: HTMLElement; +} +export interface IAnimation extends AnimationOptions { + /** + * Returns module name as animation + * + * @private + * @returns {void} ? + */ + getModuleName(): string; + animate(element: HTMLElement | string, props?: AnimationOptions): void; + easing: { + [key: string]: string; + }; +} +export declare let animationMode: string | GlobalAnimationMode; +/** + * The Animation function provide options to animate the html DOM elements + * + * @param {AnimationOptions} props - The animation options + * @returns {Animation} The animation object + */ +export declare function Animation(props: AnimationOptions): IAnimation; +export declare namespace Animation { + var stop: (element: HTMLElement, model?: AnimationOptions) => void; + var delayAnimation: (model: AnimationOptions) => void; + var applyAnimation: (model: AnimationOptions) => void; +} +/** + * This method is used to enable or disable the animation for all components. + * + * @param {string|GlobalAnimationMode} value - Specifies the value to enable or disable the animation for all components. When set to 'enable', it enables the animation for all components, regardless of the individual component's animation settings. When set to 'disable', it disables the animation for all components, regardless of the individual component's animation settings. + * @returns {void} + */ +export declare function setGlobalAnimation(value: string | GlobalAnimationMode): void; +/** + * Defines the global animation modes for all components. + */ +export declare enum GlobalAnimationMode { + /** + * Defines the global animation mode as Default. Animation is enabled or disabled based on the component's animation settings. + */ + Default = "Default", + /** + * Defines the global animation mode as Enable. Enables the animation for all components, regardless of the individual component's animation settings. + */ + Enable = "Enable", + /** + * Defines the global animation mode as Disable. Disables the animation for all components, regardless of the individual component's animation settings. + */ + Disable = "Disable" +} diff --git a/components/base/src/animation.js b/components/base/src/animation.js new file mode 100644 index 0000000..ec35351 --- /dev/null +++ b/components/base/src/animation.js @@ -0,0 +1,198 @@ +import { selectAll } from './dom'; +export let animationMode; +/** + * The Animation function provide options to animate the html DOM elements + * + * @param {AnimationOptions} props - The animation options + * @returns {Animation} The animation object + */ +export function Animation(props) { + /** + * @param {AnimationOptions} props - The animation options + * @returns {Animation} The animation object + */ + const propsRef = { ...props }; + propsRef.easing = { + ease: 'cubic-bezier(0.250, 0.100, 0.250, 1.000)', + linear: 'cubic-bezier(0.250, 0.250, 0.750, 0.750)', + easeIn: 'cubic-bezier(0.420, 0.000, 1.000, 1.000)', + easeOut: 'cubic-bezier(0.000, 0.000, 0.580, 1.000)', + easeInOut: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)', + elasticInOut: 'cubic-bezier(0.5,-0.58,0.38,1.81)', + elasticIn: 'cubic-bezier(0.17,0.67,0.59,1.81)', + elasticOut: 'cubic-bezier(0.7,-0.75,0.99,1.01)' + }; + /** + * Applies animation to the current element. + * + * @param {string | HTMLElement} element - Element which needs to be animated. + * @param {AnimationOptions} props - Animation options. + * @returns {void} + */ + propsRef.animate = (element, props) => { + const model = getModel(props || {}); + if (typeof element === 'string') { + const elements = Array.from(selectAll(element, document)); + elements.forEach((ele) => { + model.element = ele; + Animation.delayAnimation(model); + }); + } + else { + model.element = element; + Animation.delayAnimation(model); + } + }; + /** + * Returns Animation Model + * + * @param {AnimationOptions} props - Animation options + * @returns {AnimationOptions} The animation model + */ + function getModel(props) { + return { + name: props.name || propsRef.name || 'FadeIn', + delay: props.delay || propsRef.delay || 0, + duration: props.duration !== undefined ? props.duration : propsRef.duration || 400, + begin: props.begin || propsRef.begin, + end: props.end || propsRef.end, + fail: props.fail || propsRef.fail, + progress: props.progress || propsRef.progress, + timingFunction: props.timingFunction && propsRef.easing[props.timingFunction] ? propsRef.easing[props.timingFunction] : (props.timingFunction || propsRef.timingFunction) || 'ease' + }; + } + /** + * Returns the module name for animation. + * + * @returns {string} The module name. + */ + propsRef.getModuleName = () => 'animation'; + return propsRef; +} +/** + * Stop the animation effect on animated element. + * + * @param {HTMLElement} element - Element which needs to be stop the animation. + * @param {AnimationOptions} model - Handling the animation model at stop function. + * @returns {void} + */ +Animation.stop = (element, model) => { + element.style.animation = ''; + element.removeAttribute('sf-animate'); + const animationId = element.getAttribute('sf-animation-id'); + if (animationId) { + const frameId = parseInt(animationId, 10); + cancelAnimationFrame(frameId); + element.removeAttribute('sf-animation-id'); + } + if (model && model.end) { + model.end(model); + } +}; +/** + * Set delay to animation element + * + * @param {AnimationOptions} model ? + * @returns {void} + */ +Animation.delayAnimation = (model) => { + if (animationMode === 'Disable' || animationMode === GlobalAnimationMode.Disable) { + if (model.begin) { + model.begin(model); + } + if (model.end) { + model.end(model); + } + } + else { + if (model.delay) { + setTimeout(() => { Animation.applyAnimation(model); }, model.delay); + } + else { + Animation.applyAnimation(model); + } + } +}; +/** + * Triggers animation + * + * @param {AnimationOptions} model ? + * @returns {void} + */ +Animation.applyAnimation = (model) => { + model.timeStamp = 0; + let step = 0; + let timerId = 0; + let prevTimeStamp = 0; + const duration = model.duration || null; + model.element.setAttribute('sf-animate', 'true'); + const startAnimation = (timeStamp) => { + try { + if (timeStamp) { + prevTimeStamp = prevTimeStamp === 0 ? timeStamp : prevTimeStamp; + model.timeStamp = (timeStamp + (model.timeStamp || 0)) - prevTimeStamp; + prevTimeStamp = timeStamp; + if (!step && model.begin) { + model.begin(model); + } + step = step + 1; + const avg = model.timeStamp / step; + if (duration && model.timeStamp < duration && model.timeStamp + avg < duration && model.element && model.element.getAttribute('sf-animate')) { + model.element.style.animation = `${model.name} ${model.duration}ms ${model.timingFunction}`; + if (model.progress) { + model.progress(model); + } + requestAnimationFrame(startAnimation); + } + else { + cancelAnimationFrame(timerId); + model.element.removeAttribute('sf-animation-id'); + model.element.removeAttribute('sf-animate'); + model.element.style.animation = ''; + if (model.end) { + model.end(model); + } + } + } + else { + timerId = requestAnimationFrame(startAnimation); + model.element.setAttribute('sf-animation-id', timerId.toString()); + } + } + catch (e) { + cancelAnimationFrame(timerId); + model.element.removeAttribute('sf-animation-id'); + if (model.fail) { + model.fail(e); + } + } + }; + startAnimation(); +}; +/** + * This method is used to enable or disable the animation for all components. + * + * @param {string|GlobalAnimationMode} value - Specifies the value to enable or disable the animation for all components. When set to 'enable', it enables the animation for all components, regardless of the individual component's animation settings. When set to 'disable', it disables the animation for all components, regardless of the individual component's animation settings. + * @returns {void} + */ +export function setGlobalAnimation(value) { + animationMode = value; +} +/** + * Defines the global animation modes for all components. + */ +export var GlobalAnimationMode; +(function (GlobalAnimationMode) { + /** + * Defines the global animation mode as Default. Animation is enabled or disabled based on the component's animation settings. + */ + GlobalAnimationMode["Default"] = "Default"; + /** + * Defines the global animation mode as Enable. Enables the animation for all components, regardless of the individual component's animation settings. + */ + GlobalAnimationMode["Enable"] = "Enable"; + /** + * Defines the global animation mode as Disable. Disables the animation for all components, regardless of the individual component's animation settings. + */ + GlobalAnimationMode["Disable"] = "Disable"; +})(GlobalAnimationMode || (GlobalAnimationMode = {})); diff --git a/components/base/src/base.d.ts b/components/base/src/base.d.ts new file mode 100644 index 0000000..a4cdd41 --- /dev/null +++ b/components/base/src/base.d.ts @@ -0,0 +1,81 @@ +import { RefObject } from 'react'; +import { IObserver } from './observer'; +export declare type EmitType = ((arg?: T, ...rest: unknown[]) => void); +/** + * Main interface for public and protected properties and methods in Base. + * + * @private + */ +export interface IBase { + /** + * Associated HTML element. + * + * @private + */ + element?: RefObject<(ElementType) | null>; + /** + * Determines if the instance is destroyed. + * + * @private + */ + isDestroyed?: boolean; + /** + * Checks if changes are protected. + * + * @private + */ + isProtectedOnChange?: boolean; + /** + * Observer for the component model. + * + * @private + */ + modelObserver?: IObserver; + /** + * Indicates if the component is refreshing. + * + * @private + */ + refreshing?: boolean; + /** + * Adds an event listener. + * + * @private + * @param eventName - The name of the event to listen for. + * @param handler - The handler function to execute when the event is triggered. + */ + addEventListener?(eventName: string, handler: Function): void; + /** + * Removes an event listener. + * + * @private + * @param eventName - The name of the event to stop listening for. + * @param handler - The handler function to remove. + */ + removeEventListener?(eventName: string, handler: Function): void; + /** + * Triggers event listeners for a specified event. + * + * @private + * @param eventName - The name of the event to trigger. + * @param eventProp - Properties of the event. + * @param successHandler - Function to call on successful event execution. + * @param errorHandler - Function to call on failed event execution. + * @returns {void | object} + */ + trigger?(eventName: string, eventProp?: Object, successHandler?: Function, errorHandler?: Function): void | object; + /** + * Destroys the instance and cleans up resources. + */ + destroy?(): void; +} +/** + * Base component function that initializes and manages component properties. + * + * @private + * @template ElementType - The type of the element reference. + * @param {IBase} [props] - The initial properties for the component. + * @param {RefObject} [element] - The reference object for the element. + * @returns {IBase} The initialized component properties. + */ +export declare function Base(props?: IBase, element?: RefObject): IBase; diff --git a/components/base/src/base.js b/components/base/src/base.js new file mode 100644 index 0000000..e887063 --- /dev/null +++ b/components/base/src/base.js @@ -0,0 +1,93 @@ +import { useLayoutEffect, useRef } from 'react'; +import { Observer } from './observer'; +import { isNullOrUndefined, getValue } from './util'; +const isColEName = new RegExp(']'); +/** + * Base component function that initializes and manages component properties. + * + * @private + * @template ElementType - The type of the element reference. + * @param {IBase} [props] - The initial properties for the component. + * @param {RefObject} [element] - The reference object for the element. + * @returns {IBase} The initialized component properties. + */ +export function Base(props, element) { + const modelObserver = Observer(); + const propsRef = { + isDestroyed: false, + isProtectedOnChange: true, + modelObserver, + ...props + }; + propsRef.element = useRef(null); + /** + * Adds the handler to the given event listener. + * + * @param {string} eventName - A String that specifies the name of the event. + * @param {Function} handler - Specifies the function to run when the event occurs. + * @returns {void} + */ + propsRef.addEventListener = (eventName, handler) => { + propsRef.modelObserver.on(eventName, handler); + }; + /** + * Removes the handler from the given event listener. + * + * @param {string} eventName - A String that specifies the name of the event to remove. + * @param {Function} handler - Specifies the function to remove. + * @returns {void} + */ + propsRef.removeEventListener = (eventName, handler) => { + propsRef.modelObserver.off(eventName, handler); + }; + /** + * Triggers the handlers in the specified event. + * + * @param {string} eventName - Specifies the event to trigger for the specified component properties. + * @param {Object} [eventProp] - Additional parameters to pass on to the event properties. + * @param {Function} [successHandler] - This function will invoke after the event successfully triggered. + * @param {Function} [errorHandler] - This function will invoke if the event fails to trigger. + * @returns {void | object} ? + */ + propsRef.trigger = (eventName, eventProp, successHandler, errorHandler) => { + if (propsRef.isDestroyed !== true) { + const prevDetection = propsRef.isProtectedOnChange; + propsRef.isProtectedOnChange = false; + const data = propsRef.modelObserver.notify(eventName, eventProp, successHandler, errorHandler); + if (isColEName.test(eventName)) { + const handler = getValue(eventName, propsRef); + if (handler) { + handler.call(propsRef, eventProp); + if (successHandler) { + successHandler.call(propsRef, eventProp); + } + } + else if (successHandler) { + successHandler.call(propsRef, eventProp); + } + } + propsRef.isProtectedOnChange = prevDetection; + return data; + } + }; + /** + * Destroys the instance and cleans up resources. + * + * @returns {void} + */ + propsRef.destroy = () => { + propsRef.modelObserver.destroy(); + propsRef.isDestroyed = true; + }; + useLayoutEffect(() => { + /** + * Initialize the instance. + */ + if (element && !isNullOrUndefined(element.current)) { + propsRef.element.current = element.current; + propsRef.isProtectedOnChange = false; + } + propsRef.isDestroyed = false; + }, []); + return propsRef; +} diff --git a/components/base/src/browser.d.ts b/components/base/src/browser.d.ts new file mode 100644 index 0000000..f8b08a0 --- /dev/null +++ b/components/base/src/browser.d.ts @@ -0,0 +1,96 @@ +/** + * Interface for BrowserType. + */ +interface IBrowser { + /** + * Property specifies the userAgent of the browser. Default userAgent value is based on the browser. + * Also we can set our own userAgent. + */ + userAgent: string; + /** + * Property is to get the browser information like Name, Version and Language. + */ + info: BrowserInfo; + /** + * Property is to get whether the userAgent is based IE. + */ + isIE: boolean; + /** + * Property is to get whether the browser has touch support. + */ + isTouch: boolean; + /** + * Property is to get whether the browser has Pointer support. + */ + isPointer: boolean; + /** + * Property is to get whether the browser has MSPointer support. + */ + isMSPointer: boolean; + /** + * Property is to get whether the userAgent is device based. + */ + isDevice: boolean; + /** + * Property is to get whether the userAgent is Ios. + */ + isIos: boolean; + /** + * Property is to get whether the userAgent is Ios7. + */ + isIos7: boolean; + /** + * Property is to get whether the userAgent is Android. + */ + isAndroid: boolean; + /** + * Property is to identify whether application ran in web view. + */ + isWebView: boolean; + /** + * Property is to get whether the userAgent is Windows. + */ + isWindows: boolean; + /** + * Property is to get the touch start event. It returns event name based on browser. + */ + touchStartEvent: string; + /** + * Property is to get the touch move event. It returns event name based on browser. + */ + touchMoveEvent: string; + /** + * Property is to get the touch end event. It returns event name based on browser. + */ + touchEndEvent: string; + /** + * Property is to cancel the touch end event. + */ + touchCancelEvent: string; + /** + * Method to check whether the browser on the iPad device is Safari or not. + */ + isSafari: () => boolean; + /** + * Property specifies the userAgent of the browser. + */ + uA: string; +} +/** + * Get configuration details for Browser + * + * @private + */ +export declare const Browser: IBrowser; +/** + * Information about the browser. + */ +interface BrowserInfo { + name?: string; + version?: string; + culture?: { + name?: string; + language?: string; + }; +} +export {}; diff --git a/components/base/src/browser.js b/components/base/src/browser.js new file mode 100644 index 0000000..ef286a1 --- /dev/null +++ b/components/base/src/browser.js @@ -0,0 +1,334 @@ +import { isUndefined } from './util'; +const REGX_MOBILE = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i; +const REGX_IE = /msie|trident/i; +const REGX_IE11 = /Trident\/7\./; +const REGX_IOS = /(ipad|iphone|ipod touch)/i; +const REGX_IOS7 = /(ipad|iphone|ipod touch);.*os 7_\d|(ipad|iphone|ipod touch);.*os 8_\d/i; +const REGX_ANDROID = /android/i; +const REGX_WINDOWS = /trident|windows phone|edge/i; +const REGX_VERSION = /(version)[ /]([\w.]+)/i; +const REGX_BROWSER = { + OPERA: /(opera|opr)(?:.*version|)[ /]([\w.]+)/i, + EDGE: /(edge)(?:.*version|)[ /]([\w.]+)/i, + CHROME: /(chrome|crios)[ /]([\w.]+)/i, + PANTHOMEJS: /(phantomjs)[ /]([\w.]+)/i, + SAFARI: /(safari)[ /]([\w.]+)/i, + WEBKIT: /(webkit)[ /]([\w.]+)/i, + MSIE: /(msie|trident) ([\w.]+)/i, + MOZILLA: /(mozilla)(?:.*? rv:([\w.]+)|)/i +}; +/* istanbul ignore else */ +if (typeof window !== 'undefined') { + window.browserDetails = window.browserDetails || {}; +} +/** + * Get configuration details for Browser + * + * @private + */ +export const Browser = (() => { + const uA = typeof navigator !== 'undefined' ? navigator.userAgent : ''; + /** + * Extract browser detail. + * + * @returns {BrowserInfo} ? + */ + function extractBrowserDetail() { + const browserInfo = { culture: {} }; + const keys = Object.keys(REGX_BROWSER); + let clientInfo = []; + for (const key of keys) { + clientInfo = Browser.userAgent.match(REGX_BROWSER[`${key}`]); + if (clientInfo) { + browserInfo.name = (clientInfo[1].toLowerCase() === 'opr' ? 'opera' : clientInfo[1].toLowerCase()); + browserInfo.name = (clientInfo[1].toLowerCase() === 'crios' ? 'chrome' : browserInfo.name); + browserInfo.version = clientInfo[2]; + browserInfo.culture.name = browserInfo.culture.language = navigator.language; + if (Browser.userAgent.match(REGX_IE11)) { + browserInfo.name = 'msie'; + break; + } + const version = Browser.userAgent.match(REGX_VERSION); + if (browserInfo.name === 'safari' && version) { + browserInfo.version = version[2]; + } + break; + } + } + return browserInfo; + } + /** + * To get events from the browser + * + * @param {EventTypes} event - type of event triggered. + * @returns {string} ? + */ + function getEvent(event) { + const events = { + start: { + isPointer: 'pointerdown', + isTouch: 'touchstart', + isDevice: 'mousedown' + }, + move: { + isPointer: 'pointermove', + isTouch: 'touchmove', + isDevice: 'mousemove' + }, + end: { + isPointer: 'pointerup', + isTouch: 'touchend', + isDevice: 'mouseup' + }, + cancel: { + isPointer: 'pointercancel', + isTouch: 'touchcancel', + isDevice: 'mouseleave' + } + }; + return Browser.isPointer + ? events[`${event}`].isPointer + : (Browser.isTouch + ? events[`${event}`].isTouch + (!Browser.isDevice ? ' ' + events[`${event}`].isDevice : '') + : events[`${event}`].isDevice); + } + /** + * To get the Touch start event from browser + * + * @returns {string} ? + */ + function getTouchStartEvent() { + return getEvent('start'); + } + /** + * To get the Touch end event from browser + * + * @returns {string} ? + */ + function getTouchEndEvent() { + return getEvent('end'); + } + /** + * To get the Touch move event from browser + * + * @returns {string} ? + */ + function getTouchMoveEvent() { + return getEvent('move'); + } + /** + * To cancel the touch event from browser + * + * @returns {string} ? + */ + function getTouchCancelEvent() { + return getEvent('cancel'); + } + /** + * Check whether the browser on the iPad device is Safari or not + * + * @returns {boolean} ? + */ + function isSafari() { + return (Browser.isDevice && + Browser.isIos && + Browser.isTouch && + typeof window !== 'undefined' && + window.navigator.userAgent.toLowerCase().indexOf('iphone') === -1 && + window.navigator.userAgent.toLowerCase().indexOf('safari') > -1); + } + /** + * To get the value based on provided key and regX + * + * @param {string} key ? + * @param {RegExp} regX ? + * @returns {Object} ? + */ + function getValue(key, regX) { + const browserDetails = typeof window !== 'undefined' ? window.browserDetails : {}; + if (typeof navigator !== 'undefined' && navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 && Browser.isTouch === true && !REGX_BROWSER.CHROME.test(navigator.userAgent)) { + browserDetails['isIos'] = true; + browserDetails['isDevice'] = true; + browserDetails['isTouch'] = true; + browserDetails['isPointer'] = true; + // Set 'isPointer' for pointer-enabled devices (e.g., iPad on Safari) + browserDetails['isPointer'] = ('pointerEnabled' in window.navigator); + } + if (typeof window !== 'undefined' && window.Capacitor && window.Capacitor.getPlatform() === 'ios') { + browserDetails['isPointer'] = false; + } + if ('undefined' === typeof browserDetails[`${key}`]) { + return browserDetails[`${key}`] = regX.test(Browser.userAgent); + } + return browserDetails[`${key}`]; + } + return { + // Properties + /** + * Property specifies the userAgent of the browser. Default userAgent value is based on the browser. + * Also we can set our own userAgent. + * + * @param {string} uA ? + */ + set userAgent(uA) { + Browser.uA = uA; + window.browserDetails = {}; + }, + get userAgent() { + return Browser.uA; + }, + //Read Only Properties + /** + * Property is to get the browser information like Name, Version and Language + * + * @returns {BrowserInfo} ? + */ + get info() { + if (isUndefined(window.browserDetails.info)) { + window.browserDetails.info = extractBrowserDetail(); + } + return window.browserDetails.info; + }, + /** + * Property is to get whether the userAgent is based IE. + * + * @returns {boolean} ? + */ + get isIE() { + return getValue('isIE', REGX_IE); + }, + /** + * Property is to get whether the browser has touch support. + * + * @returns {boolean} ? + */ + get isTouch() { + if (isUndefined(window.browserDetails.isTouch)) { + window.browserDetails.isTouch = ('ontouchstart' in window.navigator) || (window && + window.navigator && + (window.navigator.maxTouchPoints > 0)) || ('ontouchstart' in window); + } + return window.browserDetails.isTouch; + }, + /** + * Property is to get whether the browser has Pointer support. + * + * @returns {boolean} ? + */ + get isPointer() { + if (isUndefined(window.browserDetails.isPointer)) { + window.browserDetails.isPointer = ('pointerEnabled' in window.navigator); + } + return window.browserDetails.isPointer; + }, + /** + * Property is to get whether the browser has MSPointer support. + * + * @returns {boolean} ? + */ + get isMSPointer() { + if (isUndefined(window.browserDetails.isMSPointer)) { + window.browserDetails.isMSPointer = ('msPointerEnabled' in window.navigator); + } + return window.browserDetails.isMSPointer; + }, + /** + * Property is to get whether the userAgent is device based. + * + * @returns {boolean} ? + */ + get isDevice() { + return getValue('isDevice', REGX_MOBILE); + }, + /** + * Property is to get whether the userAgent is Ios. + * + * @returns {boolean} ? + */ + get isIos() { + return getValue('isIos', REGX_IOS); + }, + /** + * Property is to get whether the userAgent is Ios7. + * + * @returns {boolean} ? + */ + get isIos7() { + return getValue('isIos7', REGX_IOS7); + }, + /** + * Property is to get whether the userAgent is Android. + * + * @returns {boolean} ? + */ + get isAndroid() { + return getValue('isAndroid', REGX_ANDROID); + }, + /** + * Property is to identify whether application ran in web view. + * + * @returns {boolean} ? + */ + get isWebView() { + if (isUndefined(window.browserDetails.isWebView)) { + window.browserDetails.isWebView = !(isUndefined(window.cordova) && isUndefined(window.PhoneGap) + && isUndefined(window.phonegap) && window.forge !== 'object'); + } + return window.browserDetails.isWebView; + }, + /** + * Property is to get whether the userAgent is Windows. + * + * @returns {boolean} ? + */ + get isWindows() { + return getValue('isWindows', REGX_WINDOWS); + }, + /** + * Property is to get the touch start event. It returns event name based on browser. + * + * @returns {string} ? + */ + get touchStartEvent() { + if (isUndefined(window.browserDetails.touchStartEvent)) { + window.browserDetails.touchStartEvent = getTouchStartEvent(); + } + return window.browserDetails.touchStartEvent; + }, + /** + * Property is to get the touch move event. It returns event name based on browser. + * + * @returns {string} ? + */ + get touchMoveEvent() { + if (isUndefined(window.browserDetails.touchMoveEvent)) { + window.browserDetails.touchMoveEvent = getTouchMoveEvent(); + } + return window.browserDetails.touchMoveEvent; + }, + /** + * Property is to get the touch end event. It returns event name based on browser. + * + * @returns {string} ? + */ + get touchEndEvent() { + if (isUndefined(window.browserDetails.touchEndEvent)) { + window.browserDetails.touchEndEvent = getTouchEndEvent(); + } + return window.browserDetails.touchEndEvent; + }, + /** + * Property is to cancel the touch end event. + * + * @returns {string} ? + */ + get touchCancelEvent() { + if (isUndefined(window.browserDetails.touchCancelEvent)) { + window.browserDetails.touchCancelEvent = getTouchCancelEvent(); + } + return window.browserDetails.touchCancelEvent; + }, + isSafari, + uA + }; +})(); diff --git a/components/base/src/component.d.ts b/components/base/src/component.d.ts new file mode 100644 index 0000000..85c89fe --- /dev/null +++ b/components/base/src/component.d.ts @@ -0,0 +1,18 @@ +/** + * Generates a unique ID for the component instance based on the current page and instance count. + * + * @private + * @param {string} [definedName] - The name to prefix the unique ID. + * @returns {string} - The generated unique ID. + */ +export declare function componentUniqueID(definedName?: string): string; +/** + * Pre-render function to manage license validation and instance counting. + * This function ensures that a license overlay is created if necessary + * and tracks the number of instances for specific modules. + * + * @private + * @param {string} moduleName - The name of the module being rendered. + * @returns {void} + */ +export declare function preRender(moduleName: string): void; diff --git a/components/base/src/component.js b/components/base/src/component.js new file mode 100644 index 0000000..aac010a --- /dev/null +++ b/components/base/src/component.js @@ -0,0 +1,86 @@ +import { validateLicense, createLicenseOverlay, componentList } from './validate-lic'; +let componentCount = 0; +let lastPageID; +let lastHistoryLen = 0; +// Declare the static variable to count the instance +let instancecount = 0; +// Declare the static variable to find if control limit exceed or not +let isvalid = true; +// We have added styles to inline type so here declare the static variable to detect if banner is added or not +let isBannerAdded = false; +//Function handling for page navigation detection +/* istanbul ignore next */ +(() => { + if (typeof window !== 'undefined') { + window.addEventListener('popstate', + /* istanbul ignore next */ + () => { + componentCount = 0; + }); + } +})(); +/** + * Checks if the browsing history has changed based on the current page ID or history length. + * + * @returns {boolean} - Returns true if history has changed, otherwise false. + */ +function isHistoryChanged() { + return lastPageID !== pageID(window.location.href) || lastHistoryLen !== window.history.length; +} +/** + * Computes a unique page ID based on the provided URL. + * + * @param {string} url - The URL from which to generate the page ID. + * @returns {number} - The calculated page ID. + */ +function pageID(url) { + let hash = 0; + if (url.length === 0) { + return hash; + } + for (let i = 0; i < url.length; i++) { + const char = url.charCodeAt(i); + hash = ((hash << 5) - hash) + char; + hash = hash & hash; // Convert to 32bit integer + } + return Math.abs(hash); +} +/** + * Generates a unique ID for the component instance based on the current page and instance count. + * + * @private + * @param {string} [definedName] - The name to prefix the unique ID. + * @returns {string} - The generated unique ID. + */ +export function componentUniqueID(definedName) { + if (isHistoryChanged()) { + componentCount = 0; + } + lastPageID = pageID(window.location.href); + lastHistoryLen = window.history.length; + return `${definedName}_${lastPageID}_${componentCount++}`; +} +/** + * Pre-render function to manage license validation and instance counting. + * This function ensures that a license overlay is created if necessary + * and tracks the number of instances for specific modules. + * + * @private + * @param {string} moduleName - The name of the module being rendered. + * @returns {void} + */ +export function preRender(moduleName) { + if (!isvalid && !isBannerAdded) { + createLicenseOverlay(); + isBannerAdded = true; + } + // Based on the considered control list we have count the instance + if (window && document && !validateLicense()) { + if (componentList.indexOf(moduleName) !== -1) { + instancecount = instancecount + 1; + if (instancecount > 5) { + isvalid = false; + } + } + } +} diff --git a/components/base/src/dom.d.ts b/components/base/src/dom.d.ts new file mode 100644 index 0000000..235b4a6 --- /dev/null +++ b/components/base/src/dom.d.ts @@ -0,0 +1,199 @@ +export interface ElementProperties { + id?: string; + className?: string; + innerHTML?: string; + styles?: string; + attrs?: { + [key: string]: string; + }; +} +/** + * Function to create Html element. + * + * @param {string} tagName - Name of the tag, id and class names. + * @param {ElementProperties} properties - Object to set properties in the element. + * @param {ElementProperties} properties.id - To set the id to the created element. + * @param {ElementProperties} properties.className - To add classes to the element. + * @param {ElementProperties} properties.innerHTML - To set the innerHTML to element. + * @param {ElementProperties} properties.styles - To set the some custom styles to element. + * @param {ElementProperties} properties.attrs - To set the attributes to element. + * @returns {any} ? + * @private + */ +export declare function createElement(tagName: string, properties?: ElementProperties): HTMLElement; +/** + * The function used to add the classes to array of elements + * + * @param {Element[]|NodeList} elements - An array of elements that need to add a list of classes + * @param {string|string[]} classes - String or array of string that need to add an individual element as a class + * @returns {any} . + * @private + */ +export declare function addClass(elements: Element[] | NodeList, classes: string | string[]): Element[] | NodeList; +/** + * The function used to add the classes to array of elements + * + * @param {Element[]|NodeList} elements - An array of elements that need to remove a list of classes + * @param {string|string[]} classes - String or array of string that need to add an individual element as a class + * @returns {any} . + * @private + */ +export declare function removeClass(elements: Element[] | NodeList, classes: string | string[]): Element[] | NodeList; +/** + * The function used to check element is visible or not. + * + * @param {Element|Node} element - An element the need to check visibility + * @returns {boolean} ? + * @private + */ +export declare function isVisible(element: Element | Node): boolean; +/** + * The function used to insert an array of elements into a first of the element. + * + * @param {Element[]|NodeList} fromElements - An array of elements that need to prepend. + * @param {Element} toElement - An element that is going to prepend. + * @param {boolean} isEval - ? + * @returns {Element[] | NodeList} ? + * @private + */ +export declare function prepend(fromElements: HTMLElement[] | NodeListOf, toElement: Element, isEval?: boolean): Element[] | NodeList; +/** + * The function used to insert an array of elements into last of the element. + * + * @param {Element[]|NodeList} fromElements - An array of elements that need to append. + * @param {Element} toElement - An element that is going to prepend. + * @param {boolean} isEval - ? + * @returns {Element[] | NodeList} ? + * @private + */ +export declare function append(fromElements: Element[] | NodeList, toElement: Element, isEval?: boolean): Element[] | NodeList; +/** + * The function used to remove the element from parentnode + * + * @param {Element|Node|HTMLElement} element - An element that is going to detach from the Dom + * @returns {any} ? + * @private + */ +export declare function detach(element: Element | Node | HTMLElement): Element | null; +/** + * The function used to remove the element from Dom also clear the bounded events + * + * @param {Element|Node|HTMLElement} element - An element remove from the Dom + * @returns {void} ? + * @private + */ +export declare function remove(element: Element | Node | HTMLElement): void; +/** + * The function helps to set multiple attributes to an element + * + * @param {Element|Node} element - An element that need to set attributes. + * @param {string} attributes - JSON Object that is going to as attributes. + * @returns {Element} ? + * @private + */ +export declare function attributes(element: Element | Node, attributes: { + [key: string]: string; +}): Element; +/** + * The function selects the element from giving context. + * + * @param {string} selector - Selector string need fetch element + * @param {Document|Element} context - It is an optional type, That specifies a Dom context. + * @returns {any} ? + * @private + */ +export declare function select(selector: string, context?: Document | Element): Element | null; +/** + * The function selects an array of element from the given context. + * + * @param {string} selector - Selector string need fetch element + * @param {Document|Element} context - It is an optional type, That specifies a Dom context. + * @returns {HTMLElement[]} ? + * @private + */ +export declare function selectAll(selector: string, context?: Document | Element): HTMLElement[] | []; +/** + * Returns the closest ancestor of the current element (or the current element itself) + * that matches the specified CSS selector. + * + * @param {Element} element - An element that need to find the closest element. + * @param {string} selector - A classSelector of closest element. + * @returns {Element} ? + * @private + */ +export declare function closest(element: Element | Node, selector: string): Element | null; +/** + * Returns all sibling elements of the given element. + * + * @param {Element|Node} element - An element that need to get siblings. + * @returns {Element[]} ? + * @private + */ +export declare function siblings(element: Element | Node): Element[]; +/** + * set the value if not exist. Otherwise set the existing value + * + * @param {HTMLElement} element - An element to which we need to set value. + * @param {string} property - Property need to get or set. + * @param {string} value - value need to set. + * @returns {string} ? + * @private + */ +export declare function getAttributeOrDefault(element: HTMLElement, property: string, value: string): string; +/** + * Set the style attributes to Html element. + * + * @param {HTMLElement} element - Element which we want to set attributes + * @param {any} attrs - Set the given attributes to element + * @returns {void} ? + * @private + */ +export declare function setStyleAttribute(element: HTMLElement, attrs: { + [key: string]: Object; +}): void; +/** + * Method for add and remove classes to a dom element. + * + * @param {Element} element - Element for add and remove classes + * @param {string[]} addClasses - List of classes need to be add to the element + * @param {string[]} removeClasses - List of classes need to be remove from the element + * @returns {void} ? + * @private + */ +export declare function classList(element: Element, addClasses: string[], removeClasses: string[]): void; +/** + * Method to check whether the element matches the given selector. + * + * @param {Element} element - Element to compare with the selector. + * @param {string} selector - String selector which element will satisfy. + * @returns {void} ? + * @private + */ +export declare function matches(element: Element, selector: string): boolean; +/** + * Method to get the html text from DOM. + * + * @param {HTMLElement} ele - Element to compare with the selector. + * @param {string} innerHTML - String selector which element will satisfy. + * @returns {void} ? + * @private + */ +export declare function includeInnerHTML(ele: HTMLElement, innerHTML: string): void; +/** + * Method to get the containsclass. + * + * @param {HTMLElement} ele - Element to compare with the selector. + * @param {string} className - String selector which element will satisfy. + * @returns {boolean} ? + * @private + */ +export declare function containsClass(ele: HTMLElement, className: string): boolean; +/** + * Method to check whether the element matches the given selector. + * + * @param {Object} element - Element to compare with the selector. + * @param {boolean} deep ? + * @returns {any} ? + * @private + */ +export declare function cloneNode(element: Object, deep?: boolean): any; diff --git a/components/base/src/dom.js b/components/base/src/dom.js new file mode 100644 index 0000000..2253cef --- /dev/null +++ b/components/base/src/dom.js @@ -0,0 +1,453 @@ +import { EventHandler } from './event-handler'; +import { isNullOrUndefined, getValue, setValue, isObject, extend } from './util'; +const SVG_REG = /^svg|^path|^g/; +/** + * Function to create Html element. + * + * @param {string} tagName - Name of the tag, id and class names. + * @param {ElementProperties} properties - Object to set properties in the element. + * @param {ElementProperties} properties.id - To set the id to the created element. + * @param {ElementProperties} properties.className - To add classes to the element. + * @param {ElementProperties} properties.innerHTML - To set the innerHTML to element. + * @param {ElementProperties} properties.styles - To set the some custom styles to element. + * @param {ElementProperties} properties.attrs - To set the attributes to element. + * @returns {any} ? + * @private + */ +export function createElement(tagName, properties) { + const element = (SVG_REG.test(tagName) ? document.createElementNS('http://www.w3.org/2000/svg', tagName) : document.createElement(tagName)); + if (typeof (properties) === 'undefined') { + return element; + } + element.innerHTML = (properties.innerHTML ? properties.innerHTML : ''); + if (properties.className !== undefined) { + element.className = properties.className; + } + if (properties.id !== undefined) { + element.id = properties.id; + } + if (properties.styles !== undefined) { + element.setAttribute('style', properties.styles); + } + if (properties.attrs !== undefined) { + attributes(element, properties.attrs); + } + return element; +} +/** + * The function used to add the classes to array of elements + * + * @param {Element[]|NodeList} elements - An array of elements that need to add a list of classes + * @param {string|string[]} classes - String or array of string that need to add an individual element as a class + * @returns {any} . + * @private + */ +export function addClass(elements, classes) { + const classList = getClassList(classes); + const regExp = RegExp; + for (const ele of elements) { + for (const className of classList) { + if (isObject(ele)) { + const curClass = getValue('attributes.className', ele); + if (isNullOrUndefined(curClass)) { + setValue('attributes.className', className, ele); + } + else if (!new regExp('\\b' + className + '\\b', 'i').test(curClass)) { + setValue('attributes.className', curClass + ' ' + className, ele); + } + } + else { + if (!ele.classList.contains(className)) { + ele.classList.add(className); + } + } + } + } + return elements; +} +/** + * The function used to add the classes to array of elements + * + * @param {Element[]|NodeList} elements - An array of elements that need to remove a list of classes + * @param {string|string[]} classes - String or array of string that need to add an individual element as a class + * @returns {any} . + * @private + */ +export function removeClass(elements, classes) { + const classList = getClassList(classes); + for (const ele of elements) { + const flag = isObject(ele); + const canRemove = flag ? getValue('attributes.className', ele) : ele.className !== ''; + if (canRemove) { + for (const className of classList) { + if (flag) { + const classes = getValue('attributes.className', ele); + const classArr = classes.split(' '); + const index = classArr.indexOf(className); + if (index !== -1) { + classArr.splice(index, 1); + } + setValue('attributes.className', classArr.join(' '), ele); + } + else { + ele.classList.remove(className); + } + } + } + } + return elements; +} +/** + * The function used to get classlist. + * + * @param {string | string[]} classes - An element the need to check visibility + * @returns {string[]} ? + * @private + */ +function getClassList(classes) { + if (typeof classes === 'string') { + return [classes]; + } + return classes; +} +/** + * The function used to check element is visible or not. + * + * @param {Element|Node} element - An element the need to check visibility + * @returns {boolean} ? + * @private + */ +export function isVisible(element) { + const ele = element; + return ele.style.visibility === '' && ele.offsetWidth > 0; +} +/** + * The function used to insert an array of elements into a first of the element. + * + * @param {Element[]|NodeList} fromElements - An array of elements that need to prepend. + * @param {Element} toElement - An element that is going to prepend. + * @param {boolean} isEval - ? + * @returns {Element[] | NodeList} ? + * @private + */ +export function prepend(fromElements, toElement, isEval) { + const docFrag = document.createDocumentFragment(); + for (const ele of fromElements) { + docFrag.appendChild(ele); + } + toElement.insertBefore(docFrag, toElement.firstElementChild); + if (isEval) { + executeScript(toElement); + } + return fromElements; +} +/** + * The function used to insert an array of elements into last of the element. + * + * @param {Element[]|NodeList} fromElements - An array of elements that need to append. + * @param {Element} toElement - An element that is going to prepend. + * @param {boolean} isEval - ? + * @returns {Element[] | NodeList} ? + * @private + */ +export function append(fromElements, toElement, isEval) { + const docFrag = document.createDocumentFragment(); + if (fromElements instanceof NodeList) { + while (fromElements.length > 0) { + docFrag.appendChild(fromElements[0]); + } + } + else { + for (const ele of fromElements) { + docFrag.appendChild(ele); + } + } + toElement.appendChild(docFrag); + if (isEval) { + executeScript(toElement); + } + return fromElements; +} +/** + * The function is used to evaluate script from Ajax request + * + * @param {Element} ele - An element is going to evaluate the script + * @returns {void} ? + */ +function executeScript(ele) { + if (!document) { + return; + } + const scripts = ele.querySelectorAll('script'); + scripts.forEach((scriptElement) => { + const script = document.createElement('script'); + script.text = scriptElement.innerHTML; + document.head.appendChild(script).parentNode.removeChild(script); + }); +} +/** + * The function used to remove the element from parentnode + * + * @param {Element|Node|HTMLElement} element - An element that is going to detach from the Dom + * @returns {any} ? + * @private + */ +export function detach(element) { + const parentNode = element.parentNode; + if (parentNode) { + return parentNode.removeChild(element); + } + return null; +} +/** + * The function used to remove the element from Dom also clear the bounded events + * + * @param {Element|Node|HTMLElement} element - An element remove from the Dom + * @returns {void} ? + * @private + */ +export function remove(element) { + const parentNode = element.parentNode; + EventHandler.clearEvents(element); + if (parentNode) { + parentNode.removeChild(element); + } +} +/** + * The function helps to set multiple attributes to an element + * + * @param {Element|Node} element - An element that need to set attributes. + * @param {string} attributes - JSON Object that is going to as attributes. + * @returns {Element} ? + * @private + */ +export function attributes(element, attributes) { + const ele = element; + Object.keys(attributes).forEach((key) => { + if (isObject(ele)) { + let iKey = key; + if (key === 'tabindex') { + iKey = 'tabIndex'; + } + ele.attributes[`${iKey}`] = attributes[`${key}`]; + } + else { + ele.setAttribute(key, attributes[`${key}`]); + } + }); + return ele; +} +/** + * The function selects the element from giving context. + * + * @param {string} selector - Selector string need fetch element + * @param {Document|Element} context - It is an optional type, That specifies a Dom context. + * @returns {any} ? + * @private + */ +export function select(selector, context = document) { + if (!document) { + return null; + } + selector = querySelectId(selector); + return context.querySelector(selector); +} +/** + * The function selects an array of element from the given context. + * + * @param {string} selector - Selector string need fetch element + * @param {Document|Element} context - It is an optional type, That specifies a Dom context. + * @returns {HTMLElement[]} ? + * @private + */ +export function selectAll(selector, context = document) { + if (!document) { + return []; + } + selector = querySelectId(selector); + const nodeList = context.querySelectorAll(selector); + return Array.from(nodeList); +} +/** + * The function selects an id of element from the given context. + * + * @param {string} selector - Selector string need fetch element + * @returns {string} ? + */ +function querySelectId(selector) { + const charRegex = /(!|"|\$|%|&|'|\(|\)|\*|\/|:|;|<|=|\?|@|\]|\^|`|{|}|\||\+|~)/g; + if (selector.match(/#[0-9]/g) || selector.match(charRegex)) { + const idList = selector.split(','); + for (let i = 0; i < idList.length; i++) { + const list = idList[parseInt(i.toString(), 10)].split(' '); + for (let j = 0; j < list.length; j++) { + if (list[parseInt(j.toString(), 10)].indexOf('#') > -1) { + if (!list[parseInt(j.toString(), 10)].match(/\[.*\]/)) { + const splitId = list[parseInt(j.toString(), 10)].split('#'); + if (splitId[1].match(/^\d/) || splitId[1].match(charRegex)) { + const setId = list[parseInt(j.toString(), 10)].split('.'); + setId[0] = setId[0].replace(/#/, '[id=\'') + '\']'; + list[parseInt(j.toString(), 10)] = setId.join('.'); + } + } + } + } + idList[parseInt(i.toString(), 10)] = list.join(' '); + } + return idList.join(','); + } + return selector; +} +/** + * Returns the closest ancestor of the current element (or the current element itself) + * that matches the specified CSS selector. + * + * @param {Element} element - An element that need to find the closest element. + * @param {string} selector - A classSelector of closest element. + * @returns {Element} ? + * @private + */ +export function closest(element, selector) { + let el = element; + if (el && typeof el.closest === 'function') { + return el.closest(selector); + } + while (el && el.nodeType === 1) { + if (matches(el, selector)) { + return el; + } + el = el.parentElement; + } + return null; +} +/** + * Returns all sibling elements of the given element. + * + * @param {Element|Node} element - An element that need to get siblings. + * @returns {Element[]} ? + * @private + */ +export function siblings(element) { + const siblings = []; + const siblingNodes = (element.parentNode.childNodes || []); + siblingNodes.forEach((curNode) => { + if (curNode.nodeType === Node.ELEMENT_NODE && element !== curNode) { + siblings.push(curNode); + } + }); + return siblings; +} +/** + * set the value if not exist. Otherwise set the existing value + * + * @param {HTMLElement} element - An element to which we need to set value. + * @param {string} property - Property need to get or set. + * @param {string} value - value need to set. + * @returns {string} ? + * @private + */ +export function getAttributeOrDefault(element, property, value) { + let attrVal = element.getAttribute(property); + if (isNullOrUndefined(attrVal) && value) { + element.setAttribute(property, value.toString()); + attrVal = value; + } + return attrVal; +} +/** + * Set the style attributes to Html element. + * + * @param {HTMLElement} element - Element which we want to set attributes + * @param {any} attrs - Set the given attributes to element + * @returns {void} ? + * @private + */ +export function setStyleAttribute(element, attrs) { + if (!isNullOrUndefined(attrs)) { + Object.keys(attrs).forEach((key) => { + element.style[`${key}`] = attrs[`${key}`]; + }); + } +} +/** + * Method for add and remove classes to a dom element. + * + * @param {Element} element - Element for add and remove classes + * @param {string[]} addClasses - List of classes need to be add to the element + * @param {string[]} removeClasses - List of classes need to be remove from the element + * @returns {void} ? + * @private + */ +export function classList(element, addClasses, removeClasses) { + addClass([element], addClasses); + removeClass([element], removeClasses); +} +/** + * Method to check whether the element matches the given selector. + * + * @param {Element} element - Element to compare with the selector. + * @param {string} selector - String selector which element will satisfy. + * @returns {void} ? + * @private + */ +export function matches(element, selector) { + if (!document) { + return false; + } + const matchesFn = element.matches + || element.msMatchesSelector + || element.webkitMatchesSelector; + if (matchesFn) { + return matchesFn.call(element, selector); + } + else { + return [].indexOf.call(document.querySelectorAll(selector), element) !== -1; + } +} +/** + * Method to get the html text from DOM. + * + * @param {HTMLElement} ele - Element to compare with the selector. + * @param {string} innerHTML - String selector which element will satisfy. + * @returns {void} ? + * @private + */ +export function includeInnerHTML(ele, innerHTML) { + ele.innerHTML = innerHTML; +} +/** + * Method to get the containsclass. + * + * @param {HTMLElement} ele - Element to compare with the selector. + * @param {string} className - String selector which element will satisfy. + * @returns {boolean} ? + * @private + */ +export function containsClass(ele, className) { + if (isObject(ele)) { + const regExp = RegExp; + return new regExp('\\b' + className + '\\b', 'i').test(ele.attributes.getNamedItem('class')?.value || ''); + } + else { + return ele.classList.contains(className); + } +} +/** + * Method to check whether the element matches the given selector. + * + * @param {Object} element - Element to compare with the selector. + * @param {boolean} deep ? + * @returns {any} ? + * @private + */ +// eslint-disable-next-line +export function cloneNode(element, deep) { + if (isObject(element)) { + if (deep) { + return extend({}, {}, element, true); + } + } + else { + return element.cloneNode(deep); + } +} diff --git a/components/base/src/event-handler.d.ts b/components/base/src/event-handler.d.ts new file mode 100644 index 0000000..6569925 --- /dev/null +++ b/components/base/src/event-handler.d.ts @@ -0,0 +1,25 @@ +/** + * Interface for EventHandler. + */ +interface IEventHandler { + add: (element: Element | HTMLElement | Document, eventName: string, listener: Function, bindTo?: Object, intDebounce?: number) => Function | null; + clearEvents: (element: Element) => void; + remove: (element: Element | HTMLElement | Document, eventName: string, listener: Function) => void; + trigger: (element: HTMLElement, eventName: string, eventProp?: Object) => void; +} +/** + * Custom hook to handle events on HTML elements. + */ +export declare const EventHandler: IEventHandler; +/** + * Common Event argument for all base Essential JavaScript 2 Events. + * + * @private + */ +export interface BaseEventArgs { + /** + * Specifies name of the event. + */ + name?: string; +} +export {}; diff --git a/components/base/src/event-handler.js b/components/base/src/event-handler.js new file mode 100644 index 0000000..a9e18a8 --- /dev/null +++ b/components/base/src/event-handler.js @@ -0,0 +1,134 @@ +import { debounce, extend } from './util'; +import { Browser } from './browser'; +/** + * Custom hook to handle events on HTML elements. + */ +export const EventHandler = (() => { + /** + * Adds or retrieves event data from an element. + * + * @param {Element | HTMLElement | Document} element - The target element to retrieve or add event data. + * @returns {EventOptions[]} - The list of event options associated with the element. + */ + function addOrGetEventData(element) { + if (!element) { + return null; + } + if ('__eventList' in element) { + return element.__eventList.events || []; + } + else { + element.__eventList = {}; + return element.__eventList.events = []; + } + } + /** + * Adds an event listener to the specified DOM element. + * + * @param {Element | HTMLElement | Document} element - Target HTML DOM element. + * @param {string} eventName - A string that specifies the name of the event. + * @param {Function} listener - Specifies the function to run when the event occurs. + * @param {Object} [bindTo] - An object that binds 'this' variable in the event handler. + * @param {number} [intDebounce] - Specifies at what interval the given event listener should be triggered. + * @returns {Function} - The final event listener function with optional debounce and binding applied. + */ + function add(element, eventName, listener, bindTo, intDebounce) { + if (!element) { + return null; + } + const eventData = addOrGetEventData(element); + let debounceListener = intDebounce ? debounce(listener, intDebounce) : listener; + if (bindTo) { + debounceListener = debounceListener.bind(bindTo); + } + const event = eventName.split(' '); + for (let i = 0; i < event.length; i++) { + eventData.push({ + name: event[parseInt(i.toString(), 10)], + listener: listener, + debounce: debounceListener + }); + const options = Browser.isIE ? null : { passive: false }; + element.addEventListener(event[parseInt(i.toString(), 10)], debounceListener, options); + } + return debounceListener; + } + /** + * Removes an event listener from the specified DOM element. + * + * @param {Element | HTMLElement | Document} element - Specifies the target HTML element to remove the event. + * @param {string} eventName - A string that specifies the name of the event to remove. + * @param {Function} listener - Specifies the function to remove. + * @returns {void} + */ + function remove(element, eventName, listener) { + if (!element) { + return null; + } + const eventData = addOrGetEventData(element); + const event = eventName.split(' '); + for (let j = 0; j < event.length; j++) { + let index = -1; + let debounceListener = null; + if (eventData && eventData.length !== 0) { + eventData.some((x, i) => { + if (x.name === event[parseInt(j.toString(), 10)] && x.listener === listener) { + index = i; + debounceListener = x.debounce || null; + return true; + } + return false; + }); + } + if (index !== -1) { + eventData.splice(index, 1); + } + if (debounceListener) { + element.removeEventListener(event[parseInt(j.toString(), 10)], debounceListener); + } + } + } + /** + * Clears all the event listeners that have been previously attached to the element. + * + * @param {Element} element - Specifies the target HTML element to clear the events. + * @returns {void} + */ + function clearEvents(element) { + if (!element) { + return null; + } + const eventData = addOrGetEventData(element); + const copyData = extend([], undefined, eventData); + for (let i = 0; i < copyData.length; i++) { + const parseValue = copyData[parseInt(i.toString(), 10)]; + element.removeEventListener(parseValue.name, parseValue.debounce); + eventData.shift(); + } + } + /** + * Triggers a specific event on the given HTML element. + * + * @param {HTMLElement} element - Specifies the target HTML element to trigger the event. + * @param {string} eventName - Specifies the event to trigger for the specified element. + * @param {Object} [eventProp] - Additional parameters to pass on to the event properties. + * @returns {void} + */ + function trigger(element, eventName, eventProp) { + if (!element) { + return null; + } + const eventData = addOrGetEventData(element); + for (const event of eventData) { + if (event.name === eventName) { + event.debounce(eventProp); + } + } + } + return { + add, + clearEvents, + remove, + trigger + }; +})(); diff --git a/components/base/src/fetch.d.ts b/components/base/src/fetch.d.ts new file mode 100644 index 0000000..22ee8d1 --- /dev/null +++ b/components/base/src/fetch.d.ts @@ -0,0 +1,108 @@ +/** + * Interface for the Fetch properties and methods. + */ +export interface IFetch { + /** + * Specifies the URL to which the request is to be sent. + * + * @default null + */ + url?: string; + /** + * Specifies which request method is to be used, such as GET, POST, etc. + * + * @default GET + */ + type?: string; + /** + * Specifies the content type of the request, which is used to indicate the original media type of the resource. + * + * @default null + */ + contentType?: string; + /** + * Specifies the data that needs to be added to the request. + * + * @default null + */ + data?: string | Object; + /** + * A boolean value indicating whether to reject the promise or not. + * + * @private + * @default true + */ + emitError?: boolean; + /** + * Specifies the request object that represents a resource request. + * + * @default null + */ + fetchRequest?: Request; + /** + * Specifies the callback function to be triggered before sending the request to the server. + * This can be used to modify the fetchRequest object before it is sent. + * + * @event beforeSend + */ + beforeSend?: ((args: BeforeSendFetchEventArgs) => void) | null; + /** + * Specifies the callback function to be triggered after the response is received. + * This callback will be triggered even if the request is failed. + * + * @event onLoad + */ + onLoad?: ((response: Response) => void) | null; + /** + * Specifies the callback function to be triggered after the request is successful. + * The callback will contain the server response as a parameter. + * + * @event onSuccess + */ + onSuccess?: ((data: string | Object, instance: IFetch) => void) | null; + /** + * Specifies the callback function to be triggered after the request is failed. + * + * @event onFailure + */ + onFailure?: ((error: Error) => void) | null; + /** + * Sends the fetch request. + * + * @param {string | Object} [data] - Optional data to be sent with the request. + * @returns {Promise} - A promise that resolves to the fetch response. + */ + send?: (data?: string | Object) => Promise; +} +/** + * The Fetch function provides a way to make asynchronous network requests, typically to retrieve resources from a server. + * + * @param {string | Fetch} [props] - The URL string or Fetch object containing request details. + * @param {string} [type] - The HTTP method type (e.g., 'GET', 'POST'). + * @param {string} [contentType] - The content type of the request. + * @returns {Fetch} A Fetch object for making the request. + * + * @example + * + * var fetchApi = Fetch('index.html', 'GET'); + * fetchApi.send() + * .then((value) => { + * console.log(value); + * }).catch((error) => { + * console.log(error); + * }); + */ +export declare function Fetch(props?: string | IFetch, type?: string, contentType?: string): IFetch; +/** + * Provides information about the beforeSend event. + */ +export interface BeforeSendFetchEventArgs { + /** + * A boolean value indicating whether to cancel the fetch request or not. + */ + cancel?: boolean; + /** + * Returns the request object that represents a resource request. + */ + fetchRequest: Request; +} diff --git a/components/base/src/fetch.js b/components/base/src/fetch.js new file mode 100644 index 0000000..1cca7e4 --- /dev/null +++ b/components/base/src/fetch.js @@ -0,0 +1,110 @@ +import { isNullOrUndefined as isNOU } from './util'; +/** + * The Fetch function provides a way to make asynchronous network requests, typically to retrieve resources from a server. + * + * @param {string | Fetch} [props] - The URL string or Fetch object containing request details. + * @param {string} [type] - The HTTP method type (e.g., 'GET', 'POST'). + * @param {string} [contentType] - The content type of the request. + * @returns {Fetch} A Fetch object for making the request. + * + * @example + * + * var fetchApi = Fetch('index.html', 'GET'); + * fetchApi.send() + * .then((value) => { + * console.log(value); + * }).catch((error) => { + * console.log(error); + * }); + */ +export function Fetch(props, type, contentType) { + let url; + let fetchProps; + if (typeof props === 'string') { + url = props; + fetchProps = { + url, + type: type ? type.toUpperCase() : 'GET', + contentType: contentType || 'application/json; charset=utf-8' + }; + } + else { + ({ url, type, contentType, ...fetchProps } = props); + fetchProps.url = url; + fetchProps.type = type ? type.toUpperCase() : 'GET'; + fetchProps.contentType = contentType || 'application/json; charset=utf-8'; + } + const propsRef = { + emitError: true, + ...fetchProps + }; + let fetchResponse = null; + propsRef.send = async (data) => { + const contentTypes = { + 'application/json': 'json', + 'multipart/form-data': 'formData', + 'application/octet-stream': 'blob', + 'application/x-www-form-urlencoded': 'formData' + }; + try { + if (isNOU(propsRef.fetchRequest) && propsRef.type === 'GET') { + propsRef.fetchRequest = new Request(propsRef.url, { method: propsRef.type }); + } + else if (isNOU(propsRef.fetchRequest)) { + propsRef.data = data && !isNOU(data) ? data : propsRef.data; + propsRef.fetchRequest = new Request(propsRef.url, { + method: propsRef.type, + headers: { 'Content-Type': propsRef.contentType }, + body: propsRef.data + }); + } + const eventArgs = { cancel: false, fetchRequest: propsRef.fetchRequest }; + triggerEvent(propsRef.beforeSend, eventArgs); + if (eventArgs.cancel) { + return null; + } + fetchResponse = fetch(propsRef.fetchRequest); + return fetchResponse.then((response) => { + triggerEvent(propsRef.onLoad, response); + if (!response.ok) { + throw response; + } + let responseType = 'text'; + for (const key of Object.keys(contentTypes)) { + if (response.headers.get('Content-Type') && response.headers.get('Content-Type').indexOf(key) !== -1) { + responseType = contentTypes[key]; + } + } + return response[responseType](); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + }).then((data) => { + triggerEvent(propsRef.onSuccess, data, propsRef); + return data; + }).catch((error) => { + let returnVal = {}; + if (propsRef.emitError) { + triggerEvent(propsRef.onFailure, error); + returnVal = Promise.reject(error); + } + return returnVal; + }); + } + catch (error) { + return error; + } + }; + /** + * Triggers the callback function with provided data and instance. + * + * @param {Function | null} callback - The callback function to be triggered + * @param {string | Object} [data] - Optional data to pass to the callback + * @param {IFetch} [instance] - Optional FetchProps instance + * @returns {void} + */ + function triggerEvent(callback, data, instance) { + if (!isNOU(callback) && typeof callback === 'function') { + callback(data, instance); + } + } + return propsRef; +} diff --git a/components/base/src/hijri-parser.d.ts b/components/base/src/hijri-parser.d.ts new file mode 100644 index 0000000..fb24370 --- /dev/null +++ b/components/base/src/hijri-parser.d.ts @@ -0,0 +1,17 @@ +/** + * Hijri parser custom hook + */ +interface HijriDate { + year: number; + month: number; + date: number; +} +interface IHijriParser { + getHijriDate: (gDate: Date) => HijriDate; + toGregorian: (year: number, month: number, day: number) => Date; +} +/** + * Custom hook for Hijri date parsing. + */ +export declare const HijriParser: IHijriParser; +export {}; diff --git a/components/base/src/hijri-parser.js b/components/base/src/hijri-parser.js new file mode 100644 index 0000000..4977d93 --- /dev/null +++ b/components/base/src/hijri-parser.js @@ -0,0 +1,206 @@ +/** + * Hijri parser custom hook + */ +/** + * Custom hook for Hijri date parsing. + */ +export const HijriParser = (() => { + const dateCorrection = [28607, 28636, 28665, 28695, 28724, 28754, 28783, 28813, 28843, 28872, 28901, 28931, 28960, 28990, + 29019, 29049, 29078, 29108, 29137, 29167, 29196, 29226, 29255, 29285, 29315, 29345, 29375, 29404, 29434, 29463, 29492, 29522, + 29551, 29580, 29610, 29640, 29669, 29699, 29729, 29759, 29788, 29818, 29847, 29876, 29906, 29935, 29964, 29994, 30023, 30053, + 30082, 30112, 30141, 30171, 30200, 30230, 30259, 30289, 30318, 30348, 30378, 30408, 30437, 30467, 30496, 30526, 30555, 30585, + 30614, 30644, 30673, 30703, 30732, 30762, 30791, 30821, 30850, 30880, 30909, 30939, 30968, 30998, 31027, 31057, 31086, 31116, + 31145, 31175, 31204, 31234, 31263, 31293, 31322, 31352, 31381, 31411, 31441, 31471, 31500, 31530, 31559, 31589, 31618, 31648, + 31676, 31706, 31736, 31766, 31795, 31825, 31854, 31884, 31913, 31943, 31972, 32002, 32031, 32061, 32090, 32120, 32150, 32180, + 32209, 32239, 32268, 32298, 32327, 32357, 32386, 32416, 32445, 32475, 32504, 32534, 32563, 32593, 32622, 32652, 32681, 32711, + 32740, 32770, 32799, 32829, 32858, 32888, 32917, 32947, 32976, 33006, 33035, 33065, 33094, 33124, 33153, 33183, 33213, 33243, + 33272, 33302, 33331, 33361, 33390, 33420, 33450, 33479, 33509, 33539, 33568, 33598, 33627, 33657, 33686, 33716, 33745, 33775, + 33804, 33834, 33863, 33893, 33922, 33952, 33981, 34011, 34040, 34069, 34099, 34128, 34158, 34187, 34217, 34247, 34277, 34306, + 34336, 34365, 34395, 34424, 34454, 34483, 34512, 34542, 34571, 34601, 34631, 34660, 34690, 34719, 34749, 34778, 34808, 34837, + 34867, 34896, 34926, 34955, 34985, 35015, 35044, 35074, 35103, 35133, 35162, 35192, 35222, 35251, 35280, 35310, 35340, 35370, + 35399, 35429, 35458, 35488, 35517, 35547, 35576, 35605, 35635, 35665, 35694, 35723, 35753, 35782, 35811, 35841, 35871, 35901, + 35930, 35960, 35989, 36019, 36048, 36078, 36107, 36136, 36166, 36195, 36225, 36254, 36284, 36314, 36343, 36373, 36403, 36433, + 36462, 36492, 36521, 36551, 36580, 36610, 36639, 36669, 36698, 36728, 36757, 36786, 36816, 36845, 36875, 36904, 36934, 36963, + 36993, 37022, 37052, 37081, 37111, 37141, 37170, 37200, 37229, 37259, 37288, 37318, 37347, 37377, 37406, 37436, 37465, 37495, + 37524, 37554, 37584, 37613, 37643, 37672, 37701, 37731, 37760, 37790, 37819, 37849, 37878, 37908, 37938, 37967, 37997, 38027, + 38056, 38085, 38115, 38144, 38174, 38203, 38233, 38262, 38292, 38322, 38351, 38381, 38410, 38440, 38469, 38499, 38528, 38558, + 38587, 38617, 38646, 38676, 38705, 38735, 38764, 38794, 38823, 38853, 38882, 38912, 38941, 38971, 39001, 39030, 39059, 39089, + 39118, 39148, 39178, 39208, 39237, 39267, 39297, 39326, 39355, 39385, 39414, 39444, 39473, 39503, 39532, 39562, 39592, 39621, + 39650, 39680, 39709, 39739, 39768, 39798, 39827, 39857, 39886, 39916, 39946, 39975, 40005, 40035, 40064, 40094, 40123, 40153, + 40182, 40212, 40241, 40271, 40300, 40330, 40359, 40389, 40418, 40448, 40477, 40507, 40536, 40566, 40595, 40625, 40655, 40685, + 40714, 40744, 40773, 40803, 40832, 40862, 40892, 40921, 40951, 40980, 41009, 41039, 41068, 41098, 41127, 41157, 41186, 41216, + 41245, 41275, 41304, 41334, 41364, 41393, 41422, 41452, 41481, 41511, 41540, 41570, 41599, 41629, 41658, 41688, 41718, 41748, + 41777, 41807, 41836, 41865, 41894, 41924, 41953, 41983, 42012, 42042, 42072, 42102, 42131, 42161, 42190, 42220, 42249, 42279, + 42308, 42337, 42367, 42397, 42426, 42456, 42485, 42515, 42545, 42574, 42604, 42633, 42662, 42692, 42721, 42751, 42780, 42810, + 42839, 42869, 42899, 42929, 42958, 42988, 43017, 43046, 43076, 43105, 43135, 43164, 43194, 43223, 43253, 43283, 43312, 43342, + 43371, 43401, 43430, 43460, 43489, 43519, 43548, 43578, 43607, 43637, 43666, 43696, 43726, 43755, 43785, 43814, 43844, 43873, + 43903, 43932, 43962, 43991, 44021, 44050, 44080, 44109, 44139, 44169, 44198, 44228, 44258, 44287, 44317, 44346, 44375, 44405, + 44434, 44464, 44493, 44523, 44553, 44582, 44612, 44641, 44671, 44700, 44730, 44759, 44788, 44818, 44847, 44877, 44906, 44936, + 44966, 44996, 45025, 45055, 45084, 45114, 45143, 45172, 45202, 45231, 45261, 45290, 45320, 45350, 45380, 45409, 45439, 45468, + 45498, 45527, 45556, 45586, 45615, 45644, 45674, 45704, 45733, 45763, 45793, 45823, 45852, 45882, 45911, 45940, 45970, 45999, + 46028, 46058, 46088, 46117, 46147, 46177, 46206, 46236, 46265, 46295, 46324, 46354, 46383, 46413, 46442, 46472, 46501, 46531, + 46560, 46590, 46620, 46649, 46679, 46708, 46738, 46767, 46797, 46826, 46856, 46885, 46915, 46944, 46974, 47003, 47033, 47063, + 47092, 47122, 47151, 47181, 47210, 47240, 47269, 47298, 47328, 47357, 47387, 47417, 47446, 47476, 47506, 47535, 47565, 47594, + 47624, 47653, 47682, 47712, 47741, 47771, 47800, 47830, 47860, 47890, 47919, 47949, 47978, 48008, 48037, 48066, 48096, 48125, + 48155, 48184, 48214, 48244, 48273, 48303, 48333, 48362, 48392, 48421, 48450, 48480, 48509, 48538, 48568, 48598, 48627, 48657, + 48687, 48717, 48746, 48776, 48805, 48834, 48864, 48893, 48922, 48952, 48982, 49011, 49041, 49071, 49100, 49130, 49160, 49189, + 49218, 49248, 49277, 49306, 49336, 49365, 49395, 49425, 49455, 49484, 49514, 49543, 49573, 49602, 49632, 49661, 49690, 49720, + 49749, 49779, 49809, 49838, 49868, 49898, 49927, 49957, 49986, 50016, 50045, 50075, 50104, 50133, 50163, 50192, 50222, 50252, + 50281, 50311, 50340, 50370, 50400, 50429, 50459, 50488, 50518, 50547, 50576, 50606, 50635, 50665, 50694, 50724, 50754, 50784, + 50813, 50843, 50872, 50902, 50931, 50960, 50990, 51019, 51049, 51078, 51108, 51138, 51167, 51197, 51227, 51256, 51286, 51315, + 51345, 51374, 51403, 51433, 51462, 51492, 51522, 51552, 51582, 51611, 51641, 51670, 51699, 51729, 51758, 51787, 51816, 51846, + 51876, 51906, 51936, 51965, 51995, 52025, 52054, 52083, 52113, 52142, 52171, 52200, 52230, 52260, 52290, 52319, 52349, 52379, + 52408, 52438, 52467, 52497, 52526, 52555, 52585, 52614, 52644, 52673, 52703, 52733, 52762, 52792, 52822, 52851, 52881, 52910, + 52939, 52969, 52998, 53028, 53057, 53087, 53116, 53146, 53176, 53205, 53235, 53264, 53294, 53324, 53353, 53383, 53412, 53441, + 53471, 53500, 53530, 53559, 53589, 53619, 53648, 53678, 53708, 53737, 53767, 53796, 53825, 53855, 53884, 53913, 53943, 53973, + 54003, 54032, 54062, 54092, 54121, 54151, 54180, 54209, 54239, 54268, 54297, 54327, 54357, 54387, 54416, 54446, 54476, 54505, + 54535, 54564, 54593, 54623, 54652, 54681, 54711, 54741, 54770, 54800, 54830, 54859, 54889, 54919, 54948, 54977, 55007, 55036, + 55066, 55095, 55125, 55154, 55184, 55213, 55243, 55273, 55302, 55332, 55361, 55391, 55420, 55450, 55479, 55508, 55538, 55567, + 55597, 55627, 55657, 55686, 55716, 55745, 55775, 55804, 55834, 55863, 55892, 55922, 55951, 55981, 56011, 56040, 56070, 56100, + 56129, 56159, 56188, 56218, 56247, 56276, 56306, 56335, 56365, 56394, 56424, 56454, 56483, 56513, 56543, 56572, 56601, 56631, + 56660, 56690, 56719, 56749, 56778, 56808, 56837, 56867, 56897, 56926, 56956, 56985, 57015, 57044, 57074, 57103, 57133, 57162, + 57192, 57221, 57251, 57280, 57310, 57340, 57369, 57399, 57429, 57458, 57487, 57517, 57546, 57576, 57605, 57634, 57664, 57694, + 57723, 57753, 57783, 57813, 57842, 57871, 57901, 57930, 57959, 57989, 58018, 58048, 58077, 58107, 58137, 58167, 58196, 58226, + 58255, 58285, 58314, 58343, 58373, 58402, 58432, 58461, 58491, 58521, 58551, 58580, 58610, 58639, 58669, 58698, 58727, 58757, + 58786, 58816, 58845, 58875, 58905, 58934, 58964, 58994, 59023, 59053, 59082, 59111, 59141, 59170, 59200, 59229, 59259, 59288, + 59318, 59348, 59377, 59407, 59436, 59466, 59495, 59525, 59554, 59584, 59613, 59643, 59672, 59702, 59731, 59761, 59791, 59820, + 59850, 59879, 59909, 59939, 59968, 59997, 60027, 60056, 60086, 60115, 60145, 60174, 60204, 60234, 60264, 60293, 60323, 60352, + 60381, 60411, 60440, 60469, 60499, 60528, 60558, 60588, 60618, 60648, 60677, 60707, 60736, 60765, 60795, 60824, 60853, 60883, + 60912, 60942, 60972, 61002, 61031, 61061, 61090, 61120, 61149, 61179, 61208, 61237, 61267, 61296, 61326, 61356, 61385, 61415, + 61445, 61474, 61504, 61533, 61563, 61592, 61621, 61651, 61680, 61710, 61739, 61769, 61799, 61828, 61858, 61888, 61917, 61947, + 61976, 62006, 62035, 62064, 62094, 62123, 62153, 62182, 62212, 62242, 62271, 62301, 62331, 62360, 62390, 62419, 62448, 62478, + 62507, 62537, 62566, 62596, 62625, 62655, 62685, 62715, 62744, 62774, 62803, 62832, 62862, 62891, 62921, 62950, 62980, 63009, + 63039, 63069, 63099, 63128, 63157, 63187, 63216, 63246, 63275, 63305, 63334, 63363, 63393, 63423, 63453, 63482, 63512, 63541, + 63571, 63600, 63630, 63659, 63689, 63718, 63747, 63777, 63807, 63836, 63866, 63895, 63925, 63955, 63984, 64014, 64043, 64073, + 64102, 64131, 64161, 64190, 64220, 64249, 64279, 64309, 64339, 64368, 64398, 64427, 64457, 64486, 64515, 64545, 64574, 64603, + 64633, 64663, 64692, 64722, 64752, 64782, 64811, 64841, 64870, 64899, 64929, 64958, 64987, 65017, 65047, 65076, 65106, 65136, + 65166, 65195, 65225, 65254, 65283, 65313, 65342, 65371, 65401, 65431, 65460, 65490, 65520, 65549, 65579, 65608, 65638, 65667, + 65697, 65726, 65755, 65785, 65815, 65844, 65874, 65903, 65933, 65963, 65992, 66022, 66051, 66081, 66110, 66140, 66169, 66199, + 66228, 66258, 66287, 66317, 66346, 66376, 66405, 66435, 66465, 66494, 66524, 66553, 66583, 66612, 66641, 66671, 66700, 66730, + 66760, 66789, 66819, 66849, 66878, 66908, 66937, 66967, 66996, 67025, 67055, 67084, 67114, 67143, 67173, 67203, 67233, 67262, + 67292, 67321, 67351, 67380, 67409, 67439, 67468, 67497, 67527, 67557, 67587, 67617, 67646, 67676, 67705, 67735, 67764, 67793, + 67823, 67852, 67882, 67911, 67941, 67971, 68000, 68030, 68060, 68089, 68119, 68148, 68177, 68207, 68236, 68266, 68295, 68325, + 68354, 68384, 68414, 68443, 68473, 68502, 68532, 68561, 68591, 68620, 68650, 68679, 68708, 68738, 68768, 68797, 68827, 68857, + 68886, 68916, 68946, 68975, 69004, 69034, 69063, 69092, 69122, 69152, 69181, 69211, 69240, 69270, 69300, 69330, 69359, 69388, + 69418, 69447, 69476, 69506, 69535, 69565, 69595, 69624, 69654, 69684, 69713, 69743, 69772, 69802, 69831, 69861, 69890, 69919, + 69949, 69978, 70008, 70038, 70067, 70097, 70126, 70156, 70186, 70215, 70245, 70274, 70303, 70333, 70362, 70392, 70421, 70451, + 70481, 70510, 70540, 70570, 70599, 70629, 70658, 70687, 70717, 70746, 70776, 70805, 70835, 70864, 70894, 70924, 70954, 70983, + 71013, 71042, 71071, 71101, 71130, 71159, 71189, 71218, 71248, 71278, 71308, 71337, 71367, 71397, 71426, 71455, 71485, 71514, + 71543, 71573, 71602, 71632, 71662, 71691, 71721, 71751, 71781, 71810, 71839, 71869, 71898, 71927, 71957, 71986, 72016, 72046, + 72075, 72105, 72135, 72164, 72194, 72223, 72253, 72282, 72311, 72341, 72370, 72400, 72429, 72459, 72489, 72518, 72548, 72577, + 72607, 72637, 72666, 72695, 72725, 72754, 72784, 72813, 72843, 72872, 72902, 72931, 72961, 72991, 73020, 73050, 73080, 73109, + 73139, 73168, 73197, 73227, 73256, 73286, 73315, 73345, 73375, 73404, 73434, 73464, 73493, 73523, 73552, 73581, 73611, 73640, + 73669, 73699, 73729, 73758, 73788, 73818, 73848, 73877, 73907, 73936, 73965, 73995, 74024, 74053, 74083, 74113, 74142, 74172, + 74202, 74231, 74261, 74291, 74320, 74349, 74379, 74408, 74437, 74467, 74497, 74526, 74556, 74586, 74615, 74645, 74675, 74704, + 74733, 74763, 74792, 74822, 74851, 74881, 74910, 74940, 74969, 74999, 75029, 75058, 75088, 75117, 75147, 75176, 75206, 75235, + 75264, 75294, 75323, 75353, 75383, 75412, 75442, 75472, 75501, 75531, 75560, 75590, 75619, 75648, 75678, 75707, 75737, 75766, + 75796, 75826, 75856, 75885, 75915, 75944, 75974, 76003, 76032, 76062, 76091, 76121, 76150, 76180, 76210, 76239, 76269, 76299, + 76328, 76358, 76387, 76416, 76446, 76475, 76505, 76534, 76564, 76593, 76623, 76653, 76682, 76712, 76741, 76771, 76801, 76830, + 76859, 76889, 76918, 76948, 76977, 77007, 77036, 77066, 77096, 77125, 77155, 77185, 77214, 77243, 77273, 77302, 77332, 77361, + 77390, 77420, 77450, 77479, 77509, 77539, 77569, 77598, 77627, 77657, 77686, 77715, 77745, 77774, 77804, 77833, 77863, 77893, + 77923, 77952, 77982, 78011, 78041, 78070, 78099, 78129, 78158, 78188, 78217, 78247, 78277, 78307, 78336, 78366, 78395, 78425, + 78454, 78483, 78513, 78542, 78572, 78601, 78631, 78661, 78690, 78720, 78750, 78779, 78808, 78838, 78867, 78897, 78926, 78956, + 78985, 79015, 79044, 79074, 79104, 79133, 79163, 79192, 79222, 79251, 79281, 79310, 79340, 79369, 79399, 79428, 79458, 79487, + 79517, 79546, 79576, 79606, 79635, 79665, 79695, 79724, 79753, 79783, 79812, 79841, 79871, 79900, 79930, 79960, 79990 + ]; + /** + * Converts a Gregorian date to a Hijri date. + * + * @param {Date} gDate - The Gregorian date to convert. + * @returns {HijriDate} - The converted Hijri date. + */ + function getHijriDate(gDate) { + let day = gDate.getDate(); + let month = gDate.getMonth(); + let year = gDate.getFullYear(); + let tMonth = month + 1; + let tYear = year; + if (tMonth < 3) { + tYear -= 1; + tMonth += 12; + } + let yPrefix = Math.floor(tYear / 100); + let julilanOffset = yPrefix - Math.floor(yPrefix / 4) - 2; + const julianNumber = Math.floor(365.25 * (tYear + 4716)) + Math.floor(30.6001 * (tMonth + 1)) + day - julilanOffset - 1524; + yPrefix = Math.floor((julianNumber - 1867216.25) / 36524.25); + julilanOffset = yPrefix - Math.floor(yPrefix / 4) + 1; + const b = julianNumber + julilanOffset + 1524; + let c = Math.floor((b - 122.1) / 365.25); + const d = Math.floor(365.25 * c); + const tempMonth = Math.floor((b - d) / 30.6001); + day = (b - d) - Math.floor(30.6001 * tempMonth); + month = Math.floor((b - d) / 20.6001); + if (month > 13) { + c += 1; + month -= 12; + } + month -= 1; + year = c - 4716; + const modifiedJulianDate = julianNumber - 2400000; + const iyear = 10631 / 30; + let z = julianNumber - 1948084; + const cyc = Math.floor(z / 10631.); + z = z - 10631 * cyc; + const j = Math.floor((z - 0.1335) / iyear); + const iy = 30 * cyc + j; + z = z - Math.floor(j * iyear + 0.1335); + let im = Math.floor((z + 28.5001) / 29.5); + if (im === 13) { + im = 12; + } + const tempDay = z - Math.floor(29.5001 * im - 29); + let i = 0; + for (; i < dateCorrection.length; i++) { + if (dateCorrection[parseInt(i.toString(), 10)] > modifiedJulianDate) { + break; + } + } + const iln = i + 16260; + const ii = Math.floor((iln - 1) / 12); + let hYear = ii + 1; + let hmonth = iln - 12 * ii; + let hDate = modifiedJulianDate - dateCorrection[i - 1] + 1; + if ((hDate + '').length > 2) { + hDate = tempDay; + hmonth = im; + hYear = iy; + } + return { year: hYear, month: hmonth, date: hDate }; + } + /** + * Converts a Hijri date to a Gregorian date. + * + * @param {number} year - The Hijri year. + * @param {number} month - The Hijri month. + * @param {number} day - The Hijri day. + * @returns {Date} - The converted Gregorian date. + */ + function toGregorian(year, month, day) { + const iy = year; + const im = month; + const id = day; + const ii = iy - 1; + const iln = (ii * 12) + 1 + (im - 1); + const i = iln - 16260; + const mcjdn = id + dateCorrection[i - 1] - 1; + const julianDate = mcjdn + 2400000; + const z = Math.floor(julianDate + 0.5); + let a = Math.floor((z - 1867216.25) / 36524.25); + a = z + 1 + a - Math.floor(a / 4); + const b = a + 1524; + const c = Math.floor((b - 122.1) / 365.25); + const d = Math.floor(365.25 * c); + const e = Math.floor((b - d) / 30.6001); + const gDay = b - d - Math.floor(e * 30.6001); + let gMonth = e - (e > 13.5 ? 13 : 1); + const gYear = c - (gMonth > 2.5 ? 4716 : 4715); + if (gYear <= 0) { + gMonth--; + } + return new Date(`${gYear}/${gMonth}/${gDay}`); + } + return { + getHijriDate, + toGregorian + }; +})(); diff --git a/components/base/src/index.d.ts b/components/base/src/index.d.ts new file mode 100644 index 0000000..d16d516 --- /dev/null +++ b/components/base/src/index.d.ts @@ -0,0 +1,21 @@ +/** + * Base modules + */ +export * from './animation'; +export * from './base'; +export * from './browser'; +export * from './component'; +export * from './dom'; +export * from './event-handler'; +export * from './fetch'; +export * from './hijri-parser'; +export * from './internationalization'; +export * from './l10n'; +export * from './observer'; +export * from './ripple'; +export * from './sanitize-helper'; +export * from './touch'; +export * from './util'; +export * from './validate-lic'; +export * from './provider'; +export * from './svg-icon'; diff --git a/components/base/src/index.js b/components/base/src/index.js new file mode 100644 index 0000000..d16d516 --- /dev/null +++ b/components/base/src/index.js @@ -0,0 +1,21 @@ +/** + * Base modules + */ +export * from './animation'; +export * from './base'; +export * from './browser'; +export * from './component'; +export * from './dom'; +export * from './event-handler'; +export * from './fetch'; +export * from './hijri-parser'; +export * from './internationalization'; +export * from './l10n'; +export * from './observer'; +export * from './ripple'; +export * from './sanitize-helper'; +export * from './touch'; +export * from './util'; +export * from './validate-lic'; +export * from './provider'; +export * from './svg-icon'; diff --git a/components/base/src/internationalization.d.ts b/components/base/src/internationalization.d.ts new file mode 100644 index 0000000..a6c13f9 --- /dev/null +++ b/components/base/src/internationalization.d.ts @@ -0,0 +1,236 @@ +/** + * Interface for DateFormatOptions + */ +export interface DateFormatOptions { + /** + * Specifies the skeleton for date formatting. + */ + skeleton?: string; + /** + * Specifies the type of date formatting either date, dateTime or time. + */ + type?: string; + /** + * Specifies custom date formatting to be used. + */ + format?: string; + /** + * Specifies the calendar mode other than gregorian + */ + calendar?: string; + /** + * Enable server side date formating. + */ + isServerRendered?: boolean; +} +/** + * Interface for numberFormatOptions + */ +export interface NumberFormatOptions { + /** + * Specifies minimum fraction digits in formatted value. + */ + minimumFractionDigits?: number; + /** + * Specifies maximum fraction digits in formatted value. + */ + maximumFractionDigits?: number; + /** + * Specifies minimum significant digits in formatted value. + */ + minimumSignificantDigits?: number; + /** + * Specifies maximum significant digits in formatted value. + */ + maximumSignificantDigits?: number; + /** + * Specifies whether to use grouping or not in formatted value, + */ + useGrouping?: boolean; + /** + * Specifies whether to ignore currency symbol in formatted value, + */ + ignoreCurrency?: boolean; + /** + * Specifies the skeleton for perform formatting. + */ + skeleton?: string; + /** + * Specifies the currency code to be used for formatting. + */ + currency?: string | null; + /** + * Specifies minimum integer digits in formatted value. + */ + minimumIntegerDigits?: number; + /** + * Specifies custom number format for formatting. + */ + format?: string; + /** + * Species which currency symbol to consider. + */ + altSymbol?: string; +} +/** + * Specifies the CLDR data loaded for internationalization functionalities. + * + * @private + */ +export declare const cldrData: Object; +/** + * Specifies the default culture value to be considered. + * + * @private + */ +export declare let defaultCulture: string; +/** + * Specifies default currency code to be considered + * + * @private + */ +export declare let defaultCurrencyCode: string; +/** + * Gets a date formatter function for specified culture and format options + * + * @param {string} culture - The culture code (e.g. 'en-US') + * @param {DateFormatOptions} props - Date formatting options + * @returns {Function} Formatter function that accepts Date objects + */ +export declare function getDateFormat(culture: string, props?: DateFormatOptions): Function; +/** + * Gets a number formatter function for specified culture and format options + * + * @param {string} culture - The culture code (e.g. 'en-US') + * @param {NumberFormatOptions} props - Number formatting options + * @returns {Function} Formatter function that accepts numeric values + */ +export declare function getNumberFormat(culture: string, props?: NumberFormatOptions): Function; +/** + * Returns the parser function for given props. + * + * @param {string} culture - The culture code (e.g. 'en-US') + * @param {DateFormatOptions} props - Specifies the format props in which the parser function will return. + * @returns {Function} The date parser function. + */ +export declare function getDateParser(culture: string, props?: DateFormatOptions): Function; +/** + * Returns the parser function for given props. + * + * @param {string} culture - The culture code (e.g. 'en-US') + * @param {NumberFormatOptions} props - Specifies the format props in which the parser function will return. + * @returns {Function} The number parser function. + */ +export declare function getNumberParser(culture: string, props?: NumberFormatOptions): Function; +/** + * Returns the formatted string based on format props. + * + * @param {string} culture - The culture code (e.g. 'en-US') + * @param {number} value - Specifies the number to format. + * @param {NumberFormatOptions} option - Specifies the format props in which the number will be formatted. + * @returns {string} The formatted number string. + */ +export declare function formatNumber(culture: string, value: number, option?: NumberFormatOptions): string; +/** + * Returns the formatted date string based on format props. + * + * @param {string} culture - The culture code (e.g. 'en-US'). + * @param {Date} value - Specifies the number to format. + * @param {DateFormatOptions} option - Specifies the format props in which the number will be formatted. + * @returns {string} The formatted date string. + */ +export declare function formatDate(culture: string, value: Date, option?: DateFormatOptions): string; +/** + * Returns the date object for given date string and props. + * + * @param {string} culture - The culture code (e.g. 'en-US'). + * @param {string} value - Specifies the string to parse. + * @param {DateFormatOptions} option - Specifies the parse props in which the date string will be parsed. + * @returns {Date} The parsed Date object. + */ +export declare function parseDate(culture: string, value: string, option?: DateFormatOptions): Date; +/** + * Returns the number object from the given string value and props. + * + * @param {string} culture - The culture code (e.g. 'en-US'). + * @param {string} value - Specifies the string to parse. + * @param {NumberFormatOptions} option - Specifies the parse props in which the string number will be parsed. + * @returns {number} The parsed number. + */ +export declare function parseNumber(culture: string, value: string, option?: NumberFormatOptions): number; +/** + * Returns Native Date Time Pattern + * + * @param {string} culture - The culture code (e.g. 'en-US'). + * @param {DateFormatOptions} option - Specifies the parse props for resultant date time pattern. + * @param {boolean} isExcelFormat - Specifies format value to be converted to excel pattern. + * @returns {string} The native date time pattern. + * @private + */ +export declare function getDatePattern(culture: string, option: DateFormatOptions, isExcelFormat?: boolean): string; +/** + * Returns Native Number Pattern + * + * @param {string} culture - The culture code (e.g. 'en-US'). + * @param {NumberFormatOptions} option - Specifies the parse props for resultant number pattern. + * @param {boolean} isExcel - Specifies whether to return Excel format. + * @returns {string} The native number pattern. + * @private + */ +export declare function getNumberPattern(culture: string, option: NumberFormatOptions, isExcel?: boolean): string; +/** + * Returns the First Day of the Week + * + * @param {string} culture - The culture code (e.g. 'en-US'). + * @returns {number} The first day of the week. + */ +export declare function getFirstDayOfWeek(culture: string): number; +/** + * Set the default culture to all components + * + * @private + * @param {string} cultureName - Specifies the culture name to be set as default culture. + * @returns {void} + */ +export declare function setCulture(cultureName: string): void; +/** + * Set the default currency code to all components + * + * @private + * @param {string} currencyCode - Specifies the currency code to be set as default currency. + * @returns {void} + */ +export declare function setCurrencyCode(currencyCode: string): void; +/** + * Load the CLDR data into context + * + * @param {Object[]} data - Specifies the CLDR data's to be used for formatting and parser. + * @returns {void} + */ +export declare function loadCldr(...data: Object[]): void; +/** + * To get the numeric CLDR object for given culture + * + * @private + * @param {string} locale - Specifies the locale for which numericObject to be returned. + * @param {string} type - Specifies the type, by default it's decimal. + * @returns {Object} Returns the numeric CLDR object containing number formatting patterns and symbols + */ +export declare function getNumericObject(locale: string, type?: string): Object; +/** + * To get the numeric CLDR number base object for given culture + * + * @private + * @param {string} locale - Specifies the locale for which numericObject to be returned. + * @param {string} currency - Specifies the currency for which numericObject to be returned. + * @returns {string} Returns the currency symbol for the specified locale and currency + */ +export declare function getNumberDependable(locale: string, currency: string): string; +/** + * To get the default date CLDR object. + * + * @private + * @param {string} mode - Specify the mode, optional. + * @returns {Object} Returns the default date CLDR object containing date formatting patterns + */ +export declare function getDefaultDateObject(mode?: string): Object; diff --git a/components/base/src/internationalization.js b/components/base/src/internationalization.js new file mode 100644 index 0000000..87fd215 --- /dev/null +++ b/components/base/src/internationalization.js @@ -0,0 +1,214 @@ +import { DateFormat } from './intl/date-formatter'; +import { NumberFormat } from './intl/number-formatter'; +import { DateParser } from './intl/date-parser'; +import { NumberParser } from './intl/number-parser'; +import { IntlBase } from './intl/intl-base'; +import { extend, getValue } from './util'; +/** + * Specifies the CLDR data loaded for internationalization functionalities. + * + * @private + */ +export const cldrData = {}; +/** + * Specifies the default culture value to be considered. + * + * @private + */ +export let defaultCulture = 'en-US'; +/** + * Specifies default currency code to be considered + * + * @private + */ +export let defaultCurrencyCode = 'USD'; +const mapper = ['numericObject', 'dateObject']; +/** + * Gets a date formatter function for specified culture and format options + * + * @param {string} culture - The culture code (e.g. 'en-US') + * @param {DateFormatOptions} props - Date formatting options + * @returns {Function} Formatter function that accepts Date objects + */ +export function getDateFormat(culture, props) { + return DateFormat.dateFormat(culture, props || { type: 'date', skeleton: 'short' }, cldrData); +} +/** + * Gets a number formatter function for specified culture and format options + * + * @param {string} culture - The culture code (e.g. 'en-US') + * @param {NumberFormatOptions} props - Number formatting options + * @returns {Function} Formatter function that accepts numeric values + */ +export function getNumberFormat(culture, props) { + if (props && !props.currency) { + props.currency = defaultCurrencyCode; + } + return NumberFormat.numberFormatter(culture, props || {}, cldrData); +} +/** + * Returns the parser function for given props. + * + * @param {string} culture - The culture code (e.g. 'en-US') + * @param {DateFormatOptions} props - Specifies the format props in which the parser function will return. + * @returns {Function} The date parser function. + */ +export function getDateParser(culture, props) { + return DateParser.dateParser(culture, props || { skeleton: 'short', type: 'date' }, cldrData); +} +/** + * Returns the parser function for given props. + * + * @param {string} culture - The culture code (e.g. 'en-US') + * @param {NumberFormatOptions} props - Specifies the format props in which the parser function will return. + * @returns {Function} The number parser function. + */ +export function getNumberParser(culture, props) { + return NumberParser.numberParser(culture, props || { format: 'N' }, cldrData); +} +/** + * Returns the formatted string based on format props. + * + * @param {string} culture - The culture code (e.g. 'en-US') + * @param {number} value - Specifies the number to format. + * @param {NumberFormatOptions} option - Specifies the format props in which the number will be formatted. + * @returns {string} The formatted number string. + */ +export function formatNumber(culture, value, option) { + return getNumberFormat(culture, option)(value) || value; +} +/** + * Returns the formatted date string based on format props. + * + * @param {string} culture - The culture code (e.g. 'en-US'). + * @param {Date} value - Specifies the number to format. + * @param {DateFormatOptions} option - Specifies the format props in which the number will be formatted. + * @returns {string} The formatted date string. + */ +export function formatDate(culture, value, option) { + return getDateFormat(culture, option)(value); +} +/** + * Returns the date object for given date string and props. + * + * @param {string} culture - The culture code (e.g. 'en-US'). + * @param {string} value - Specifies the string to parse. + * @param {DateFormatOptions} option - Specifies the parse props in which the date string will be parsed. + * @returns {Date} The parsed Date object. + */ +export function parseDate(culture, value, option) { + return getDateParser(culture, option)(value); +} +/** + * Returns the number object from the given string value and props. + * + * @param {string} culture - The culture code (e.g. 'en-US'). + * @param {string} value - Specifies the string to parse. + * @param {NumberFormatOptions} option - Specifies the parse props in which the string number will be parsed. + * @returns {number} The parsed number. + */ +export function parseNumber(culture, value, option) { + return getNumberParser(culture, option)(value); +} +/** + * Returns Native Date Time Pattern + * + * @param {string} culture - The culture code (e.g. 'en-US'). + * @param {DateFormatOptions} option - Specifies the parse props for resultant date time pattern. + * @param {boolean} isExcelFormat - Specifies format value to be converted to excel pattern. + * @returns {string} The native date time pattern. + * @private + */ +export function getDatePattern(culture, option, isExcelFormat) { + return IntlBase.getActualDateTimeFormat(culture, option, cldrData, isExcelFormat); +} +/** + * Returns Native Number Pattern + * + * @param {string} culture - The culture code (e.g. 'en-US'). + * @param {NumberFormatOptions} option - Specifies the parse props for resultant number pattern. + * @param {boolean} isExcel - Specifies whether to return Excel format. + * @returns {string} The native number pattern. + * @private + */ +export function getNumberPattern(culture, option, isExcel) { + return IntlBase.getActualNumberFormat(culture, option, cldrData, isExcel); +} +/** + * Returns the First Day of the Week + * + * @param {string} culture - The culture code (e.g. 'en-US'). + * @returns {number} The first day of the week. + */ +export function getFirstDayOfWeek(culture) { + return IntlBase.getWeekData(culture, cldrData); +} +/** + * Set the default culture to all components + * + * @private + * @param {string} cultureName - Specifies the culture name to be set as default culture. + * @returns {void} + */ +export function setCulture(cultureName) { + defaultCulture = cultureName; +} +/** + * Set the default currency code to all components + * + * @private + * @param {string} currencyCode - Specifies the currency code to be set as default currency. + * @returns {void} + */ +export function setCurrencyCode(currencyCode) { + defaultCurrencyCode = currencyCode; +} +/** + * Load the CLDR data into context + * + * @param {Object[]} data - Specifies the CLDR data's to be used for formatting and parser. + * @returns {void} + */ +export function loadCldr(...data) { + for (const obj of data) { + extend(cldrData, obj, {}, true); + } +} +/** + * To get the numeric CLDR object for given culture + * + * @private + * @param {string} locale - Specifies the locale for which numericObject to be returned. + * @param {string} type - Specifies the type, by default it's decimal. + * @returns {Object} Returns the numeric CLDR object containing number formatting patterns and symbols + */ +export function getNumericObject(locale, type) { + const numObject = IntlBase.getDependables(cldrData, locale, '', true)[mapper[0]]; + const dateObject = IntlBase.getDependables(cldrData, locale, '')[mapper[1]]; + const numSystem = getValue('defaultNumberingSystem', numObject); + const symbPattern = getValue('symbols-numberSystem-' + numSystem, numObject); + const pattern = IntlBase.getSymbolPattern(type || 'decimal', numSystem, numObject, false); + return extend(symbPattern, IntlBase.getFormatData(pattern, true, '', true), { 'dateSeparator': IntlBase.getDateSeparator(dateObject) }); +} +/** + * To get the numeric CLDR number base object for given culture + * + * @private + * @param {string} locale - Specifies the locale for which numericObject to be returned. + * @param {string} currency - Specifies the currency for which numericObject to be returned. + * @returns {string} Returns the currency symbol for the specified locale and currency + */ +export function getNumberDependable(locale, currency) { + const numObject = IntlBase.getDependables(cldrData, locale, '', true); + return IntlBase.getCurrencySymbol(numObject['numericObject'], currency); +} +/** + * To get the default date CLDR object. + * + * @private + * @param {string} mode - Specify the mode, optional. + * @returns {Object} Returns the default date CLDR object containing date formatting patterns + */ +export function getDefaultDateObject(mode) { + return IntlBase.getDependables(cldrData, '', mode, false)[mapper[1]]; +} diff --git a/components/base/src/intl/date-formatter.d.ts b/components/base/src/intl/date-formatter.d.ts new file mode 100644 index 0000000..4c0e0f2 --- /dev/null +++ b/components/base/src/intl/date-formatter.d.ts @@ -0,0 +1,54 @@ +import { DateFormatOptions } from '../internationalization'; +import { NumberMapper } from './parser-base'; +import { TimeZoneOptions } from './intl-base'; +export declare const basicPatterns: string[]; +/** + * @interface FormatOptions + * Interface for Date Format Options Modules. + * + * @private + */ +export interface FormatOptions { + month?: Object; + weekday?: Object; + pattern?: string; + designator?: Object; + timeZone?: TimeZoneOptions; + era?: Object; + hour12?: boolean; + numMapper?: NumberMapper; + dateSeperator?: string; + isIslamic?: boolean; + weekOfYear?: string; +} +export declare const datePartMatcher: { + [key: string]: Object; +}; +export interface IDateFormat { + /** + * Returns the formatter function for a given skeleton. + * + * @private + * @param {string} culture Specifies the culture name for formatting. + * @param {DateFormatOptions} option Specifies the format in which the date will format. + * @param {Object} cldr Specifies the global cldr data collection. + * @returns {Function} Formatter function + */ + dateFormat: (culture: string, option: DateFormatOptions, cldr: Object) => Function; + /** + * Returns the value of the Time Zone. + * + * @private + * @param {number} tVal Time Zone offset value. + * @param {string} pattern Time Zone pattern. + * @returns {string} Time Zone formatted string. + */ + getTimeZoneValue: (tVal: number, pattern: string) => string; +} +/** + * @hook useDateFormat + * Date Format is a framework that provides support for date formatting. + * + * @returns {Object} An object containing methods related to date formatting. + */ +export declare const DateFormat: IDateFormat; diff --git a/components/base/src/intl/date-formatter.js b/components/base/src/intl/date-formatter.js new file mode 100644 index 0000000..109298a --- /dev/null +++ b/components/base/src/intl/date-formatter.js @@ -0,0 +1,280 @@ +import { ParserBase as parser } from './parser-base'; +import { IntlBase as base } from './intl-base'; +import { isUndefined, throwError, getValue } from '../util'; +import { HijriParser } from '../hijri-parser'; +import { isNullOrUndefined } from '../util'; +const abbreviateRegexGlobal = /\/MMMMM|MMMM|MMM|a|LLLL|LLL|EEEEE|EEEE|E|K|cccc|ccc|WW|W|G+|z+/gi; +const standalone = 'stand-alone'; +const weekdayKey = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']; +export const basicPatterns = ['short', 'medium', 'long', 'full']; +const timeSetter = { + m: 'getMinutes', + h: 'getHours', + H: 'getHours', + s: 'getSeconds', + d: 'getDate', + f: 'getMilliseconds' +}; +export const datePartMatcher = { + 'M': 'month', + 'd': 'day', + 'E': 'weekday', + 'c': 'weekday', + 'y': 'year', + 'm': 'minute', + 'h': 'hour', + 'H': 'hour', + 's': 'second', + 'L': 'month', + 'a': 'designator', + 'z': 'timeZone', + 'Z': 'timeZone', + 'G': 'era', + 'f': 'milliseconds' +}; +const timeSeparator = 'timeSeparator'; +/** + * @hook useDateFormat + * Date Format is a framework that provides support for date formatting. + * + * @returns {Object} An object containing methods related to date formatting. + */ +export const DateFormat = (() => { + /** + * Returns the formatter function for a given skeleton. + * + * @param {string} culture Specifies the culture name for formatting. + * @param {DateFormatOptions} option Specifies the format in which the date will format. + * @param {Object} cldr Specifies the global cldr data collection. + * @returns {Function} Formatter function + */ + function dateFormat(culture, option, cldr) { + const dependable = base.getDependables(cldr, culture, option.calendar); + const dateObject = dependable.dateObject; + const formatOptions = { isIslamic: base.islamicRegex.test(option.calendar) }; + const resPattern = option.format || + base.getResultantPattern(option.skeleton, dateObject, option.type, false); + formatOptions.dateSeperator = base.getDateSeparator(dateObject); + if (isUndefined(resPattern)) { + throwError('Format options or type given must be invalid'); + } + else { + formatOptions.pattern = resPattern; + formatOptions.numMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr)); + const patternMatch = resPattern.match(abbreviateRegexGlobal) || []; + for (const str of patternMatch) { + const len = str.length; + let char = str[0]; + if (char === 'K') { + char = 'h'; + } + switch (char) { + case 'E': + case 'c': + formatOptions.weekday = (dependable.dateObject)[`${base.days}`][`${standalone}`][(base).monthIndex[`${len}`]]; + break; + case 'M': + case 'L': + formatOptions.month = (dependable.dateObject)[`${base.month}`][`${standalone}`][(base.monthIndex)[`${len}`]]; + break; + case 'a': + formatOptions.designator = getValue('dayPeriods.format.wide', dateObject); + break; + case 'G': { + const eText = (len <= 3) ? 'eraAbbr' : (len === 4) ? 'eraNames' : 'eraNarrow'; + formatOptions.era = getValue('eras.' + eText, dependable.dateObject); + break; + } + case 'z': + formatOptions.timeZone = getValue('dates.timeZoneNames', dependable.parserObject); + break; + } + } + } + return (value) => { + if (isNaN(value.getDate())) { + return null; + } + return intDateFormatter(value, formatOptions); + }; + } + /** + * Formats the date according to the specified options. + * + * @param {Date} value The date to format. + * @param {FormatOptions} options The formatting options. + * @returns {string} The formatted date string. + */ + function intDateFormatter(value, options) { + const pattern = options.pattern; + let ret = ''; + const matches = pattern.match(base.dateParseRegex); + const dObject = getCurrentDateValue(value, options.isIslamic); + if (matches) { + for (const match of matches) { + const length = match.length; + let char = match[0]; + if (char === 'K') { + char = 'h'; + } + let curval; + let curvalstr = ''; + let isNumber; + let processNumber; + let curstr = ''; + switch (char) { + case 'M': + case 'L': + curval = dObject.month; + if (length > 2) { + ret += options.month[`${curval}`]; + } + else { + isNumber = true; + } + break; + case 'E': + case 'c': + ret += options.weekday[`${weekdayKey[value.getDay()]}`]; + break; + case 'H': + case 'h': + case 'm': + case 's': + case 'd': + case 'f': + isNumber = true; + if (char === 'd') { + curval = dObject.date; + } + else if (char === 'f') { + isNumber = false; + processNumber = true; + curvalstr = (value)[`${(timeSetter)[`${char}`]}`]().toString(); + curvalstr = curvalstr.substring(0, length); + const curlength = curvalstr.length; + if (length !== curlength) { + if (length > 3) { + continue; + } + for (let i = 0; i < length - curlength; i++) { + curvalstr = '0' + curvalstr.toString(); + } + } + curstr += curvalstr; + } + else { + curval = (value)[`${(timeSetter)[`${char}`]}`](); + } + if (char === 'h') { + curval = curval % 12 || 12; + } + break; + case 'y': + processNumber = true; + curstr += dObject.year; + if (length === 2) { + curstr = curstr.substr(curstr.length - 2); + } + break; + case 'a': { + const desig = value.getHours() < 12 ? 'am' : 'pm'; + ret += options.designator[`${desig}`]; + break; + } + case 'G': { + const dec = value.getFullYear() < 0 ? 0 : 1; + let retu = options.era[`${dec}`]; + if (isNullOrUndefined(retu)) { + retu = options.era[dec ? 0 : 1]; + } + ret += retu || ''; + break; + } + case '\'': + ret += (match === '\'\'') ? '\'' : match.replace(/'/g, ''); + break; + case 'z': { + const timezone = value.getTimezoneOffset(); + let pattern = (length < 4) ? '+H;-H' : options.timeZone.hourFormat; + pattern = pattern.replace(/:/g, options.numMapper.timeSeparator); + if (timezone === 0) { + ret += options.timeZone.gmtZeroFormat; + } + else { + processNumber = true; + curstr = getTimeZoneValue(timezone, pattern); + } + curstr = options.timeZone.gmtFormat.replace(/\{0\}/, curstr); + break; + } + case ':': + ret += (options).numMapper.numberSymbols[`${timeSeparator}`]; + break; + case '/': + ret += options.dateSeperator; + break; + case 'W': + isNumber = true; + curval = base.getWeekOfYear(value); + break; + default: + ret += match; + } + if (isNumber) { + processNumber = true; + curstr = checkTwodigitNumber(curval, length); + } + if (processNumber) { + ret += parser.convertValueParts(curstr, base.latnParseRegex, options.numMapper.mapper); + } + } + } + return ret; + } + /** + * Returns the current date values, adjusted for Islamic calendar if needed. + * + * @param {Date} value The date object. + * @param {boolean} [isIslamic] Whether the date is Islamic. + * @returns {DateObject} The current date values. + */ + function getCurrentDateValue(value, isIslamic) { + if (isIslamic) { + return HijriParser.getHijriDate(value); + } + return { year: value.getFullYear(), month: value.getMonth() + 1, date: value.getDate() }; + } + /** + * Checks and formats the number to two digits. + * + * @param {number} val The number + * @param {number} len The desired length of the number. + * @returns {string} The formatted two-digit number string. + */ + function checkTwodigitNumber(val, len) { + const ret = val + ''; + if (len === 2 && ret.length !== 2) { + return '0' + ret; + } + return ret; + } + /** + * Returns the value of the Time Zone. + * + * @param {number} tVal Time Zone offset value. + * @param {string} pattern Time Zone pattern. + * @returns {string} Time Zone formatted string. + */ + function getTimeZoneValue(tVal, pattern) { + const splt = pattern.split(';'); + const curPattern = splt[tVal > 0 ? 1 : 0]; + const no = Math.abs(tVal); + return curPattern.replace(/HH?|mm/g, (str) => { + const len = str.length; + const isHour = str.indexOf('H') !== -1; + return checkTwodigitNumber(Math.floor(isHour ? (no / 60) : (no % 60)), len); + }); + } + return { dateFormat, getTimeZoneValue }; +})(); diff --git a/components/base/src/intl/date-parser.d.ts b/components/base/src/intl/date-parser.d.ts new file mode 100644 index 0000000..76d84cb --- /dev/null +++ b/components/base/src/intl/date-parser.d.ts @@ -0,0 +1,109 @@ +import { DateFormatOptions } from '../internationalization'; +import { TimeZoneOptions } from './intl-base'; +import { NumericOptions } from './parser-base'; +/** + * Interface for date parsing options + */ +interface ParseOptions { + month?: Object; + weekday?: string[]; + pattern?: string; + designator?: Object; + timeZone?: TimeZoneOptions; + era?: Object; + hour12?: boolean; + parserRegex?: RegExp; + evalposition?: { + [key: string]: ValuePosition; + }; + isIslamic?: boolean; + culture?: string; +} +/** + * Interface for the date options + */ +interface DateParts { + month?: number; + day?: number; + year?: number; + hour?: number; + minute?: number; + second?: number; + designator?: string; + timeZone?: number; + hour12?: boolean; +} +/** + * Interface for value position + */ +interface ValuePosition { + isNumber: boolean; + pos: number; + hourOnly?: boolean; +} +export interface IDateParser { + /** + * Returns the parser function for given skeleton. + * + * @private + * @param {string} culture - Specifies the culture name to be which formatting. + * @param {DateFormatOptions} option - Specific the format in which string date will be parsed. + * @param {Object} cldr - Specifies the global cldr data collection. + * @returns {Function} ? + */ + dateParser: (culture: string, option: DateFormatOptions, cldr: Object) => Function; + /** + * Returns date object for provided date options. + * + * @private + * @param {DateParts} options ? + * @param {Date} value ? + * @returns {Date} ? + */ + getDateObject: (options: DateParts, value?: Date) => Date; + /** + * Returns date parsing options for provided value along with parse and numeric options. + * + * @private + * @param {string} value ? + * @param {ParseOptions} parseOptions ? + * @param {NumericOptions} num ? + * @returns {DateParts} ? + */ + internalDateParse: (value: string, parseOptions: ParseOptions, num: NumericOptions) => DateParts; + /** + * Returns parsed number for provided Numeric string and Numeric Options. + * + * @private + * @param {string} value ? + * @param {NumericOptions} option ? + * @returns {number} ? + */ + internalNumberParser: (value: string, option: NumericOptions) => number; + /** + * Returns parsed time zone RegExp for provided hour format and time zone. + * + * @private + * @param {string} hourFormat ? + * @param {TimeZoneOptions} tZone ? + * @param {string} nRegex ? + * @returns {string} ? + */ + parseTimeZoneRegx: (hourFormat: string, tZone: TimeZoneOptions, nRegex: string) => string; + /** + * Returns zone based value. + * + * @private + * @param {boolean} flag ? + * @param {string} val1 ? + * @param {string} val2 ? + * @param {NumericOptions} num ? + * @returns {number} ? + */ + getZoneValue: (flag: boolean, val1: string, val2: string, num: NumericOptions) => number; +} +/** + * Custom function for date parsing. + */ +export declare const DateParser: IDateParser; +export {}; diff --git a/components/base/src/intl/date-parser.js b/components/base/src/intl/date-parser.js new file mode 100644 index 0000000..730d5c4 --- /dev/null +++ b/components/base/src/intl/date-parser.js @@ -0,0 +1,377 @@ +import { IntlBase as base } from './intl-base'; +import { ParserBase as parser } from './parser-base'; +import { isUndefined, throwError, getValue, isNullOrUndefined } from '../util'; +import { datePartMatcher } from './date-formatter'; +import { HijriParser } from '../hijri-parser'; +const standalone = 'stand-alone'; +const latnRegex = /^[0-9]*$/; +const timeSetter = { + minute: 'setMinutes', + hour: 'setHours', + second: 'setSeconds', + day: 'setDate', + month: 'setMonth', + milliseconds: 'setMilliseconds' +}; +const month = 'months'; +/** + * Custom function for date parsing. + */ +export const DateParser = (() => { + /** + * Returns the parser function for given skeleton. + * + * @param {string} culture - Specifies the culture name for formatting. + * @param {DateFormatOptions} option - Specifies the format in which string date will be parsed. + * @param {Object} cldr - Specifies the global cldr data collection. + * @returns {Function} - Returns a function that can parse dates. + */ + function dateParser(culture, option, cldr) { + const dependable = base.getDependables(cldr, culture, option.calendar); + const numOptions = parser.getCurrentNumericOptions(dependable.parserObject, parser.getNumberingSystem(cldr), false); + let parseOptions = {}; + const resPattern = option.format || + base.getResultantPattern(option.skeleton, dependable.dateObject, option.type, false); + let regexString = ''; + let hourOnly; + if (isUndefined(resPattern)) { + throwError('Format options or type given must be invalid'); + } + else { + parseOptions = { + isIslamic: base.islamicRegex.test(option.calendar), + pattern: resPattern, + evalposition: {}, + culture: culture + }; + const patternMatch = resPattern.match(base.dateParseRegex) || []; + const length = patternMatch.length; + let gmtCorrection = 0; + let zCorrectTemp = 0; + let isgmtTraversed = false; + const nRegx = numOptions.numericRegex; + const numMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr)); + for (let i = 0; i < length; i++) { + const str = patternMatch[parseInt(i.toString(), 10)]; + const len = str.length; + const char = (str[0] === 'K') ? 'h' : str[0]; + let isNumber; + let canUpdate; + const charKey = datePartMatcher[`${char}`]; + const optional = (len === 2) ? '' : '?'; + if (isgmtTraversed) { + gmtCorrection = zCorrectTemp; + isgmtTraversed = false; + } + switch (char) { + case 'E': + case 'c': { + const weekData = (dependable.dateObject)[`${base.days}`][`${standalone}`][(base).monthIndex[`${len}`]]; + const weekObject = parser.reverseObject(weekData); + regexString += '(' + Object.keys(weekObject).join('|') + ')'; + break; + } + case 'M': + case 'L': + case 'd': + case 'm': + case 's': + case 'h': + case 'H': + case 'f': + canUpdate = true; + if ((char === 'M' || char === 'L') && len > 2) { + const monthData = (dependable).dateObject[`${month}`][`${standalone}`][(base).monthIndex[`${len}`]]; + (parseOptions)[`${charKey}`] = parser.reverseObject(monthData); + regexString += '(' + Object.keys((parseOptions)[`${charKey}`]).join('|') + ')'; + } + else if (char === 'f') { + if (len > 3) { + continue; + } + isNumber = true; + regexString += '(' + nRegx + nRegx + '?' + nRegx + '?' + ')'; + } + else { + isNumber = true; + regexString += '(' + nRegx + nRegx + optional + ')'; + } + if (char === 'h') { + parseOptions.hour12 = true; + } + break; + case 'W': { + const opt = len === 1 ? '?' : ''; + regexString += '(' + nRegx + opt + nRegx + ')'; + break; + } + case 'y': + canUpdate = isNumber = true; + if (len === 2) { + regexString += '(' + nRegx + nRegx + ')'; + } + else { + regexString += '(' + nRegx + '{' + len + ',})'; + } + break; + case 'a': { + canUpdate = true; + const periodValue = getValue('dayPeriods.format.wide', dependable.dateObject); + (parseOptions)[`${charKey}`] = parser.reverseObject(periodValue); + regexString += '(' + Object.keys((parseOptions)[`${charKey}`]).join('|') + ')'; + break; + } + case 'G': { + canUpdate = true; + const eText = (len <= 3) ? 'eraAbbr' : (len === 4) ? 'eraNames' : 'eraNarrow'; + (parseOptions)[`${charKey}`] = parser.reverseObject(getValue('eras.' + eText, dependable.dateObject)); + regexString += '(' + Object.keys((parseOptions)[`${charKey}`]).join('|') + '?)'; + break; + } + case 'z': { + const tval = new Date().getTimezoneOffset(); + canUpdate = (tval !== 0); + (parseOptions)[`${charKey}`] = getValue('dates.timeZoneNames', dependable.parserObject); + const tzone = (parseOptions)[`${charKey}`]; + hourOnly = (len < 4); + let hpattern = hourOnly ? '+H;-H' : tzone.hourFormat; + hpattern = hpattern.replace(/:/g, numMapper.timeSeparator); + regexString += '(' + parseTimeZoneRegx(hpattern, tzone, nRegx) + ')?'; + isgmtTraversed = true; + zCorrectTemp = hourOnly ? 6 : 12; + break; + } + case '\'': { + const iString = str.replace(/'/g, ''); + regexString += '(' + iString + ')?'; + break; + } + default: + regexString += '([\\D])'; + break; + } + if (canUpdate) { + parseOptions.evalposition[`${charKey}`] = { isNumber: isNumber, pos: i + 1 + gmtCorrection, hourOnly: hourOnly }; + } + if (i === length - 1 && !isNullOrUndefined(regexString)) { + const regExp = RegExp; + parseOptions.parserRegex = new regExp('^' + regexString + '$', 'i'); + } + } + } + return (value) => { + const parsedDateParts = internalDateParse(value, parseOptions, numOptions); + if (isNullOrUndefined(parsedDateParts) || !Object.keys(parsedDateParts).length) { + return null; + } + if (parseOptions.isIslamic) { + let dobj = {}; + let tYear = parsedDateParts.year; + const tDate = parsedDateParts.day; + const tMonth = parsedDateParts.month; + const ystrig = tYear ? (tYear + '') : ''; + const is2DigitYear = (ystrig.length === 2); + if (!tYear || !tMonth || !tDate || is2DigitYear) { + dobj = HijriParser.getHijriDate(new Date()); + } + if (is2DigitYear) { + tYear = parseInt((dobj.year + '').slice(0, 2) + ystrig, 10); + } + const dateObject = HijriParser.toGregorian(tYear || dobj.year, tMonth || dobj.month, tDate || dobj.date); + parsedDateParts.year = dateObject.getFullYear(); + parsedDateParts.month = dateObject.getMonth() + 1; + parsedDateParts.day = dateObject.getDate(); + } + return getDateObject(parsedDateParts); + }; + } + /** + * Returns date object for provided date options. + * + * @param {DateParts} options - Specifies the date parts consisting of year, month, day, etc. + * @param {Date} [value] - Specifies the base date value to copy time parts. + * @returns {Date} - Returns the constructed date object. + */ + function getDateObject(options, value) { + const res = value || new Date(); + res.setMilliseconds(0); + const tKeys = ['hour', 'minute', 'second', 'milliseconds', 'month', 'day']; + let y = options.year; + const desig = options.designator; + const tzone = options.timeZone; + if (y && !isUndefined(y)) { + const len = (y + '').length; + if (len <= 2) { + const century = Math.floor(res.getFullYear() / 100) * 100; + y += century; + } + res.setFullYear(y); + } + for (const key of tKeys) { + let tValue = (options)[`${key}`]; + if (isUndefined(tValue) && key === 'day') { + res.setDate(1); + } + if (!isUndefined(tValue)) { + if (key === 'month') { + tValue -= 1; + if (tValue < 0 || tValue > 11) { + return new Date('invalid'); + } + const pDate = res.getDate(); + res.setDate(1); + (res)[(timeSetter)[`${key}`]](tValue); + const lDate = new Date(res.getFullYear(), tValue + 1, 0).getDate(); + res.setDate(pDate < lDate ? pDate : lDate); + } + else { + if (key === 'day') { + const lastDay = new Date(res.getFullYear(), res.getMonth() + 1, 0).getDate(); + if ((tValue < 1 || tValue > lastDay)) { + return null; + } + } + (res)[`${(timeSetter)[`${key}`]}`](tValue); + } + } + } + if (!isUndefined(desig)) { + const hour = res.getHours(); + if (desig === 'pm') { + res.setHours(hour + (hour === 12 ? 0 : 12)); + } + else if (hour === 12) { + res.setHours(0); + } + } + if (tzone && !isUndefined(tzone)) { + const tzValue = tzone - res.getTimezoneOffset(); + if (tzValue !== 0) { + res.setMinutes(res.getMinutes() + tzValue); + } + } + return res; + } + /** + * Returns date parsing options for provided value along with parse and numeric options. + * + * @param {string} value - Specifies the string value to be parsed. + * @param {ParseOptions} parseOptions - Specifies the parsing options. + * @param {NumericOptions} num - Specifies the numeric options. + * @returns {DateParts} - Returns the parsed date parts. + */ + function internalDateParse(value, parseOptions, num) { + const matches = value.match(parseOptions.parserRegex); + const retOptions = { 'hour': 0, 'minute': 0, 'second': 0 }; + if (isNullOrUndefined(matches)) { + return null; + } + else { + const props = Object.keys(parseOptions.evalposition); + for (const prop of props) { + const curObject = parseOptions.evalposition[`${prop}`]; + let matchString = matches[curObject.pos]; + if (curObject.isNumber) { + (retOptions)[`${prop}`] = internalNumberParser(matchString, num); + } + else { + if (prop === 'timeZone' && !isUndefined(matchString)) { + const pos = curObject.pos; + let val; + const tmatch = matches[pos + 1]; + const flag = !isUndefined(tmatch); + if (curObject.hourOnly) { + val = getZoneValue(flag, tmatch, matches[pos + 4], num) * 60; + } + else { + val = getZoneValue(flag, tmatch, matches[pos + 7], num) * 60; + val += getZoneValue(flag, matches[pos + 4], matches[pos + 10], num); + } + if (!isNullOrUndefined(val)) { + retOptions[`${prop}`] = val; + } + } + else { + const cultureOptions = ['en-US', 'en-MH', 'en-MP']; + matchString = ((prop === 'month') && (!(parseOptions).isIslamic) && ((parseOptions).culture === 'en' || (parseOptions).culture === 'en-GB' || (parseOptions).culture === 'en-US')) + ? matchString[0].toUpperCase() + matchString.substring(1).toLowerCase() : matchString; + matchString = ((prop !== 'month') && (prop === 'designator') && parseOptions.culture && (parseOptions).culture.indexOf('en-') !== -1 && cultureOptions.indexOf(parseOptions.culture) === -1) + ? matchString.toLowerCase() : matchString; + (retOptions)[`${prop}`] = (parseOptions)[`${prop}`][`${matchString}`]; + } + } + } + if (parseOptions.hour12) { + retOptions.hour12 = true; + } + } + return retOptions; + } + /** + * Returns parsed number for provided Numeric string and Numeric Options. + * + * @param {string} value - Specifies the numeric string value to be parsed. + * @param {NumericOptions} option - Specifies the numeric options. + * @returns {number} - Returns the parsed numeric value. + */ + function internalNumberParser(value, option) { + value = parser.convertValueParts(value, option.numberParseRegex, option.numericPair); + if (latnRegex.test(value)) { + return +value; + } + return null; + } + /** + * Returns parsed time zone RegExp for provided hour format and time zone. + * + * @param {string} hourFormat - Specifies the format of the hour. + * @param {TimeZoneOptions} tZone - Specifies the time zone options. + * @param {string} nRegex - Specifies the numeric regex. + * @returns {string} - Returns the timezone regular expression string. + */ + function parseTimeZoneRegx(hourFormat, tZone, nRegex) { + const pattern = tZone.gmtFormat; + let ret; + const cRegex = '(' + nRegex + ')' + '(' + nRegex + ')'; + ret = hourFormat.replace('+', '\\+'); + if (hourFormat.indexOf('HH') !== -1) { + ret = ret.replace(/HH|mm/g, '(' + cRegex + ')'); + } + else { + ret = ret.replace(/H|m/g, '(' + cRegex + '?)'); + } + const splitStr = (ret.split(';').map((str) => { + return pattern.replace('{0}', str); + })); + ret = splitStr.join('|') + '|' + tZone.gmtZeroFormat; + return ret; + } + /** + * Returns zone based value. + * + * @param {boolean} flag - Specifies whether the value needs to be negated. + * @param {string} val1 - Specifies the first value to be parsed. + * @param {string} val2 - Specifies the second value to be parsed. + * @param {NumericOptions} num - Specifies the numeric options. + * @returns {number} - Returns the computed zone value. + */ + function getZoneValue(flag, val1, val2, num) { + const ival = flag ? val1 : val2; + if (!ival) { + return 0; + } + const value = internalNumberParser(ival, num); + if (value && flag) { + return -value; + } + return value; + } + return { + dateParser, + getDateObject, + internalDateParse, + internalNumberParser, + parseTimeZoneRegx, + getZoneValue + }; +})(); diff --git a/components/base/src/intl/index.d.ts b/components/base/src/intl/index.d.ts new file mode 100644 index 0000000..ae01671 --- /dev/null +++ b/components/base/src/intl/index.d.ts @@ -0,0 +1,8 @@ +/** + * Internationalization + */ +export * from './date-formatter'; +export * from './number-formatter'; +export * from './intl-base'; +export * from './date-parser'; +export * from './number-parser'; diff --git a/components/base/src/intl/index.js b/components/base/src/intl/index.js new file mode 100644 index 0000000..ae01671 --- /dev/null +++ b/components/base/src/intl/index.js @@ -0,0 +1,8 @@ +/** + * Internationalization + */ +export * from './date-formatter'; +export * from './number-formatter'; +export * from './intl-base'; +export * from './date-parser'; +export * from './number-parser'; diff --git a/components/base/src/intl/intl-base.d.ts b/components/base/src/intl/intl-base.d.ts new file mode 100644 index 0000000..fdf0c88 --- /dev/null +++ b/components/base/src/intl/intl-base.d.ts @@ -0,0 +1,274 @@ +import { NumberFormatOptions, DateFormatOptions } from '../internationalization'; +import { FormatParts, CommonOptions } from './number-formatter'; +/** + * Interface for NumericSkeleton structure + */ +export interface NumericSkeleton { + type?: string; + isAccount?: boolean; + fractionDigits?: number; +} +/** + * Interface for GenericFormatOptions structure + */ +export interface GenericFormatOptions { + nData?: NegativeData; + pData?: NegativeData; + zeroData?: NegativeData; +} +/** + * Interface for GroupSize structure + */ +export interface GroupSize { + primary?: number; + secondary?: number; +} +/** + * Interface for NegativeData structure + * + * @private + */ +export interface NegativeData extends FormatParts { + nlead?: string; + nend?: string; + groupPattern?: string; + minimumFraction?: number; + maximumFraction?: number; +} +/** + * Interface for Dependables structure + */ +export interface Dependables { + parserObject?: Object; + dateObject?: Object; + numericObject?: Object; +} +/** + * Interface for TimeZoneOptions structure + */ +export interface TimeZoneOptions { + hourFormat?: string; + gmtFormat?: string; + gmtZeroFormat?: string; +} +/** + * Interface for DateObject structure + */ +export interface DateObject { + year?: number; + month?: number; + date?: number; +} +/** + * Interface defining the exported properties and methods in the IntlBase namespace. + */ +export interface IIntlBase { + negativeDataRegex?: RegExp; + customRegex?: RegExp; + latnParseRegex?: RegExp; + fractionRegex?: RegExp; + defaultCurrency?: string; + mapper?: string[]; + dateConverterMapper?: RegExp; + islamicRegex?: RegExp; + formatRegex?: RegExp; + currencyFormatRegex?: RegExp; + curWithoutNumberRegex?: RegExp; + dateParseRegex?: RegExp; + basicPatterns?: string[]; + defaultObject?: Object; + monthIndex?: Object; + month?: string; + days?: string; + patternMatcher?: { + [key: string]: string; + }; + /** + * Computes the resultant date pattern. + * + * @private + * @param skeleton - Pattern skeleton. + * @param dateObject - Date-related object mapping. + * @param type - Format type. + * @param isIslamic - Islamic mode flag. + * @returns {string} The resultant pattern. + */ + getResultantPattern?(skeleton: string, dateObject: Object, type: string, isIslamic?: boolean): string; + /** + * Retrieves dependables based on the CLDR data. + * + * @private + * @param cldr - CLDR object data. + * @param culture - Culture code. + * @param mode - Calendar mode. + * @param isNumber - Flag indicating number operations. + * @returns {Dependables} Dependable objects. + */ + getDependables?(cldr: Object, culture: string, mode: string, isNumber?: boolean): Dependables; + /** + * Fetches the symbol pattern for given parameters. + * + * @private + * @param type - Format type. + * @param numSystem - Number system. + * @param obj - Formatting object. + * @param isAccount - Account mode flag. + * @returns {string} Symbol pattern. + */ + getSymbolPattern?(type: string, numSystem: string, obj: Object, isAccount: boolean): string; + /** + * Determines the proper numeric skeleton. + * + * @private + * @param skeleton - Skeleton string. + * @returns {NumericSkeleton} Numeric skeleton details. + */ + getProperNumericSkeleton?(skeleton: string): NumericSkeleton; + /** + * Fetches format data for numbers. + * + * @private + * @param pattern - Number pattern. + * @param needFraction - Fraction requirement flag. + * @param cSymbol - Currency symbol. + * @param fractionOnly - Fraction data flag. + * @returns {NegativeData} Number format details. + */ + getFormatData?(pattern: string, needFraction: boolean, cSymbol: string, fractionOnly?: boolean): NegativeData; + /** + * Changes the currency symbol in a given string. + * + * @private + * @param val - The value containing the currency symbol. + * @param sym - The new currency symbol. + * @returns {string} The value with the currency symbol replaced. + */ + changeCurrencySymbol?(val: string, sym: string): string; + /** + * Retrieves the currency symbol based on the currency code. + * + * @private + * @param numericObject - The numeric object containing currency details. + * @param currencyCode - The currency code. + * @param altSymbol - Alternate symbol if applicable. + * @param ignoreCurrency - Flag to ignore currency in lookup. + * @returns {string} The currency symbol. + */ + getCurrencySymbol?(numericObject: Object, currencyCode: string, altSymbol?: string, ignoreCurrency?: boolean): string; + /** + * Returns custom number format options. + * + * @private + * @param format - The custom format string. + * @param dOptions - Common options for number formatting. + * @param obj - Dependable object. + * @returns {GenericFormatOptions} Custom number format options. + */ + customFormat?(format: string, dOptions: CommonOptions, obj: Dependables): GenericFormatOptions; + /** + * Defines custom number format details. + * + * @private + * @param format - Format string. + * @param dOptions - Common options. + * @param numObject - Numeric object. + * @returns {NegativeData} Custom number formats. + */ + customNumberFormat?(format: string, dOptions?: CommonOptions, numObject?: Object): NegativeData; + /** + * Determines if a format is currency or percent type. + * + * @private + * @param parts - The parts of the format string. + * @param actual - The actual identifier. + * @param symbol - The symbol used. + * @returns {NegativeData} Formatting options. + */ + isCurrencyPercent?(parts: string[], actual: string, symbol: string): NegativeData; + /** + * Retrieves date separator for a given date object. + * + * @private + * @param dateObj - The date configuration object. + * @returns {string} Date separator. + */ + getDateSeparator?(dateObj: Object): string; + /** + * Obtains the native date time format based on given options. + * + * @private + * @param culture - Cultural context. + * @param options - Date format settings. + * @param cldr - CLDR object. + * @param isExcelFormat - Flag for formatting in Excel. + * @returns {string} Compiled date time pattern. + */ + getActualDateTimeFormat?(culture: string, options: DateFormatOptions, cldr?: Object, isExcelFormat?: boolean): string; + /** + * Processes symbols within a format string. + * + * @private + * @param actual - Original pattern string. + * @param option - Formatting options. + * @returns {string} Processed pattern. + */ + processSymbol?(actual: string, option: CommonOptions): string; + /** + * Returns number format pattern for a culture. + * + * @private + * @param culture - Cultural context. + * @param options - Number format configurations. + * @param cldr - CLDR object. + * @param isExcel - Excel integration flag. + * @returns {string} Numeric pattern. + */ + getActualNumberFormat?(culture: string, options: NumberFormatOptions, cldr?: Object, isExcel?: boolean): string; + /** + * Constructs pattern for fraction digits. + * + * @private + * @param minDigits - Minimum digits required. + * @param maxDigits - Maximum available digits. + * @returns {string} Pattern string with fraction digits. + */ + fractionDigitsPattern?(pattern: string, minDigits: number, maxDigits?: number): string; + /** + * Constructs pattern for integer digits. + * + * @private + * @param pattern - Base pattern. + * @param digits - Integer digit enforcement count. + * @returns {string} The pattern with integer digits. + */ + minimumIntegerPattern?(pattern: string, digits: number): string; + /** + * Generates pattern to represent numeric grouping. + * + * @private + * @param pattern - Base numeric pattern. + * @returns {string} Group-patterned string. + */ + groupingPattern?(pattern: string): string; + /** + * Returns first day of the week for the given culture. + * + * @private + * @param culture - Cultural context. + * @param cldr - CLDR data. + * @returns {number} The index number of the first day. + */ + getWeekData?(culture: string, cldr?: Object): number; + /** + * Calculates the week number of the year for a given date. + * + * @private + * @param date - The date to calculate the week number for. + * @returns {number} The week number in the year. + */ + getWeekOfYear?(date: Date): number; +} +/** + * Collection of methods and constants related to internationalization, date and number formatting. + */ +export declare const IntlBase: IIntlBase; diff --git a/components/base/src/intl/intl-base.js b/components/base/src/intl/intl-base.js new file mode 100644 index 0000000..eee60f6 --- /dev/null +++ b/components/base/src/intl/intl-base.js @@ -0,0 +1,942 @@ +import { defaultCurrencyCode } from '../internationalization'; +import { getValue, isNullOrUndefined, extend } from '../util'; +import { ParserBase as parser } from './parser-base'; +import { DateFormat } from './date-formatter'; +import { NumberFormat } from './number-formatter'; +import { isUndefined } from '../util'; +/** + * Collection of methods and constants related to internationalization, date and number formatting. + */ +export const IntlBase = (() => { + const regExp = RegExp; + const props = { + // eslint-disable-next-line security/detect-unsafe-regex + negativeDataRegex: /^(('[^']+'|''|[^*#@0,.E])*)(\*.)?((([#,]*[0,]*0+)(\.0*[0-9]*#*)?)|([#,]*@+#*))(E\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/, + // eslint-disable-next-line security/detect-unsafe-regex + customRegex: /^(('[^']+'|''|[^*#@0,.])*)(\*.)?((([0#,]*[0,]*[0#]*[0# ]*)(\.[0#]*)?)|([#,]*@+#*))(E\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/, + latnParseRegex: /0|1|2|3|4|5|6|7|8|9/g, + defaultCurrency: '$', + dateConverterMapper: /dddd|ddd/ig, + islamicRegex: /^islamic/, + formatRegex: new regExp('(^[ncpae]{1})([0-1]?[0-9]|20)?$', 'i'), + currencyFormatRegex: new regExp('(^[ca]{1})([0-1]?[0-9]|20)?$', 'i'), + curWithoutNumberRegex: /(c|a)$/ig, + dateParseRegex: /([a-z])\1*|'([^']|'')+'|''|./gi, + basicPatterns: ['short', 'medium', 'long', 'full'] + }; + const fractionRegex = /[0-9]/g; + const mapper = ['infinity', 'nan', 'group', 'decimal']; + const patternRegex = /G|M|L|H|c|'| a|yy|y|EEEE|E/g; + const patternMatch = { + 'G': '', + 'M': 'm', + 'L': 'm', + 'H': 'h', + 'c': 'd', + '\'': '"', + ' a': ' AM/PM', + 'yy': 'yy', + 'y': 'yyyy', + 'EEEE': 'dddd', + 'E': 'ddd' + }; + const defaultFirstDay = 'sun'; + const firstDayMapper = { + 'sun': 0, + 'mon': 1, + 'tue': 2, + 'wed': 3, + 'thu': 4, + 'fri': 5, + 'sat': 6 + }; + const typeMapper = { + '$': 'isCurrency', + '%': 'isPercent', + '-': 'isNegative', + 0: 'nlead', + 1: 'nend' + }; + props.defaultObject = { + 'dates': { + 'calendars': { + 'gregorian': { + 'months': { + 'stand-alone': { + 'abbreviated': { + '1': 'Jan', + '2': 'Feb', + '3': 'Mar', + '4': 'Apr', + '5': 'May', + '6': 'Jun', + '7': 'Jul', + '8': 'Aug', + '9': 'Sep', + '10': 'Oct', + '11': 'Nov', + '12': 'Dec' + }, + 'narrow': { + '1': 'J', + '2': 'F', + '3': 'M', + '4': 'A', + '5': 'M', + '6': 'J', + '7': 'J', + '8': 'A', + '9': 'S', + '10': 'O', + '11': 'N', + '12': 'D' + }, + 'wide': { + '1': 'January', + '2': 'February', + '3': 'March', + '4': 'April', + '5': 'May', + '6': 'June', + '7': 'July', + '8': 'August', + '9': 'September', + '10': 'October', + '11': 'November', + '12': 'December' + } + } + }, + 'days': { + 'stand-alone': { + 'abbreviated': { + 'sun': 'Sun', + 'mon': 'Mon', + 'tue': 'Tue', + 'wed': 'Wed', + 'thu': 'Thu', + 'fri': 'Fri', + 'sat': 'Sat' + }, + 'narrow': { + 'sun': 'S', + 'mon': 'M', + 'tue': 'T', + 'wed': 'W', + 'thu': 'T', + 'fri': 'F', + 'sat': 'S' + }, + 'short': { + 'sun': 'Su', + 'mon': 'Mo', + 'tue': 'Tu', + 'wed': 'We', + 'thu': 'Th', + 'fri': 'Fr', + 'sat': 'Sa' + }, + 'wide': { + 'sun': 'Sunday', + 'mon': 'Monday', + 'tue': 'Tuesday', + 'wed': 'Wednesday', + 'thu': 'Thursday', + 'fri': 'Friday', + 'sat': 'Saturday' + } + } + }, + 'dayPeriods': { + 'format': { + 'wide': { + 'am': 'AM', + 'pm': 'PM' + } + } + }, + 'eras': { + 'eraNames': { + '0': 'Before Christ', + '0-alt-variant': 'Before Common Era', + '1': 'Anno Domini', + '1-alt-variant': 'Common Era' + }, + 'eraAbbr': { + '0': 'BC', + '0-alt-variant': 'BCE', + '1': 'AD', + '1-alt-variant': 'CE' + }, + 'eraNarrow': { + '0': 'B', + '0-alt-variant': 'BCE', + '1': 'A', + '1-alt-variant': 'CE' + } + }, + 'dateFormats': { + 'full': 'EEEE, MMMM d, y', + 'long': 'MMMM d, y', + 'medium': 'MMM d, y', + 'short': 'M/d/yy' + }, + 'timeFormats': { + 'full': 'h:mm:ss a zzzz', + 'long': 'h:mm:ss a z', + 'medium': 'h:mm:ss a', + 'short': 'h:mm a' + }, + 'dateTimeFormats': { + 'full': '{1} \'at\' {0}', + 'long': '{1} \'at\' {0}', + 'medium': '{1}, {0}', + 'short': '{1}, {0}', + 'availableFormats': { + 'd': 'd', + 'E': 'ccc', + 'Ed': 'd E', + 'Ehm': 'E h:mm a', + 'EHm': 'E HH:mm', + 'Ehms': 'E h:mm:ss a', + 'EHms': 'E HH:mm:ss', + 'Gy': 'y G', + 'GyMMM': 'MMM y G', + 'GyMMMd': 'MMM d, y G', + 'GyMMMEd': 'E, MMM d, y G', + 'h': 'h a', + 'H': 'HH', + 'hm': 'h:mm a', + 'Hm': 'HH:mm', + 'hms': 'h:mm:ss a', + 'Hms': 'HH:mm:ss', + 'hmsv': 'h:mm:ss a v', + 'Hmsv': 'HH:mm:ss v', + 'hmv': 'h:mm a v', + 'Hmv': 'HH:mm v', + 'M': 'L', + 'Md': 'M/d', + 'MEd': 'E, M/d', + 'MMM': 'LLL', + 'MMMd': 'MMM d', + 'MMMEd': 'E, MMM d', + 'MMMMd': 'MMMM d', + 'ms': 'mm:ss', + 'y': 'y', + 'yM': 'M/y', + 'yMd': 'M/d/y', + 'yMEd': 'E, M/d/y', + 'yMMM': 'MMM y', + 'yMMMd': 'MMM d, y', + 'yMMMEd': 'E, MMM d, y', + 'yMMMM': 'MMMM y' + } + } + }, + 'islamic': { + 'months': { + 'stand-alone': { + 'abbreviated': { + '1': 'Muh.', + '2': 'Saf.', + '3': 'Rab. I', + '4': 'Rab. II', + '5': 'Jum. I', + '6': 'Jum. II', + '7': 'Raj.', + '8': 'Sha.', + '9': 'Ram.', + '10': 'Shaw.', + '11': 'Dhuʻl-Q.', + '12': 'Dhuʻl-H.' + }, + 'narrow': { + '1': '1', + '2': '2', + '3': '3', + '4': '4', + '5': '5', + '6': '6', + '7': '7', + '8': '8', + '9': '9', + '10': '10', + '11': '11', + '12': '12' + }, + 'wide': { + '1': 'Muharram', + '2': 'Safar', + '3': 'Rabiʻ I', + '4': 'Rabiʻ II', + '5': 'Jumada I', + '6': 'Jumada II', + '7': 'Rajab', + '8': 'Shaʻban', + '9': 'Ramadan', + '10': 'Shawwal', + '11': 'Dhuʻl-Qiʻdah', + '12': 'Dhuʻl-Hijjah' + } + } + }, + 'days': { + 'stand-alone': { + 'abbreviated': { + 'sun': 'Sun', + 'mon': 'Mon', + 'tue': 'Tue', + 'wed': 'Wed', + 'thu': 'Thu', + 'fri': 'Fri', + 'sat': 'Sat' + }, + 'narrow': { + 'sun': 'S', + 'mon': 'M', + 'tue': 'T', + 'wed': 'W', + 'thu': 'T', + 'fri': 'F', + 'sat': 'S' + }, + 'short': { + 'sun': 'Su', + 'mon': 'Mo', + 'tue': 'Tu', + 'wed': 'We', + 'thu': 'Th', + 'fri': 'Fr', + 'sat': 'Sa' + }, + 'wide': { + 'sun': 'Sunday', + 'mon': 'Monday', + 'tue': 'Tuesday', + 'wed': 'Wednesday', + 'thu': 'Thursday', + 'fri': 'Friday', + 'sat': 'Saturday' + } + } + }, + 'dayPeriods': { + 'format': { + 'wide': { + 'am': 'AM', + 'pm': 'PM' + } + } + }, + 'eras': { + 'eraNames': { + '0': 'AH' + }, + 'eraAbbr': { + '0': 'AH' + }, + 'eraNarrow': { + '0': 'AH' + } + }, + 'dateFormats': { + 'full': 'EEEE, MMMM d, y G', + 'long': 'MMMM d, y G', + 'medium': 'MMM d, y G', + 'short': 'M/d/y GGGGG' + }, + 'timeFormats': { + 'full': 'h:mm:ss a zzzz', + 'long': 'h:mm:ss a z', + 'medium': 'h:mm:ss a', + 'short': 'h:mm a' + }, + 'dateTimeFormats': { + 'full': '{1} \'at\' {0}', + 'long': '{1} \'at\' {0}', + 'medium': '{1}, {0}', + 'short': '{1}, {0}', + 'availableFormats': { + 'd': 'd', + 'E': 'ccc', + 'Ed': 'd E', + 'Ehm': 'E h:mm a', + 'EHm': 'E HH:mm', + 'Ehms': 'E h:mm:ss a', + 'EHms': 'E HH:mm:ss', + 'Gy': 'y G', + 'GyMMM': 'MMM y G', + 'GyMMMd': 'MMM d, y G', + 'GyMMMEd': 'E, MMM d, y G', + 'h': 'h a', + 'H': 'HH', + 'hm': 'h:mm a', + 'Hm': 'HH:mm', + 'hms': 'h:mm:ss a', + 'Hms': 'HH:mm:ss', + 'M': 'L', + 'Md': 'M/d', + 'MEd': 'E, M/d', + 'MMM': 'LLL', + 'MMMd': 'MMM d', + 'MMMEd': 'E, MMM d', + 'MMMMd': 'MMMM d', + 'ms': 'mm:ss', + 'y': 'y G', + 'yyyy': 'y G', + 'yyyyM': 'M/y GGGGG', + 'yyyyMd': 'M/d/y GGGGG', + 'yyyyMEd': 'E, M/d/y GGGGG', + 'yyyyMMM': 'MMM y G', + 'yyyyMMMd': 'MMM d, y G', + 'yyyyMMMEd': 'E, MMM d, y G', + 'yyyyMMMM': 'MMMM y G', + 'yyyyQQQ': 'QQQ y G', + 'yyyyQQQQ': 'QQQQ y G' + } + } + } + }, + 'timeZoneNames': { + 'hourFormat': '+HH:mm;-HH:mm', + 'gmtFormat': 'GMT{0}', + 'gmtZeroFormat': 'GMT' + } + }, + 'numbers': { + 'currencies': { + 'USD': { + 'displayName': 'US Dollar', + 'symbol': '$', + 'symbol-alt-narrow': '$' + }, + 'EUR': { + 'displayName': 'Euro', + 'symbol': '€', + 'symbol-alt-narrow': '€' + }, + 'GBP': { + 'displayName': 'British Pound', + 'symbol-alt-narrow': '£' + } + }, + 'defaultNumberingSystem': 'latn', + 'minimumGroupingDigits': '1', + 'symbols-numberSystem-latn': { + 'decimal': '.', + 'group': ',', + 'list': ';', + 'percentSign': '%', + 'plusSign': '+', + 'minusSign': '-', + 'exponential': 'E', + 'superscriptingExponent': '×', + 'perMille': '‰', + 'infinity': '∞', + 'nan': 'NaN', + 'timeSeparator': ':' + }, + 'decimalFormats-numberSystem-latn': { + 'standard': '#,##0.###' + }, + 'percentFormats-numberSystem-latn': { + 'standard': '#,##0%' + }, + 'currencyFormats-numberSystem-latn': { + 'standard': '¤#,##0.00', + 'accounting': '¤#,##0.00;(¤#,##0.00)' + }, + 'scientificFormats-numberSystem-latn': { + 'standard': '#E0' + } + } + }; + props.monthIndex = { + 3: 'abbreviated', + 4: 'wide', + 5: 'narrow', + 1: 'abbreviated' + }; + props.month = 'months'; + props.days = 'days'; + props.patternMatcher = { + C: 'currency', + P: 'percent', + N: 'decimal', + A: 'currency', + E: 'scientific' + }; + /** + * Returns the resultant pattern based on the skeleton, dateObject, and the type provided. + * + * @param {string} skeleton ? + * @param {Object} dateObject ? + * @param {string} type ? + * @returns {string} Resultant pattern. + */ + props.getResultantPattern = (skeleton, dateObject, type) => { + let resPattern; + const iType = type || 'date'; + if (props.basicPatterns.indexOf(skeleton) !== -1) { + resPattern = getValue(iType + 'Formats.' + skeleton, dateObject); + if (iType === 'dateTime') { + const dPattern = getValue('dateFormats.' + skeleton, dateObject); + const tPattern = getValue('timeFormats.' + skeleton, dateObject); + resPattern = resPattern.replace('{1}', dPattern).replace('{0}', tPattern); + } + } + else { + resPattern = getValue('dateTimeFormats.availableFormats.' + skeleton, dateObject); + } + if (isUndefined(resPattern) && skeleton === 'yMd') { + resPattern = 'M/d/y'; + } + return resPattern; + }; + /** + * Returns the dependable object for provided cldr data and culture. + * + * @param {Object} cldr ? + * @param {string} culture ? + * @param {string} mode ? + * @param {boolean} isNumber ? + * @returns {Dependables} Dependable object. + */ + props.getDependables = (cldr, culture, mode, isNumber) => { + const ret = {}; + const calendartype = mode || 'gregorian'; + ret.parserObject = parser.getMainObject(cldr, culture) || (IntlBase.defaultObject); + if (isNumber) { + ret.numericObject = getValue('numbers', ret.parserObject); + } + else { + const dateString = ('dates.calendars.' + calendartype); + ret.dateObject = getValue(dateString, ret.parserObject); + } + return ret; + }; + /** + * Returns the symbol pattern for provided parameters. + * + * @param {string} type ? + * @param {string} numSystem ? + * @param {Object} obj ? + * @param {boolean} isAccount ? + * @returns {string} Symbol pattern. + */ + props.getSymbolPattern = (type, numSystem, obj, isAccount) => { + return getValue(type + 'Formats-numberSystem-' + numSystem + (isAccount ? '.accounting' : '.standard'), obj) || (isAccount ? getValue(type + 'Formats-numberSystem-' + numSystem + '.standard', obj) : ''); + }; + /** + * Returns the proper numeric skeleton. + * + * @param {string} skeleton ? + * @returns {NumericSkeleton} Numeric skeleton. + */ + props.getProperNumericSkeleton = (skeleton) => { + const matches = skeleton.match(props.formatRegex); + const ret = {}; + const pattern = matches ? matches[1].toUpperCase() : ''; + ret.isAccount = (pattern === 'A'); + ret.type = props.patternMatcher[`${pattern}`]; + if (matches && skeleton.length > 1 && matches[2]) { + ret.fractionDigits = parseInt(matches[2], 10); + } + return ret; + }; + /** + * Returns format data for number formatting. + * + * @param {string} pattern ? + * @param {boolean} needFraction ? + * @param {string} cSymbol ? + * @param {boolean} fractionOnly ? + * @returns {NegativeData} Format data. + */ + props.getFormatData = (pattern, needFraction, cSymbol, fractionOnly) => { + const nData = fractionOnly ? {} : { nlead: '', nend: '' }; + const match = pattern.match(props.customRegex); + if (match) { + if (!fractionOnly) { + nData.nlead = props.changeCurrencySymbol(match[1], cSymbol); + nData.nend = props.changeCurrencySymbol(match[10], cSymbol); + nData.groupPattern = match[4]; + } + const fraction = match[7]; + if (fraction && needFraction) { + const fmatch = fraction.match(fractionRegex); + nData.minimumFraction = fmatch ? fmatch.length : 0; + nData.maximumFraction = fraction.length - 1; + } + } + return nData; + }; + /** + * Changes currency symbol. + * + * @param {string} val ? + * @param {string} sym ? + * @returns {string} Changed symbol. + */ + props.changeCurrencySymbol = (val, sym) => { + if (val) { + val = val.replace(props.defaultCurrency, sym); + return (sym === '') ? val.trim() : val; + } + return ''; + }; + /** + * Returns currency symbol based on currency code. + * + * @param {Object} numericObject ? + * @param {string} currencyCode ? + * @param {string} altSymbol ? + * @param {string} ignoreCurrency ? + * @returns {string} Currency symbol. + */ + props.getCurrencySymbol = (numericObject, currencyCode, altSymbol, ignoreCurrency) => { + const symbol = altSymbol ? ('.' + altSymbol) : '.symbol'; + const getCurrency = ignoreCurrency ? '$' + : getValue('currencies.' + currencyCode + symbol, numericObject) + || getValue('currencies.' + currencyCode + '.symbol-alt-narrow', numericObject) + || '$'; + return getCurrency; + }; + /** + * Returns formatting options for custom number format. + * + * @param {string} format ? + * @param {CommonOptions} dOptions ? + * @param {Dependables} obj ? + * @returns {GenericFormatOptions} Custom format options. + */ + props.customFormat = (format, dOptions, obj) => { + const options = {}; + const formatSplit = format.split(';'); + const data = ['pData', 'nData', 'zeroData']; + for (let i = 0; i < formatSplit.length; i++) { + options[data[parseInt(i.toString(), 10)]] = props.customNumberFormat(formatSplit[parseInt(i.toString(), 10)], dOptions, obj); + } + if (isNullOrUndefined(options.nData)) { + options.nData = extend({}, options.pData); + options.nData.nlead = (dOptions?.minusSymbol || '-') + options.nData.nlead; + } + return options; + }; + /** + * Returns custom formatting options. + * + * @param {string} format ? + * @param {CommonOptions} dOptions ? + * @param {Object} numObject ? + * @returns {NegativeData} Custom number format. + */ + props.customNumberFormat = (format, dOptions, numObject) => { + const cOptions = { type: 'decimal', minimumFractionDigits: 0, maximumFractionDigits: 0 }; + const pattern = format.match(props.customRegex); + if (isNullOrUndefined(pattern) || (pattern[5] === '' && format !== 'N/A')) { + cOptions.type = undefined; + return cOptions; + } + cOptions.nlead = pattern[1]; + cOptions.nend = pattern[10]; + let integerPart = pattern[6]; + const spaceCapture = integerPart.match(/ $/g) ? true : false; + const spaceGrouping = integerPart.replace(/ $/g, '').indexOf(' ') !== -1; + cOptions.useGrouping = integerPart.indexOf(',') !== -1 || spaceGrouping; + integerPart = integerPart.replace(/,/g, ''); + const fractionPart = pattern[7]; + if (integerPart.indexOf('0') !== -1) { + cOptions.minimumIntegerDigits = integerPart.length - integerPart.indexOf('0'); + } + if (!isNullOrUndefined(fractionPart)) { + cOptions.minimumFractionDigits = fractionPart.lastIndexOf('0'); + cOptions.maximumFractionDigits = fractionPart.lastIndexOf('#'); + if (cOptions.minimumFractionDigits === -1) { + cOptions.minimumFractionDigits = 0; + } + if (cOptions.maximumFractionDigits === -1 || cOptions.maximumFractionDigits < cOptions.minimumFractionDigits) { + cOptions.maximumFractionDigits = cOptions.minimumFractionDigits; + } + } + if (!isNullOrUndefined(dOptions)) { + dOptions.isCustomFormat = true; + extend(cOptions, props.isCurrencyPercent([cOptions.nlead, cOptions.nend], '$', dOptions.currencySymbol)); + if (!cOptions.isCurrency) { + extend(cOptions, props.isCurrencyPercent([cOptions.nlead, cOptions.nend], '%', dOptions.percentSymbol)); + } + } + else { + extend(cOptions, props.isCurrencyPercent([cOptions.nlead, cOptions.nend], '%', '%')); + } + if (!isNullOrUndefined(numObject)) { + const symbolPattern = props.getSymbolPattern(cOptions.type, dOptions.numberMapper.numberSystem, numObject, false); + if (cOptions.useGrouping) { + cOptions.groupSeparator = spaceGrouping ? ' ' : dOptions.numberMapper.numberSymbols[mapper[2]]; + cOptions.groupData = NumberFormat.getGroupingDetails(symbolPattern.split(';')[0]); + } + cOptions.nlead = cOptions.nlead.replace(/'/g, ''); + cOptions.nend = spaceCapture ? ' ' + cOptions.nend.replace(/'/g, '') : cOptions.nend.replace(/'/g, ''); + } + return cOptions; + }; + /** + * Evaluates if formatting applies to currency or percent type. + * + * @param {string[]} parts ? + * @param {string} actual ? + * @param {string} symbol ? + * @returns {NegativeData} Information on currency or percent formatting. + */ + props.isCurrencyPercent = (parts, actual, symbol) => { + const options = { nlead: parts[0], nend: parts[1] }; + for (let i = 0; i < 2; i++) { + const part = parts[parseInt(i.toString(), 10)]; + const loc = part.indexOf(actual); + if ((loc !== -1) && ((loc < part.indexOf('\'')) || (loc > part.lastIndexOf('\'')))) { + options[typeMapper[parseInt(i.toString(), 10)]] = part.substr(0, loc) + symbol + part.substr(loc + 1); + options[typeMapper[`${actual}`]] = true; + options.type = options.isCurrency ? 'currency' : 'percent'; + break; + } + } + return options; + }; + /** + * Returns culture-based date separator. + * + * @param {Object} dateObj ? + * @returns {string} Date separator. + */ + props.getDateSeparator = (dateObj) => { + const value = (getValue('dateFormats.short', dateObj) || '').match(/[dM]([^dM])[dM]/i); + return value ? value[1] : '/'; + }; + /** + * Returns native date time pattern. + * + * @param {string} culture ? + * @param {DateFormatOptions} options ? + * @param {Object} cldr ? + * @param {boolean} isExcelFormat ? + * @returns {string} Actual date time pattern. + */ + props.getActualDateTimeFormat = (culture, options, cldr, isExcelFormat) => { + const dependable = props.getDependables(cldr, culture, options.calendar); + let actualPattern = options.format || props.getResultantPattern(options.skeleton, dependable.dateObject, options.type); + if (isExcelFormat) { + actualPattern = actualPattern.replace(patternRegex, (pattern) => { + return patternMatch[`${pattern}`]; + }); + if (actualPattern.indexOf('z') !== -1) { + const tLength = actualPattern.match(/z/g).length || 0; + let timeZonePattern; + const formatOptions = { timeZone: {} }; + formatOptions.numMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr)); + formatOptions.timeZone = getValue('dates.timeZoneNames', dependable.parserObject); + const value = new Date(); + const timezone = value.getTimezoneOffset(); + let pattern = (tLength < 4) ? '+H;-H' : formatOptions.timeZone.hourFormat; + pattern = pattern.replace(/:/g, formatOptions.numMapper.timeSeparator); + if (timezone === 0) { + timeZonePattern = formatOptions.timeZone.gmtZeroFormat; + } + else { + timeZonePattern = DateFormat.getTimeZoneValue(timezone, pattern); + timeZonePattern = formatOptions.timeZone.gmtFormat.replace(/\{0\}/, timeZonePattern); + } + actualPattern = actualPattern.replace(/[z]+/, '"' + timeZonePattern + '"'); + } + actualPattern = actualPattern.replace(/ $/, ''); + } + return actualPattern; + }; + /** + * Processes symbols in format. + * + * @param {string} actual ? + * @param {CommonOptions} option ? + * @returns {string} Processed symbols. + */ + props.processSymbol = (actual, option) => { + if (actual.indexOf(',') !== -1) { + const split = actual.split(','); + actual = (split[0] + getValue('numberMapper.numberSymbols.group', option) + + split[1].replace('.', getValue('numberMapper.numberSymbols.decimal', option))); + } + else { + actual = actual.replace('.', getValue('numberMapper.numberSymbols.decimal', option)); + } + return actual; + }; + /** + * Returns native number pattern. + * + * @param {string} culture ? + * @param {NumberFormatOptions} options ? + * @param {Object} cldr ? + * @param {boolean} isExcel ? + * @returns {string} Actual number format. + */ + props.getActualNumberFormat = (culture, options, cldr, isExcel) => { + const dependable = props.getDependables(cldr, culture, '', true); + const parseOptions = { custom: true }; + let minFrac; + const curObj = {}; + const curMatch = (options.format)?.match(props.currencyFormatRegex); + const dOptions = {}; + if (curMatch) { + dOptions.numberMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr), true); + const curCode = props.getCurrencySymbol(dependable.numericObject, options.currency || defaultCurrencyCode, options.altSymbol); + let symbolPattern = props.getSymbolPattern('currency', dOptions.numberMapper.numberSystem, dependable.numericObject, (/a/i).test(options.format)); + symbolPattern = symbolPattern.replace(/\u00A4/g, curCode); + const split = symbolPattern.split(';'); + curObj.hasNegativePattern = (split.length > 1); + curObj.nData = props.getFormatData(split[1] || '-' + split[0], true, curCode); + curObj.pData = props.getFormatData(split[0], false, curCode); + if (!curMatch[2] && !options.minimumFractionDigits && !options.maximumFractionDigits) { + minFrac = props.getFormatData(symbolPattern.split(';')[0], true, '', true).minimumFraction; + } + } + let actualPattern; + if ((props.formatRegex.test(options.format)) || !(options.format)) { + extend(parseOptions, props.getProperNumericSkeleton(options.format || 'N')); + parseOptions.custom = false; + actualPattern = '###0'; + if (parseOptions.fractionDigits || options.minimumFractionDigits || options.maximumFractionDigits || minFrac) { + const defaultMinimum = 0; + if (parseOptions.fractionDigits) { + options.minimumFractionDigits = options.maximumFractionDigits = parseOptions.fractionDigits; + } + actualPattern = props.fractionDigitsPattern(actualPattern, minFrac || parseOptions.fractionDigits || + options.minimumFractionDigits || defaultMinimum, options.maximumFractionDigits || defaultMinimum); + } + if (options.minimumIntegerDigits) { + actualPattern = props.minimumIntegerPattern(actualPattern, options.minimumIntegerDigits); + } + if (options.useGrouping) { + actualPattern = props.groupingPattern(actualPattern); + } + if (parseOptions.type === 'currency') { + const cPattern = actualPattern; + actualPattern = curObj.pData.nlead + cPattern + curObj.pData.nend; + if (curObj.hasNegativePattern) { + actualPattern += ';' + curObj.nData.nlead + cPattern + curObj.nData.nend; + } + } + if (parseOptions.type === 'percent') { + actualPattern += ' %'; + } + } + else { + actualPattern = options.format.replace(/'/g, '"'); + } + if (Object.keys(dOptions).length > 0) { + actualPattern = !isExcel ? props.processSymbol(actualPattern, dOptions) : actualPattern; + } + return actualPattern; + }; + /** + * Constructs the pattern for fraction digits. + * + * @param {string} pattern ? + * @param {number} minDigits ? + * @param {number} maxDigits ? + * @returns {string} Pattern with fraction digits. + */ + props.fractionDigitsPattern = (pattern, minDigits, maxDigits) => { + pattern += '.'; + for (let i = 0; i < minDigits; i++) { + pattern += '0'; + } + if (minDigits < maxDigits) { + const diff = maxDigits - minDigits; + for (let j = 0; j < diff; j++) { + pattern += '#'; + } + } + return pattern; + }; + /** + * Constructs the pattern for minimum integer digits. + * + * @param {string} pattern ? + * @param {number} digits ? + * @returns {string} Pattern with minimum integer digits. + */ + props.minimumIntegerPattern = (pattern, digits) => { + const parts = pattern.split('.'); + let integer = ''; + for (let i = 0; i < digits; i++) { + integer += '0'; + } + return parts[1] ? (integer + '.' + parts[1]) : integer; + }; + /** + * Constructs the pattern for grouping. + * + * @param {string} pattern ? + * @returns {string} Grouped pattern. + */ + props.groupingPattern = (pattern) => { + const parts = pattern.split('.'); + let integerPart = parts[0]; + const no = 3 - integerPart.length % 3; + const hash = (no && no === 1) ? '#' : (no === 2 ? '##' : ''); + integerPart = hash + integerPart; + pattern = ''; + for (let i = integerPart.length - 1; i > 0; i -= 3) { + pattern = ',' + integerPart[i - 2] + integerPart[i - 1] + integerPart[parseInt(i.toString(), 10)] + pattern; + } + pattern = pattern.slice(1); + return parts[1] ? (pattern + '.' + parts[1]) : pattern; + }; + /** + * Returns week data based on culture. + * + * @param {string} culture ? + * @param {Object} cldr ? + * @returns {number} Week data. + */ + props.getWeekData = (culture, cldr) => { + let firstDay = defaultFirstDay; + const mapper = getValue('supplemental.weekData.firstDay', cldr); + let iCulture = culture; + if ((/en-/).test(iCulture)) { + iCulture = iCulture.slice(3); + } + iCulture = iCulture.slice(0, 2).toUpperCase() + iCulture.substr(2); + if (mapper) { + firstDay = mapper[`${iCulture}`] || mapper[iCulture.slice(0, 2)] || defaultFirstDay; + } + return firstDayMapper[`${firstDay}`]; + }; + /** + * Gets the week number of the year. + * + * @param {Date} date ? + * @returns {number} Week number. + */ + props.getWeekOfYear = (date) => { + const newYear = new Date(date.getFullYear(), 0, 1); + let day = newYear.getDay(); + let weeknum; + day = (day >= 0 ? day : day + 7); + const daynum = Math.floor((date.getTime() - newYear.getTime() - + (date.getTimezoneOffset() - newYear.getTimezoneOffset()) * 60000) / 86400000) + 1; + if (day < 4) { + weeknum = Math.floor((daynum + day - 1) / 7) + 1; + if (weeknum > 52) { + const nYear = new Date(date.getFullYear() + 1, 0, 1); + let nday = nYear.getDay(); + nday = nday >= 0 ? nday : nday + 7; + weeknum = nday < 4 ? 1 : 53; + } + } + else { + weeknum = Math.floor((daynum + day - 1) / 7); + } + return weeknum; + }; + return props; +})(); diff --git a/components/base/src/intl/number-formatter.d.ts b/components/base/src/intl/number-formatter.d.ts new file mode 100644 index 0000000..254f32f --- /dev/null +++ b/components/base/src/intl/number-formatter.d.ts @@ -0,0 +1,68 @@ +import { NumberFormatOptions } from '../internationalization'; +import { NumericSkeleton } from './intl-base'; +import { NumberMapper } from './parser-base'; +/** + * Interface for default formatting options. + * + * @private + */ +export interface FormatParts extends NumericSkeleton, NumberFormatOptions { + groupOne?: boolean; + isPercent?: boolean; + isCurrency?: boolean; + isNegative?: boolean; + groupData?: GroupDetails; + groupSeparator?: string; +} +/** + * Interface for common formatting options. + */ +export interface CommonOptions { + numberMapper?: NumberMapper; + currencySymbol?: string; + percentSymbol?: string; + minusSymbol?: string; + isCustomFormat?: boolean; +} +/** + * Interface for currency processing. + */ +export interface CurrencyOptions { + position?: string; + symbol?: string; + currencySpace?: boolean; +} +/** + * Interface for grouping process. + */ +export interface GroupDetails { + primary?: number; + secondary?: number; +} +/** + * Interface for public and protected properties/methods of NumberFormatObject. + */ +export interface INumberFormat { + /** + * Returns the formatter function for given skeleton. + * + * @private + * @param {string} culture - Specifies the culture name to be used for formatting. + * @param {NumberFormatOptions} option - Specifies the format in which number will be formatted. + * @param {Object} cldr - Specifies the global cldr data collection. + * @returns {Function} + */ + numberFormatter: (culture: string, option: NumberFormatOptions, cldr: Object) => Function; + /** + * Returns grouping details for the pattern provided. + * + * @private + * @param {string} pattern + * @returns {GroupDetails} + */ + getGroupingDetails: (pattern: string) => GroupDetails; +} +/** + * Custom object structure for NumberFormat with all methods and properties. + */ +export declare const NumberFormat: INumberFormat; diff --git a/components/base/src/intl/number-formatter.js b/components/base/src/intl/number-formatter.js new file mode 100644 index 0000000..b9f8822 --- /dev/null +++ b/components/base/src/intl/number-formatter.js @@ -0,0 +1,375 @@ +import { isUndefined, throwError, isNullOrUndefined, extend } from '../util'; +import { defaultCurrencyCode } from '../internationalization'; +import { IntlBase as base } from './intl-base'; +import { ParserBase as parser } from './parser-base'; +/** + * Error text mappings for significant and fraction digits. + */ +const errorText = { + 'ms': 'minimumSignificantDigits', + 'ls': 'maximumSignificantDigits', + 'mf': 'minimumFractionDigits', + 'lf': 'maximumFractionDigits' +}; +/** + * Percent sign constant. + */ +const percentSign = 'percentSign'; +/** + * Minus sign constant. + */ +const minusSign = 'minusSign'; +/** + * Mapper array for numeric symbols. + */ +const mapper = ['infinity', 'nan', 'group', 'decimal', 'exponential']; +/** + * Custom object structure for NumberFormat with all methods and properties. + */ +export const NumberFormat = (() => { + /** + * Returns the formatter function for given skeleton. + * + * @param {string} culture - Specifies the culture name to be used for formatting. + * @param {NumberFormatOptions} option - Specifies the format in which number will be formatted. + * @param {Object} cldr - Specifies the global cldr data collection. + * @returns {Function} Returns the formatter function for the given number format options. + */ + function numberFormatter(culture, option, cldr) { + const fOptions = extend({}, option); + let cOptions = {}; + const dOptions = {}; + let symbolPattern; + const dependable = base.getDependables(cldr, culture, '', true); + dOptions.numberMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr), true); + dOptions.currencySymbol = base.getCurrencySymbol(dependable.numericObject, fOptions.currency || defaultCurrencyCode, option.altSymbol, option.ignoreCurrency); + dOptions.percentSymbol = (dOptions).numberMapper.numberSymbols[`${percentSign}`]; + dOptions.minusSymbol = (dOptions).numberMapper.numberSymbols[`${minusSign}`]; + const symbols = dOptions.numberMapper.numberSymbols; + if (option.format && !base.formatRegex.test(option.format)) { + cOptions = base.customFormat(option.format, dOptions, dependable.numericObject); + if (!isUndefined(fOptions.useGrouping) && fOptions.useGrouping) { + fOptions.useGrouping = cOptions.pData.useGrouping; + } + } + else { + extend(fOptions, base.getProperNumericSkeleton(option.format || 'N')); + fOptions.isCurrency = fOptions.type === 'currency'; + fOptions.isPercent = fOptions.type === 'percent'; + symbolPattern = base.getSymbolPattern(fOptions.type, dOptions.numberMapper.numberSystem, dependable.numericObject, fOptions.isAccount); + fOptions.groupOne = checkValueRange(fOptions.maximumSignificantDigits, fOptions.minimumSignificantDigits, true); + checkValueRange(fOptions.maximumFractionDigits, fOptions.minimumFractionDigits, false, true); + if (!isUndefined(fOptions.fractionDigits)) { + fOptions.minimumFractionDigits = fOptions.maximumFractionDigits = fOptions.fractionDigits; + } + if (isUndefined(fOptions.useGrouping)) { + fOptions.useGrouping = true; + } + if (fOptions.isCurrency) { + symbolPattern = symbolPattern.replace(/\u00A4/g, base.defaultCurrency); + } + const split = symbolPattern.split(';'); + cOptions.nData = base.getFormatData(split[1] || '-' + split[0], true, dOptions.currencySymbol); + cOptions.pData = base.getFormatData(split[0], false, dOptions.currencySymbol); + if (fOptions.useGrouping) { + fOptions.groupSeparator = symbols[mapper[2]]; + fOptions.groupData = getGroupingDetails(split[0]); + } + const minFrac = isUndefined(fOptions.minimumFractionDigits); + if (minFrac) { + fOptions.minimumFractionDigits = cOptions.nData.minimumFraction; + } + if (isUndefined(fOptions.maximumFractionDigits)) { + const mval = cOptions.nData.maximumFraction; + fOptions.maximumFractionDigits = isUndefined(mval) && fOptions.isPercent ? 0 : mval; + } + const mfrac = fOptions.minimumFractionDigits; + const lfrac = fOptions.maximumFractionDigits; + if (!isUndefined(mfrac) && !isUndefined(lfrac)) { + if (mfrac > lfrac) { + fOptions.maximumFractionDigits = mfrac; + } + } + } + extend(cOptions.nData, fOptions); + extend(cOptions.pData, fOptions); + return (value) => { + if (isNaN(value)) { + return symbols[mapper[1]]; + } + else if (!isFinite(value)) { + return symbols[mapper[0]]; + } + return intNumberFormatter(value, cOptions, dOptions, option); + }; + } + /** + * Returns grouping details for the pattern provided. + * + * @param {string} pattern ? + * @returns {GroupDetails} Returns an object containing primary and secondary grouping details + */ + function getGroupingDetails(pattern) { + const ret = {}; + const match = pattern.match(base.negativeDataRegex); + if (match && match[4]) { + const pattern = match[4]; + const p = pattern.lastIndexOf(','); + if (p !== -1) { + const temp = pattern.split('.')[0]; + ret.primary = (temp.length - p) - 1; + const s = pattern.lastIndexOf(',', p - 1); + if (s !== -1) { + ret.secondary = p - 1 - s; + } + } + } + return ret; + } + /** + * Checks if the provided integer range is valid. + * + * @param {number} val1 ? + * @param {number} val2 ? + * @param {boolean} checkbothExist ? + * @param {boolean} isFraction ? + * @returns {boolean} ? + */ + function checkValueRange(val1, val2, checkbothExist, isFraction) { + const decide = isFraction ? 'f' : 's'; + let dint = 0; + const str1 = (errorText)['l' + decide]; + const str2 = (errorText)['m' + decide]; + if (!isUndefined(val1)) { + checkRange(val1, str1, isFraction); + dint++; + } + if (!isUndefined(val2)) { + checkRange(val2, str2, isFraction); + dint++; + } + if (dint === 2) { + if (val1 < val2) { + throwError(str2 + 'specified must be less than the' + str1); + } + else { + return true; + } + } + else if (checkbothExist && dint === 1) { + throwError('Both' + str2 + 'and' + str2 + 'must be present'); + } + return false; + } + /** + * Validates if a value is within a specified range. + * + * @param {number} val ? + * @param {string} text ? + * @param {boolean} isFraction ? + * @returns {void} + */ + function checkRange(val, text, isFraction) { + const range = isFraction ? [0, 20] : [1, 21]; + if (val < range[0] || val > range[1]) { + throwError(text + 'value must be within the range' + range[0] + 'to' + range[1]); + } + } + /** + * Formats numeric strings based on options. + * + * @param {number} value ? + * @param {GenericFormatOptions} fOptions ? + * @param {CommonOptions} dOptions ? + * @param {NumberFormatOptions} [option] ? + * @returns {string} ? + */ + function intNumberFormatter(value, fOptions, dOptions, option) { + let curData; + if (isUndefined(fOptions.nData.type)) { + return null; + } + else { + if (value < 0) { + value = value * -1; + curData = fOptions.nData; + } + else if (value === 0) { + curData = fOptions.zeroData || fOptions.pData; + } + else { + curData = fOptions.pData; + } + let fValue = ''; + if (curData.isPercent) { + value = value * 100; + } + if (curData.groupOne) { + fValue = processSignificantDigits(value, curData.minimumSignificantDigits, curData.maximumSignificantDigits); + } + else { + fValue = processFraction(value, curData.minimumFractionDigits, curData.maximumFractionDigits, option); + if (curData.minimumIntegerDigits) { + fValue = processMinimumIntegers(fValue, curData.minimumIntegerDigits); + } + if (dOptions.isCustomFormat && curData.minimumFractionDigits < curData.maximumFractionDigits + && /\d+\.\d+/.test(fValue)) { + const temp = fValue.split('.'); + let decimalPart = temp[1]; + const len = decimalPart.length; + for (let i = len - 1; i >= 0; i--) { + if (decimalPart[parseInt(i.toString(), 10)] === '0' && i >= curData.minimumFractionDigits) { + decimalPart = decimalPart.slice(0, i); + } + else { + break; + } + } + fValue = temp[0] + '.' + decimalPart; + } + } + if (curData.type === 'scientific') { + fValue = value.toExponential(curData.maximumFractionDigits); + fValue = fValue.replace('e', dOptions.numberMapper.numberSymbols[mapper[4]]); + } + fValue = fValue.replace('.', (dOptions).numberMapper.numberSymbols[mapper[3]]); + fValue = curData.format === '#,###,,;(#,###,,)' ? customPivotFormat(parseInt(fValue, 10)) : fValue; + if (curData.useGrouping) { + fValue = groupNumbers(fValue, curData.groupData.primary, curData.groupSeparator || ',', (dOptions).numberMapper.numberSymbols[mapper[3]] || '.', curData.groupData.secondary); + } + fValue = parser.convertValueParts(fValue, base.latnParseRegex, dOptions.numberMapper.mapper); + if (curData.nlead === 'N/A') { + return curData.nlead; + } + else { + if (fValue === '0' && option && option.format === '0') { + return fValue + curData.nend; + } + return curData.nlead + fValue + curData.nend; + } + } + } + /** + * Processes significant digits for a value. + * + * @param {number} value ? + * @param {number} min ? + * @param {number} max ? + * @returns {string} ? + */ + function processSignificantDigits(value, min, max) { + let temp = value + ''; + let tn; + const length = temp.length; + if (length < min) { + return value.toPrecision(min); + } + else { + temp = value.toPrecision(max); + tn = +temp; + return tn + ''; + } + } + /** + * Groups numeric strings based on separator and levels. + * + * @param {string} val ? + * @param {number} level1 ? + * @param {string} sep ? + * @param {string} decimalSymbol ? + * @param {number} level2 ? + * @returns {string} ? + */ + function groupNumbers(val, level1, sep, decimalSymbol, level2) { + let flag = !isNullOrUndefined(level2) && level2 !== 0; + const split = val.split(decimalSymbol); + const prefix = split[0]; + let length = prefix.length; + let str = ''; + while (length > level1) { + str = prefix.slice(length - level1, length) + (str.length ? + (sep + str) : ''); + length -= level1; + if (flag) { + level1 = level2; + flag = false; + } + } + split[0] = prefix.slice(0, length) + (str.length ? sep : '') + str; + return split.join(decimalSymbol); + } + /** + * Processes the fraction part of the numeric value. + * + * @param {number} value ? + * @param {number} min ? + * @param {number} max ? + * @param {NumberFormatOptions} [option] ? + * @returns {string} ? + */ + function processFraction(value, min, max, option) { + const temp = (value + '').split('.')[1]; + const length = temp ? temp.length : 0; + if (min && length < min) { + let ret = ''; + if (length === 0) { + ret = value.toFixed(min); + } + else { + ret += value; + for (let j = 0; j < min - length; j++) { + ret += '0'; + } + return ret; + } + return value.toFixed(min); + } + else if (!isNullOrUndefined(max) && (length > max || max === 0)) { + return value.toFixed(max); + } + let str = value + ''; + if (str[0] === '0' && option && option.format === '###.00') { + str = str.slice(1); + } + return str; + } + /** + * Processes integer part ensuring minimum digit count. + * + * @param {string} value ? + * @param {number} min ? + * @returns {string} ? + */ + function processMinimumIntegers(value, min) { + const temp = value.split('.'); + let lead = temp[0]; + const len = lead.length; + if (len < min) { + for (let i = 0; i < min - len; i++) { + lead = '0' + lead; + } + temp[0] = lead; + } + return temp.join('.'); + } + /** + * Formats for pivot tables specifically. + * + * @param {number} value ? + * @returns {string} ? + */ + function customPivotFormat(value) { + if (value >= 500000) { + value /= 1000000; + const decimal = value.toString().split('.')[1]; + return decimal && +decimal.substring(0, 1) >= 5 + ? Math.ceil(value).toString() + : Math.floor(value).toString(); + } + return ''; + } + return { + getGroupingDetails, + numberFormatter + }; +})(); diff --git a/components/base/src/intl/number-parser.d.ts b/components/base/src/intl/number-parser.d.ts new file mode 100644 index 0000000..b73e298 --- /dev/null +++ b/components/base/src/intl/number-parser.d.ts @@ -0,0 +1,33 @@ +import { NumberFormatOptions } from '../internationalization'; +import { NegativeData } from './intl-base'; +/** + * Interface for Numeric Formatting Parts + */ +export interface NumericParts { + symbolRegex?: RegExp; + nData?: NegativeData; + pData?: NegativeData; + infinity?: string; + type?: string; + fractionDigits?: number; + isAccount?: boolean; + custom?: boolean; + maximumFractionDigits?: number; +} +/** + * Interface for numeric parse options + */ +export interface NumberParseOptions { + parseRegex: string; + numbericMatcher: Object; +} +/** + * Interface defining the properties and methods of the useNumberParser hook. + */ +export interface INumberParser { + numberParser: (culture: string, option: NumberFormatOptions, cldr: Object) => (value: string) => number; +} +/** + * Custom function to parse numbers according to specified format and culture. + */ +export declare const NumberParser: INumberParser; diff --git a/components/base/src/intl/number-parser.js b/components/base/src/intl/number-parser.js new file mode 100644 index 0000000..3109b76 --- /dev/null +++ b/components/base/src/intl/number-parser.js @@ -0,0 +1,127 @@ +import { extend, isNullOrUndefined } from '../util'; +import { ParserBase as parser } from './parser-base'; +import { IntlBase as base } from './intl-base'; +const regExp = RegExp; +const parseRegex = new regExp('^([^0-9]*)' + '(([0-9,]*[0-9]+)(.[0-9]+)?)' + '([Ee][+-]?[0-9]+)?([^0-9]*)$'); +const groupRegex = /,/g; +const keys = ['minusSign', 'infinity']; +/** + * Custom function to parse numbers according to specified format and culture. + */ +export const NumberParser = (() => { + /** + * Parses a number string based on the given options and CLDR data. + * + * @param {string} culture - Specifies the culture name to be used for formatting. + * @param {NumberFormatOptions} option - Specifies the format options. + * @param {Object} cldr - Specifies the global CLDR data collection. + * @returns {Function} - Returns a function to parse the given string to a number. + */ + function numberParser(culture, option, cldr) { + const dependable = base.getDependables(cldr, culture, '', true); + const parseOptions = { custom: true }; + if ((base.formatRegex.test(option.format)) || !(option.format)) { + extend(parseOptions, base.getProperNumericSkeleton(option.format || 'N')); + parseOptions.custom = false; + if (!parseOptions.fractionDigits) { + if (option.maximumFractionDigits) { + parseOptions.maximumFractionDigits = option.maximumFractionDigits; + } + } + } + else { + extend(parseOptions, base.customFormat(option.format, null, null)); + } + const numOptions = parser.getCurrentNumericOptions(dependable.parserObject, parser.getNumberingSystem(cldr), true); + parseOptions.symbolRegex = parser.getSymbolRegex(Object.keys(numOptions.symbolMatch)); + parseOptions.infinity = (numOptions).symbolNumberSystem[keys[1]]; + let symbolpattern; + symbolpattern = base.getSymbolPattern(parseOptions.type, numOptions.numberSystem, dependable.numericObject, parseOptions.isAccount); + if (symbolpattern) { + symbolpattern = symbolpattern.replace(/\u00A4/g, base.defaultCurrency); + const split = symbolpattern.split(';'); + parseOptions.nData = base.getFormatData(split[1] || '-' + split[0], true, ''); + parseOptions.pData = base.getFormatData(split[0], true, ''); + } + return (value) => { + return getParsedNumber(value, parseOptions, numOptions); + }; + } + /** + * Returns parsed number for the provided formatting options. + * + * @param {string} value - The string value to be converted to number. + * @param {NumericParts} options - The numeric parts required for parsing. + * @param {NumericOptions} numOptions - Options for numeric conversion. + * @returns {number} - The parsed numeric value. + */ + function getParsedNumber(value, options, numOptions) { + let isNegative; + let isPercent; + let tempValue; + let lead; + let end; + let ret; + if (value.indexOf(options.infinity) !== -1) { + return Infinity; + } + else { + value = parser.convertValueParts(value, options.symbolRegex, numOptions.symbolMatch); + value = parser.convertValueParts(value, numOptions.numberParseRegex, numOptions.numericPair); + value = value.indexOf('-') !== -1 ? value.replace('-.', '-0.') : value; + if (value.indexOf('.') === 0) { + value = '0' + value; + } + const matches = value.match(parseRegex); + if (isNullOrUndefined(matches)) { + return NaN; + } + lead = matches[1]; + tempValue = matches[2]; + const exponent = matches[5]; + end = matches[6]; + isNegative = options.custom ? (lead === options.nData.nlead && end === options.nData.nend) : + (lead.indexOf(options.nData.nlead) !== -1 && end.indexOf(options.nData.nend) !== -1); + isPercent = isNegative ? options.nData.isPercent : options.pData.isPercent; + tempValue = tempValue.replace(groupRegex, ''); + if (exponent) { + tempValue += exponent; + } + ret = +tempValue; + if (options.type === 'percent' || isPercent) { + ret = ret / 100; + } + if (options.custom || options.fractionDigits) { + ret = parseFloat(ret.toFixed(options.custom ? + (isNegative ? options.nData.maximumFractionDigits : options.pData.maximumFractionDigits) : options.fractionDigits)); + } + if (options.maximumFractionDigits) { + ret = convertMaxFracDigits(tempValue, options, ret, isNegative); + } + if (isNegative) { + ret *= -1; + } + return ret; + } + } + /** + * Adjusts the number according to the maximum fraction digits allowed. + * + * @param {string} value - The string value of the number before parsing. + * @param {NumericParts} options - Parsing options with numeric parts. + * @param {number} ret - The current numeric value. + * @param {boolean} isNegative - Flag if the number is negative. + * @returns {number} - The processed number with appropriate fraction digits. + */ + function convertMaxFracDigits(value, options, ret, isNegative) { + const decimalSplitValue = value.split('.'); + if (decimalSplitValue[1] && decimalSplitValue[1].length > options.maximumFractionDigits) { + ret = +(ret.toFixed(options.custom ? + (isNegative ? options.nData.maximumFractionDigits : options.pData.maximumFractionDigits) : options.maximumFractionDigits)); + } + return ret; + } + return { + numberParser + }; +})(); diff --git a/components/base/src/intl/parser-base.d.ts b/components/base/src/intl/parser-base.d.ts new file mode 100644 index 0000000..9a477e1 --- /dev/null +++ b/components/base/src/intl/parser-base.d.ts @@ -0,0 +1,111 @@ +/** + * Interface for numeric Options. + */ +export interface NumericOptions { + numericPair?: Object; + numericRegex?: string; + numberParseRegex?: RegExp; + symbolNumberSystem?: Object; + symbolMatch?: Object; + numberSystem?: string; +} +/** + * Interface for numeric object holding numbers system data. + */ +export interface NumericObject { + obj?: Object; + nSystem?: string; +} +/** + * Interface for number mapper holding mapping of symbols and digits. + */ +export interface NumberMapper { + mapper?: Object; + timeSeparator?: string; + numberSymbols?: Object; + numberSystem?: string; +} +/** + * Interface for the public and protected properties and methods in useParserBase custom object. + */ +export interface IParserBase { + nPair?: string; + nRegex?: string; + numberingSystems?: Object; + /** + * Returns the cldr object for the culture specified. + * + * @private + * @param {Object} obj - Specifies the object from which culture object to be acquired. + * @param {string} cName - Specifies the culture name. + * @returns {Object} + */ + getMainObject?(obj: Object, cName: string): Object; + /** + * Returns the numbering system object from given cldr data. + * + * @private + * @param {Object} obj - Specifies the object from which number system is acquired. + * @returns {Object} + */ + getNumberingSystem?(obj: Object): Object; + /** + * Returns the reverse of given object keys or keys specified. + * + * @private + * @param {Object} prop - Specifies the object to be reversed. + * @param {number[]} [keys] - Optional parameter specifies the custom keyList for reversal. + * @returns {Object} + */ + reverseObject?(prop: Object, keys?: number[]): Object; + /** + * Returns the symbol regex by skipping the escape sequence. + * + * @private + * @param {string[]} props - Specifies the array values to be skipped. + * @returns {RegExp} + */ + getSymbolRegex?(props: string[]): RegExp; + /** + * Returns default numbering system object for formatting from cldr data. + * + * @private + * @param {Object} obj + * @returns {NumericObject} + */ + getDefaultNumberingSystem?(obj: Object): NumericObject; + /** + * Returns the replaced value of matching regex and obj mapper. + * + * @private + * @param {string} value - Specifies the values to be replaced. + * @param {RegExp} regex - Specifies the regex to search. + * @param {Object} obj - Specifies the object matcher to be replace value parts. + * @returns {string} + */ + convertValueParts?(value: string, regex: RegExp, obj: Object): string; + /** + * Returns the replaced value of matching regex and obj mapper. + * + * @private + * @param {Object} curObj + * @param {Object} numberSystem + * @param {boolean} [needSymbols] + * @returns {NumericOptions} + */ + getCurrentNumericOptions?(curObj: Object, numberSystem: Object, needSymbols?: boolean): NumericOptions; + /** + * Returns number mapper object for the provided cldr data. + * + * @private + * @param {Object} curObj + * @param {Object} numberSystem + * @param {boolean} [isNumber] + * @returns {NumberMapper} + */ + getNumberMapper?(curObj: Object, numberSystem: Object, isNumber?: boolean): NumberMapper; +} +/** + * Class for handling the Parser Base functionalities. + */ +export declare const ParserBase: IParserBase; diff --git a/components/base/src/intl/parser-base.js b/components/base/src/intl/parser-base.js new file mode 100644 index 0000000..e72949d --- /dev/null +++ b/components/base/src/intl/parser-base.js @@ -0,0 +1,195 @@ +import { isUndefined, getValue } from '../util'; +/** + * Default numbering system for Latin script. + */ +const defaultNumberingSystem = { + 'latn': { + '_digits': '0123456789', + '_type': 'numeric' + } +}; +/** + * Default symbols used in numbers representation. + */ +const defaultNumberSymbols = { + 'decimal': '.', + 'group': ',', + 'percentSign': '%', + 'plusSign': '+', + 'minusSign': '-', + 'infinity': '∞', + 'nan': 'NaN', + 'exponential': 'E' +}; +/** + * Latin number system representation as array. + */ +const latnNumberSystem = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; +/** + * Class for handling the Parser Base functionalities. + */ +export const ParserBase = (() => { + const props = { + nPair: 'numericPair', + nRegex: 'numericRegex', + numberingSystems: defaultNumberingSystem + }; + /** + * Returns the cldr object for the culture specified. + * + * @param {Object} obj - Specifies the object from which culture object to be acquired. + * @param {string} cName - Specifies the culture name. + * @returns {Object} ? + */ + props.getMainObject = (obj, cName) => { + const value = 'main.' + cName; + return getValue(value, obj); + }; + /** + * Returns the numbering system object from given cldr data. + * + * @param {Object} obj - Specifies the object from which number system is acquired. + * @returns {Object} ? + */ + props.getNumberingSystem = (obj) => { + return getValue('supplemental.numberingSystems', obj) || props.numberingSystems; + }; + /** + * Returns the reverse of given object keys or keys specified. + * + * @param {Object} prop - Specifies the object to be reversed. + * @param {number[]} [keys] - Optional parameter specifies the custom keyList for reversal. + * @returns {Object} ? + */ + props.reverseObject = (prop, keys) => { + const propKeys = keys || Object.keys(prop); + const res = {}; + for (const key of propKeys) { + if (!Object.prototype.hasOwnProperty.call(res, (prop)[`${key}`])) { + (res)[(prop)[`${key}`]] = key; + } + } + return res; + }; + /** + * Returns the symbol regex by skipping the escape sequence. + * + * @param {string[]} props - Specifies the array values to be skipped. + * @returns {RegExp} ? + */ + props.getSymbolRegex = (props) => { + const regexStr = props.map((str) => { + return str.replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'); + }).join('|'); + const regExp = RegExp; + return new regExp(regexStr, 'g'); + }; + /** + * Returns default numbering system object for formatting from cldr data. + * + * @param {Object} obj ? + * @returns {NumericObject} ? + */ + function getDefaultNumberingSystem(obj) { + const ret = {}; + ret.obj = getValue('numbers', obj); + ret.nSystem = getValue('defaultNumberingSystem', ret.obj); + return ret; + } + /** + * Returns the replaced value of matching regex and obj mapper. + * + * @param {string} value - Specifies the values to be replaced. + * @param {RegExp} regex - Specifies the regex to search. + * @param {Object} obj - Specifies the object matcher to be replace value parts. + * @returns {string} ? + */ + props.convertValueParts = (value, regex, obj) => { + return value.replace(regex, (str) => { + return (obj)[`${str}`]; + }); + }; + /** + * Returns the replaced value of matching regex and obj mapper. + * + * @param {Object} curObj ? + * @param {Object} numberSystem ? + * @param {boolean} [needSymbols] ? + * @returns {NumericOptions} ? + */ + props.getCurrentNumericOptions = (curObj, numberSystem, needSymbols) => { + const ret = {}; + const cur = getDefaultNumberingSystem(curObj); + if (!isUndefined(cur.nSystem)) { + const digits = getValue(cur.nSystem + '._digits', numberSystem); + if (!isUndefined(digits)) { + ret.numericPair = props.reverseObject(digits, latnNumberSystem); + const regExp = RegExp; + ret.numberParseRegex = new regExp(constructRegex(digits), 'g'); + ret.numericRegex = '[' + digits[0] + '-' + digits[9] + ']'; + if (needSymbols) { + ret.numericRegex = digits[0] + '-' + digits[9]; + ret.symbolNumberSystem = getValue('symbols-numberSystem-' + cur.nSystem, cur.obj); + ret.symbolMatch = getSymbolMatch(ret.symbolNumberSystem); + ret.numberSystem = cur.nSystem; + } + } + } + return ret; + }; + /** + * Returns number mapper object for the provided cldr data. + * + * @param {Object} curObj ? + * @param {Object} numberSystem ? + * @returns {NumberMapper} ? + */ + props.getNumberMapper = (curObj, numberSystem) => { + const ret = { mapper: {} }; + const cur = getDefaultNumberingSystem(curObj); + if (!isUndefined(cur.nSystem)) { + ret.numberSystem = cur.nSystem; + ret.numberSymbols = getValue('symbols-numberSystem-' + cur.nSystem, cur.obj); + ret.timeSeparator = getValue('timeSeparator', ret.numberSymbols); + const digits = getValue(cur.nSystem + '._digits', numberSystem); + if (!isUndefined(digits)) { + for (const i of latnNumberSystem) { + ret.mapper[parseInt(i.toString(), 10)] = digits[parseInt(i.toString(), 10)]; + } + } + } + return ret; + }; + /** + * Returns the symbol match for the provided object. + * + * @param {Object} prop ? + * @returns {Object} ? + */ + function getSymbolMatch(prop) { + const matchKeys = Object.keys(defaultNumberSymbols); + const ret = {}; + for (const key of matchKeys) { + (ret)[(prop)[`${key}`]] = (defaultNumberSymbols)[`${key}`]; + } + return ret; + } + /** + * Constructs a regex string for the provided value. + * + * @param {string} val ? + * @returns {string} ? + */ + function constructRegex(val) { + const len = val.length; + let ret = ''; + for (let i = 0; i < len; i++) { + ret += val[parseInt(i.toString(), 10)]; + if (i !== len - 1) { + ret += '|'; + } + } + return ret; + } + return props; +})(); diff --git a/components/base/src/l10n.d.ts b/components/base/src/l10n.d.ts new file mode 100644 index 0000000..f3dcdc1 --- /dev/null +++ b/components/base/src/l10n.d.ts @@ -0,0 +1,32 @@ +/** + * L10n modules provides localized text for different culture. + */ +export interface IL10n { + /** + * Sets the locale text. + * + * @param {string} locale + * @returns {void} + */ + setLocale(locale: string): void; + /** + * Returns current locale text for the property based on the culture name and control name. + * + * @param {string} prop - Specifies the property for which localize text to be returned. + * @returns {string} + */ + getConstant(prop: string): string; +} +/** + * L10n modules provides localized text for different culture. + * + * @param {string} controlName - name of the control. + * @param {object} localeStrings - collection of locale string. + * @param {string} locale - default locale string. + * @returns {L10n} - Returns configured properties and methods for localization. + */ +export declare function L10n(controlName: string, localeStrings: Object, locale?: string): IL10n; +export declare namespace L10n { + var locale: object; + var load: (localeObject: Object) => void; +} diff --git a/components/base/src/l10n.js b/components/base/src/l10n.js new file mode 100644 index 0000000..55782a8 --- /dev/null +++ b/components/base/src/l10n.js @@ -0,0 +1,65 @@ +import { extend, isNullOrUndefined } from './util'; +import { defaultCulture } from './internationalization'; +/** + * L10n modules provides localized text for different culture. + * + * @param {string} controlName - name of the control. + * @param {object} localeStrings - collection of locale string. + * @param {string} locale - default locale string. + * @returns {L10n} - Returns configured properties and methods for localization. + */ +export function L10n(controlName, localeStrings, locale) { + let currentLocale = {}; + /** + * Sets the locale text. + * + * @param {string} locale - Specifies the locale to be set. + * @returns {void} + */ + function setLocale(locale) { + const intLocale = intGetControlConstant(L10n.locale, locale); + currentLocale = intLocale || localeStrings; + } + /** + * Returns current locale text for the property based on the culture name and control name. + * + * @param {string} prop - Specifies the property for which localized text to be returned. + * @returns {string} ? + */ + function getConstant(prop) { + if (!isNullOrUndefined(currentLocale[`${prop}`])) { + return currentLocale[`${prop}`]; + } + else { + return localeStrings[`${prop}`] || ''; + } + } + /** + * Returns the control constant object for current object and the locale specified. + * + * @param {Object} curObject ? + * @param {string} locale ? + * @returns {Object} ? + */ + function intGetControlConstant(curObject, locale) { + if (curObject[`${locale}`]) { + return curObject[`${locale}`][`${controlName}`]; + } + return null; + } + setLocale(locale || defaultCulture); + return { + setLocale, + getConstant + }; +} +L10n.locale = {}; +/** + * Sets the global locale for all components. + * + * @param {Object} localeObject - Specifies the localeObject to be set as global locale. + * @returns {void} + */ +L10n.load = (localeObject) => { + L10n.locale = extend(L10n.locale, localeObject, {}, true); +}; diff --git a/components/base/src/observer.d.ts b/components/base/src/observer.d.ts new file mode 100644 index 0000000..3210bcb --- /dev/null +++ b/components/base/src/observer.d.ts @@ -0,0 +1,26 @@ +/** + * Interface for the bound options used in the observer. + */ +export interface BoundOptions { + handler?: Function; + context?: Object; + event?: string; + id?: string; +} +export interface IObserver { + isJson: (value: string) => boolean; + ranArray: string[]; + boundedEvents: { + [key: string]: BoundOptions[]; + }; + on: (property: string, handler: Function, context?: object, id?: string) => void; + off: (property: string, handler?: Function, id?: string) => void; + notify: (property: string, argument?: Object, successHandler?: Function, errorHandler?: Function) => void | Object; + destroy: () => void; +} +/** + * Observer is used to perform event handling based the object. + * + * @returns {IObserver} Returns an Observer instance for event handling + */ +export declare const Observer: any; diff --git a/components/base/src/observer.js b/components/base/src/observer.js new file mode 100644 index 0000000..da17d19 --- /dev/null +++ b/components/base/src/observer.js @@ -0,0 +1,167 @@ +import { isNullOrUndefined, getValue } from './util'; +/** + * Observer is used to perform event handling based the object. + * + * @returns {IObserver} Returns an Observer instance for event handling + */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export const Observer = () => { + let ranArray = []; + const boundedEvents = {}; + /** + * Attach handler for given property in current context. + * + * @param {string} property - specifies the name of the event. + * @param {Function} handler - Specifies the handler function to be called while event notified. + * @param {Object} context - Specifies the context binded to the handler. + * @param {string} id - specifies the random generated id. + * @returns {void} + */ + function on(property, handler, context, id) { + if (isNullOrUndefined(handler)) { + return; + } + const cntxt = context || {}; + if (notExist(property)) { + boundedEvents[`${property}`] = [{ handler, context: cntxt, id }]; + } + else if (id && !ranArray.includes(id)) { + ranArray.push(id); + boundedEvents[`${property}`].push({ handler, context: cntxt, id }); + } + else if (!boundedEvents[`${property}`].some((event) => event.handler === handler)) { + boundedEvents[`${property}`].push({ handler, context: cntxt }); + } + } + /** + * To remove handlers from a event attached using on() function. + * + * @param {string} property - specifies the name of the event. + * @param {Function} handler - Optional argument specifies the handler function to be called while event notified. + * @param {string} id - specifies the random generated id. + * @returns {void} + */ + function off(property, handler, id) { + if (notExist(property)) { + return; + } + const curObject = getValue(property, boundedEvents); + if (handler) { + for (let i = 0; i < curObject.length; i++) { + const currentEvent = curObject[parseInt(i.toString(), 10)]; + if (id && currentEvent.id === id) { + curObject.splice(i, 1); + ranArray = ranArray.filter((item) => item !== id); + break; + } + else if (handler === currentEvent.handler) { + curObject.splice(i, 1); + break; + } + } + } + else { + delete boundedEvents[`${property}`]; + } + } + /** + * To notify the handlers in the specified event. + * + * @param {string} property - Specifies the event to be notify. + * @param {Object} argument - Additional parameters to pass while calling the handler. + * @param {Function} successHandler - this function will invoke after event successfully triggered + * @param {Function} errorHandler - this function will invoke after event if it was failure to call. + * @returns {void} ? + */ + function notify(property, argument, successHandler, errorHandler) { + if (notExist(property)) { + if (successHandler) { + successHandler(argument); + } + return; + } + if (argument) { + argument = { ...argument, name: property }; + } + const curObject = getValue(property, boundedEvents).slice(0); + for (const cur of curObject) { + try { + cur.handler(argument); + } + catch (error) { + if (errorHandler) { + errorHandler(error); + } + } + } + if (successHandler) { + successHandler(argument); + } + } + /** + * Checks if a string value is valid JSON. + * + * @param {string} value - The string to check if it's valid JSON + * @returns {boolean} Returns true if the string is valid JSON, false otherwise + */ + function isJson(value) { + try { + JSON.parse(value); + } + catch (e) { + return false; + } + return true; + } + /** + * To destroy handlers in the event + * + * @returns {void} ? + */ + function destroy() { + Object.keys(boundedEvents).forEach((key) => { + delete boundedEvents[`${key}`]; + }); + ranArray = []; + } + /** + * To remove internationalization events + * + * @returns {void} ? + */ + function offIntlEvents() { + const eventsArr = boundedEvents['notifyExternalChange']; + if (eventsArr) { + for (let i = 0; i < eventsArr.length; i++) { + const curEvent = eventsArr[parseInt(i.toString(), 10)]; + const curContext = curEvent.context; + if (curContext && curContext['detectFunction'] && curContext['randomId'] && curContext['isReactMock']) { + off('notifyExternalChange', curEvent.handler, curContext['randomId']); + i--; + } + } + if (!boundedEvents['notifyExternalChange'].length) { + delete boundedEvents['notifyExternalChange']; + } + } + } + /** + * Returns if the property exists. + * + * @param {string} prop ? + * @returns {boolean} ? + */ + function notExist(prop) { + return !boundedEvents[`${prop}`] || boundedEvents[`${prop}`].length === 0; + } + return { + isJson, + on, + off, + notify, + destroy, + ranArray, + boundedEvents, + offIntlEvents + }; +}; diff --git a/components/base/src/provider.d.ts b/components/base/src/provider.d.ts new file mode 100644 index 0000000..1a4e850 --- /dev/null +++ b/components/base/src/provider.d.ts @@ -0,0 +1,42 @@ +import { ReactNode } from 'react'; +interface ProviderContextProps { + locale: string; + dir: string; + ripple: boolean; +} +/** + * Props for the Provider context. + */ +export interface ProviderProps { + /** + * Child components that will be wrapped by the Provider. + */ + children: ReactNode; + /** + * Overrides the global culture and localization settings for the component. + * + * @default 'en-US' + */ + locale?: string; + /** + * Specifies the component’s rendering direction, with ltr for left-to-right and rtl for right-to-left direction. + * + * @default 'ltr' + */ + dir?: string; + /** + * Enable or disable the ripple effect for supported components. + * + * @default false + */ + ripple?: boolean; +} +export declare const Provider: React.FC; +/** + * Custom hook to consume locale context. + * + * @private + * @returns {ProviderContextProps} - The locale context value. + */ +export declare function useProviderContext(): ProviderContextProps; +export {}; diff --git a/components/base/src/provider.js b/components/base/src/provider.js new file mode 100644 index 0000000..2d99d61 --- /dev/null +++ b/components/base/src/provider.js @@ -0,0 +1,18 @@ +import { jsx as _jsx } from "react/jsx-runtime"; +import { createContext, useContext } from 'react'; +// Create context with default empty fallback +const ProviderContext = createContext({ locale: 'en-US', dir: 'ltr', ripple: false }); +// The Locale provider component +export const Provider = (props) => { + const { children, locale = 'en-US', dir = 'ltr', ripple = false } = props; + return (_jsx(ProviderContext.Provider, { value: { locale, dir, ripple }, children: children })); +}; +/** + * Custom hook to consume locale context. + * + * @private + * @returns {ProviderContextProps} - The locale context value. + */ +export function useProviderContext() { + return useContext(ProviderContext); +} diff --git a/components/base/src/ripple.d.ts b/components/base/src/ripple.d.ts new file mode 100644 index 0000000..13b3c79 --- /dev/null +++ b/components/base/src/ripple.d.ts @@ -0,0 +1,96 @@ +/** + * Configuration options for the ripple effect behavior. + */ +export interface RippleOptions { + /** + * The duration of the ripple animation in milliseconds. + * + * @default 350 + */ + duration?: number; + /** + * Whether the ripple should start from the center of the element instead of the click position. + * + * @default false + */ + isCenterRipple?: boolean; + /** + * CSS selector for elements that should not trigger a ripple effect when clicked. + * + * @default null + */ + ignore?: string | null; + /** + * CSS selector to identify which parent element should receive the ripple when a child is clicked. + * + * @default null + */ + selector?: string | null; +} +/** + * Interface for the ripple effect handlers and component. + */ +export interface RippleEffect { + /** + * Handler for the mouse down event to start the ripple effect. + * + * @param {MouseEvent} e - The mouse down event. + */ + rippleMouseDown: (e: React.MouseEvent) => void; + /** + * React component that renders the actual ripple elements. + */ + Ripple: React.FC; +} +/** + * Props for an individual ripple item. + * + * @private + */ +interface RippleProps { + /** + * The x-coordinate position of the ripple relative to its container. + */ + x: number; + /** + * The y-coordinate position of the ripple relative to its container. + */ + y: number; + /** + * The size of the ripple, either in pixels or percentage. + */ + size: string; + /** + * The duration of the ripple animation in milliseconds. + */ + duration: number; + /** + * Whether the ripple is centered within its container. + */ + isCenterRipple: boolean; + /** + * Callback function triggered when the animation is complete. + */ + onAnimationComplete: () => void; +} +/** + * Interface representing the data structure RippleContainerRef. + * + * @private + */ +interface RippleContainerRef { + createRipple: (x: number, y: number, size: number, duration: number, isCenterRipple: boolean) => void; +} +export declare const RippleElement: React.FC; +export declare const RippleContainer: React.ForwardRefExoticComponent<{ + maxRipples?: number; +} & React.RefAttributes>; +/** + * useRippleEffect function provides wave effect when an element is clicked. + * + * @param {boolean} isEnabled - Whether the ripple effect is enabled. + * @param {RippleOptions} options - Optional configuration for the ripple effect. + * @returns {RippleEffect} - Ripple effect controller object. + */ +export declare function useRippleEffect(isEnabled: boolean, options?: RippleOptions): RippleEffect; +export {}; diff --git a/components/base/src/ripple.js b/components/base/src/ripple.js new file mode 100644 index 0000000..48c26ff --- /dev/null +++ b/components/base/src/ripple.js @@ -0,0 +1,151 @@ +import { jsx as _jsx } from "react/jsx-runtime"; +import { useRef, useState, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react'; +// Individual ripple component +export const RippleElement = ({ x, y, size, duration, onAnimationComplete }) => { + const rippleRef = useRef(null); + useEffect(() => { + const ripple = rippleRef.current; + if (!ripple) { + return undefined; + } + void ripple.offsetWidth; + ripple.style.transform = 'scale(1)'; + const fadeTimer = setTimeout(() => { + if (ripple) { + ripple.style.opacity = '0'; + } + }, duration / 2); + const cleanupTimer = setTimeout(() => { + if (ripple) { + ripple.style.opacity = '0'; + ripple.style.visibility = 'hidden'; + } + if (onAnimationComplete) { + onAnimationComplete(); + } + }, duration); + return () => { + clearTimeout(fadeTimer); + clearTimeout(cleanupTimer); + }; + }, [duration, onAnimationComplete]); + return (_jsx("div", { ref: rippleRef, className: "sf-ripple-element", style: { + width: `${size}px`, + height: `${size}px`, + left: `${Number(x) - Number(size) / 2}px`, + top: `${Number(y) - Number(size) / 2}px`, + borderRadius: '50%', + backgroundColor: 'currentColor', + opacity: '0.2', + transition: `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`, + visibility: 'visible' + } })); +}; +export const RippleContainer = forwardRef((props, ref) => { + const { maxRipples = 2 } = props; + const containerRef = useRef(null); + const [ripples, setRipples] = useState([]); + const nextIdRef = useRef(0); + const createRipple = useCallback((x, y, size, duration, isCenterRipple) => { + const id = nextIdRef.current++; + setRipples((prevRipples) => { + if (prevRipples.length >= maxRipples) { + return [ + ...prevRipples.slice(prevRipples.length - maxRipples + 1), + { id, x, y, size, duration, isCenterRipple } + ]; + } + return [ + ...prevRipples, + { id, x, y, size, duration, isCenterRipple } + ]; + }); + }, [maxRipples]); + const removeRipple = useCallback((id) => { + setRipples((prevRipples) => prevRipples.filter((r) => r.id !== id)); + }, []); + useImperativeHandle(ref, () => ({ + createRipple + })); + return (_jsx("span", { ref: containerRef, className: "sf-ripple-wrapper", children: ripples.map((ripple) => (_jsx(RippleElement, { x: ripple.x, y: ripple.y, size: String(ripple.size), duration: ripple.duration, isCenterRipple: ripple.isCenterRipple, onAnimationComplete: () => removeRipple(ripple.id) }, ripple.id))) })); +}); +const closestParent = (element, selector) => { + if (!selector) { + return null; + } + let el = element; + while (el) { + if (el.matches && el.matches(selector)) { + return el; + } + el = el.parentElement; + if (!el) { + break; + } + } + return null; +}; +/** + * useRippleEffect function provides wave effect when an element is clicked. + * + * @param {boolean} isEnabled - Whether the ripple effect is enabled. + * @param {RippleOptions} options - Optional configuration for the ripple effect. + * @returns {RippleEffect} - Ripple effect controller object. + */ +export function useRippleEffect(isEnabled, options) { + const rippleRef = useRef(null); + const defaultOptions = { + duration: 350, + isCenterRipple: false, + ignore: null, + selector: null, + ...options + }; + const maxRipples = 2; + const ignoreRipple = useCallback((target) => { + if (!isEnabled || closestParent(target, defaultOptions.ignore || '')) { + return true; + } + return false; + }, [isEnabled, defaultOptions.ignore]); + const createRipple = useCallback((e) => { + if (!isEnabled || !rippleRef.current) { + return; + } + let target = e.currentTarget; + if (defaultOptions.selector) { + const matchedTarget = closestParent(target, defaultOptions.selector); + if (!matchedTarget) { + return; + } + target = matchedTarget; + } + if (ignoreRipple(target)) { + return; + } + const rect = target.getBoundingClientRect(); + const offsetX = e.pageX - window.pageXOffset; + const offsetY = e.pageY - window.pageYOffset; + let rippleX; + let rippleY; + let rippleSize; + if (defaultOptions.isCenterRipple) { + rippleX = rect.width / 2; + rippleY = rect.height / 2; + rippleSize = Math.max(rect.width, rect.height); + } + else { + rippleX = offsetX - rect.left; + rippleY = offsetY - rect.top; + const sizeX = Math.max(Math.abs(rect.width - rippleX), rippleX) * 2; + const sizeY = Math.max(Math.abs(rect.height - rippleY), rippleY) * 2; + rippleSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY); + } + rippleRef.current.createRipple(rippleX, rippleY, rippleSize, defaultOptions.duration || 350, defaultOptions.isCenterRipple || false); + }, [isEnabled, defaultOptions, ignoreRipple]); + const Ripple = useCallback(() => (_jsx(RippleContainer, { ref: rippleRef, maxRipples: maxRipples })), []); + return { + rippleMouseDown: createRipple, + Ripple + }; +} diff --git a/components/base/src/sanitize-helper.d.ts b/components/base/src/sanitize-helper.d.ts new file mode 100644 index 0000000..f38965b --- /dev/null +++ b/components/base/src/sanitize-helper.d.ts @@ -0,0 +1,51 @@ +/** + * Interface for the request to sanitize HTML. + */ +interface BeforeSanitizeHtml { + /** Illustrates whether the current action needs to be prevented or not. */ + cancel?: boolean; + /** It is a callback function and executed it before our inbuilt action. It should return HTML as a string. + * + * @function + * @param {string} value - Returns the value. + * @returns {string} + */ + /** Returns the selectors object which carrying both tags and attributes selectors to block list of cross-site scripting attack. + * Also possible to modify the block list in this event. + */ + selectors?: SanitizeSelectors; +} +interface SanitizeSelectors { + /** Returns the tags. */ + tags?: string[]; + /** Returns the attributes. */ + attributes?: SanitizeRemoveAttrs[]; +} +interface SanitizeRemoveAttrs { + /** Defines the attribute name to sanitize */ + attribute?: string; + /** Defines the selector that sanitize the specified attributes within the selector */ + selector?: string; +} +interface ISanitize { + /** Array of attributes to remove during sanitization */ + removeAttrs: SanitizeRemoveAttrs[]; + /** Array of HTML tags to remove during sanitization */ + removeTags: string[]; + /** Element to wrap the sanitized content */ + wrapElement: Element; + /** Callback function executed before sanitization begins */ + beforeSanitize: () => BeforeSanitizeHtml; + /** Custom sanitization function */ + sanitize: (value: string) => string; + /** Function to serialize the sanitized value */ + serializeValue: (item: BeforeSanitizeHtml, value: string) => string; +} +/** + * Custom hook for sanitizing HTML. + * + * @private + * @returns An object with methods for sanitizing strings and working with HTML sanitation. + */ +export declare const SanitizeHtmlHelper: ISanitize; +export {}; diff --git a/components/base/src/sanitize-helper.js b/components/base/src/sanitize-helper.js new file mode 100644 index 0000000..33c9941 --- /dev/null +++ b/components/base/src/sanitize-helper.js @@ -0,0 +1,240 @@ +import { detach } from './dom'; +import { isNullOrUndefined } from './util'; +const removeTags = [ + 'script', + 'style', + 'iframe[src]', + 'link[href*="javascript:"]', + 'object[type="text/x-scriptlet"]', + 'object[data^="data:text/html;base64"]', + 'img[src^="data:text/html;base64"]', + '[src^="javascript:"]', + '[dynsrc^="javascript:"]', + '[lowsrc^="javascript:"]', + '[type^="application/x-shockwave-flash"]' +]; +const removeAttrs = [ + { attribute: 'href', selector: '[href*="javascript:"]' }, + { attribute: 'href', selector: 'a[href]' }, + { attribute: 'background', selector: '[background^="javascript:"]' }, + { attribute: 'style', selector: '[style*="javascript:"]' }, + { attribute: 'style', selector: '[style*="expression("]' }, + { attribute: 'href', selector: 'a[href^="data:text/html;base64"]' } +]; +const jsEvents = ['onchange', + 'onclick', + 'onmouseover', + 'onmouseout', + 'onkeydown', + 'onload', + 'onerror', + 'onblur', + 'onfocus', + 'onbeforeload', + 'onbeforeunload', + 'onkeyup', + 'onsubmit', + 'onafterprint', + 'onbeforeonload', + 'onbeforeprint', + 'oncanplay', + 'oncanplaythrough', + 'oncontextmenu', + 'ondblclick', + 'ondrag', + 'ondragend', + 'ondragenter', + 'ondragleave', + 'ondragover', + 'ondragstart', + 'ondrop', + 'ondurationchange', + 'onemptied', + 'onended', + 'onformchange', + 'onforminput', + 'onhaschange', + 'oninput', + 'oninvalid', + 'onkeypress', + 'onloadeddata', + 'onloadedmetadata', + 'onloadstart', + 'onmessage', + 'onmousedown', + 'onmousemove', + 'onmouseup', + 'onmousewheel', + 'onoffline', + 'onoine', + 'ononline', + 'onpagehide', + 'onpageshow', + 'onpause', + 'onplay', + 'onplaying', + 'onpopstate', + 'onprogress', + 'onratechange', + 'onreadystatechange', + 'onredo', + 'onresize', + 'onscroll', + 'onseeked', + 'onseeking', + 'onselect', + 'onstalled', + 'onstorage', + 'onsuspend', + 'ontimeupdate', + 'onundo', + 'onunload', + 'onvolumechange', + 'onwaiting', + 'onmouseenter', + 'onmouseleave', + 'onstart', + 'onpropertychange', + 'oncopy', + 'ontoggle', + 'onpointerout', + 'onpointermove', + 'onpointerleave', + 'onpointerenter', + 'onpointerrawupdate', + 'onpointerover', + 'onbeforecopy', + 'onbeforecut', + 'onbeforeinput' +]; +/** + * Custom hook for sanitizing HTML. + * + * @private + * @returns An object with methods for sanitizing strings and working with HTML sanitation. + */ +export const SanitizeHtmlHelper = (() => { + const props = { + removeAttrs: [], + removeTags: [], + wrapElement: null, + beforeSanitize: null, + sanitize: null, + serializeValue: null + }; + /** + * Configures settings before sanitizing HTML. + * + * @returns {BeforeSanitizeHtml} An object containing selectors. + */ + props.beforeSanitize = () => ({ + selectors: { + tags: removeTags, + attributes: removeAttrs + } + }); + /** + * Sanitizes the provided HTML string. + * + * @param {string} value - The HTML string to be sanitized. + * @returns {string} The sanitized HTML string. + */ + props.sanitize = (value) => { + if (isNullOrUndefined(value)) { + return value; + } + const item = props.beforeSanitize(); + return props.serializeValue(item, value); + }; + /** + * Serializes and sanitizes the given HTML value based on the provided item configuration. + * + * @param {BeforeSanitizeHtml} item - The item configuration for sanitization. + * @param {string} value - The HTML string to be serialized and sanitized. + * @returns {string} The sanitized HTML string. + */ + props.serializeValue = (item, value) => { + props.removeAttrs = item.selectors.attributes; + props.removeTags = item.selectors.tags; + props.wrapElement = document.createElement('div'); + props.wrapElement.innerHTML = value; + removeXssTags(); + removeJsEvents(); + removeXssAttrs(); + const sanitizedValue = props.wrapElement.innerHTML; + removeElement(); + props.wrapElement = null; + return sanitizedValue.replace(/&/g, '&'); + }; + /** + * Removes potentially harmful element attributes. + * + * @returns {void} + */ + function removeElement() { + if (props.wrapElement) { + // Removes an element's attibute to avoid html tag validation + const nodes = props.wrapElement.children; + for (let j = 0; j < nodes.length; j++) { + const attribute = nodes[parseInt(j.toString(), 10)].attributes; + for (let i = 0; i < attribute.length; i++) { + nodes[parseInt(j.toString(), 10)].removeAttribute(attribute[parseInt(i.toString(), 10)].localName); + } + } + } + } + /** + * Removes potentially harmful tags to prevent XSS attacks. + * + * @returns {void} + */ + function removeXssTags() { + if (props.wrapElement) { + const elements = props.wrapElement.querySelectorAll(props.removeTags.join(',')); + elements.forEach((element) => { + detach(element); + }); + } + } + /** + * Removes JavaScript event attributes to prevent XSS attacks. + * + * @returns {void} + */ + function removeJsEvents() { + if (props.wrapElement) { + const elements = props.wrapElement.querySelectorAll('[' + jsEvents.join('],[') + ']'); + elements.forEach((element) => { + jsEvents.forEach((attr) => { + if (element.hasAttribute(attr)) { + element.removeAttribute(attr); + } + }); + }); + } + } + /** + * Removes attributes based on configured selectors to prevent XSS attacks. + * + * @returns {void} + */ + function removeXssAttrs() { + if (props.wrapElement) { + props.removeAttrs.forEach((item) => { + const elements = props.wrapElement.querySelectorAll(item.selector); + elements.forEach((element) => { + if (item.selector === 'a[href]') { + const attrValue = element.getAttribute(item.attribute || ''); + if (attrValue && attrValue.replace(/\t|\s|&/, '').includes('javascript:alert')) { + element.removeAttribute(item.attribute || ''); + } + } + else { + element.removeAttribute(item.attribute || ''); + } + }); + }); + } + } + return props; +})(); diff --git a/components/base/src/svg-icon.d.ts b/components/base/src/svg-icon.d.ts new file mode 100644 index 0000000..06c5438 --- /dev/null +++ b/components/base/src/svg-icon.d.ts @@ -0,0 +1,44 @@ +import * as React from 'react'; +import { HTMLAttributes } from 'react'; +export interface IconProps { + /** + * Specifies the path data for the SVG icon. + * + * @default '' + */ + d?: string; + /** + * Specifies the path fill color of the SVG icon. + * + * @default '' + */ + fill?: string; + /** + * Specifies the height of the SVG icon. + * + * @default '16' + */ + height?: string; + /** + * Specifies the viewBox of the SVG icon. + * + * @default '0 0 24 24' + */ + viewBox?: string; + /** + * Specifies the width of the SVG icon. + * + * @default '16' + */ + width?: string; +} +type SvgProps = IconProps & HTMLAttributes; +/** + * The SVG component displays SVG icons with a given height, width, and viewBox. + * + * @private + * @param {SvgProps} props - The props of the component. + * @returns {void} Returns the SVG element. + */ +export declare const SvgIcon: React.FC; +export default SvgIcon; diff --git a/components/base/src/svg-icon.js b/components/base/src/svg-icon.js new file mode 100644 index 0000000..1db9953 --- /dev/null +++ b/components/base/src/svg-icon.js @@ -0,0 +1,13 @@ +import { jsx as _jsx } from "react/jsx-runtime"; +/** + * The SVG component displays SVG icons with a given height, width, and viewBox. + * + * @private + * @param {SvgProps} props - The props of the component. + * @returns {void} Returns the SVG element. + */ +export const SvgIcon = ((props) => { + const { height = '16', viewBox = '0 0 24 24', width = '16', fill, d = '', ...restProps } = props; + return (_jsx("svg", { ...restProps, height: height, viewBox: viewBox, width: width, children: _jsx("path", { d: d, fill: fill }) })); +}); +export default SvgIcon; diff --git a/components/base/src/touch.d.ts b/components/base/src/touch.d.ts new file mode 100644 index 0000000..8d3e05e --- /dev/null +++ b/components/base/src/touch.d.ts @@ -0,0 +1,185 @@ +import { RefObject, MouseEvent } from 'react'; +import { BaseEventArgs } from './event-handler'; +import { IBase } from './base'; +/** + * SwipeSettings is a framework module that provides support to handle swipe event like swipe up, swipe right, etc.., + */ +export interface SwipeSettings { + /** + * Property specifies minimum distance of swipe moved. + * + * @default 50 + */ + swipeThresholdDistance?: number; +} +/** + * Interface defining the touch handling props. + */ +export interface ITouch extends IBase { + /** + * Specifies the callback function for tap event. + */ + tap?: (args: TapEventArgs) => void; + /** + * Specifies the callback function for tapHold event. + */ + tapHold?: (args: TapEventArgs) => void; + /** + * Specifies the callback function for swipe event. + */ + swipe?: (args: SwipeEventArgs) => void; + /** + * Specifies the callback function for scroll event. + */ + scroll?: (args: ScrollEventArgs) => void; + /** + * Specifies the time delay for tap. + * + * @default 350 + */ + tapThreshold?: number; + /** + * Specifies the time delay for tap hold. + * + * @default 750 + */ + tapHoldThreshold?: number; + /** + * Customize the swipe event configuration. + * + * @default '{swipeThresholdDistance: 50}' + */ + swipeSettings?: SwipeSettings; +} +/** + * Custom hook to handle touch events such as tap, double tap, swipe, etc. + * + * @private + * @param {RefObject} element Target HTML element for touch events + * @param {Touch} props props to customize touch behavior + * @returns {Touch} The Touch object + */ +export declare function Touch(element: RefObject, props?: ITouch): ITouch; +/** + * The argument type of `Tap` Event + */ +export interface TapEventArgs extends BaseEventArgs { + /** + * Original native event Object. + */ + originalEvent: TouchEventArgs | MouseEventArgs; + /** + * Tap Count. + */ + tapCount?: number; +} +/** + * The argument type of `Scroll` Event + */ +export interface ScrollEventArgs extends BaseEventArgs { + /** + * Event argument for start event. + */ + startEvents?: TouchEventArgs | MouseEventArgs; + /** + * Original native event object for scroll. + */ + originalEvent?: TouchEventArgs | MouseEventArgs; + /** + * X position when scroll started. + */ + startX?: number; + /** + * Y position when scroll started. + */ + startY?: number; + /** + * The direction scroll. + */ + scrollDirection?: string; + /** + * The total traveled distance from X position + */ + distanceX?: number; + /** + * The total traveled distance from Y position + */ + distanceY?: number; + /** + * The velocity of scroll. + */ + velocity?: number; +} +/** + * The argument type of `Swipe` Event + */ +export interface SwipeEventArgs extends BaseEventArgs { + /** + * Event argument for start event. + */ + startEvents?: TouchEventArgs | MouseEventArgs; + /** + * Original native event object for swipe. + */ + originalEvent?: TouchEventArgs | MouseEventArgs; + /** + * X position when swipe started. + */ + startX?: number; + /** + * Y position when swipe started. + */ + startY?: number; + /** + * The direction swipe. + */ + swipeDirection?: string; + /** + * The total traveled distance from X position + */ + distanceX?: number; + /** + * The total traveled distance from Y position + */ + distanceY?: number; + /** + * The velocity of swipe. + */ + velocity?: number; +} +export interface TouchEventArgs extends MouseEvent { + /** + * A TouchList with touched points. + */ + changedTouches: MouseEventArgs[] | TouchEventArgs[]; + /** + * Cancel the default action. + */ + preventDefault(): void; + /** + * The horizontal coordinate point of client area. + */ + clientX: number; + /** + * The vertical coordinate point of client area. + */ + clientY: number; +} +export interface MouseEventArgs extends MouseEvent { + /** + * A TouchList with touched points. + */ + changedTouches: MouseEventArgs[] | TouchEventArgs[]; + /** + * Cancel the default action. + */ + preventDefault(): void; + /** + * The horizontal coordinate point of client area. + */ + clientX: number; + /** + * The vertical coordinate point of client area. + */ + clientY: number; +} diff --git a/components/base/src/touch.js b/components/base/src/touch.js new file mode 100644 index 0000000..8a13d88 --- /dev/null +++ b/components/base/src/touch.js @@ -0,0 +1,326 @@ +import { useLayoutEffect } from 'react'; +import { extend } from './util'; +import { Browser } from './browser'; +import { EventHandler } from './event-handler'; +import { Base } from './base'; +const swipeRegex = /(Up|Down)/; +/** + * Custom hook to handle touch events such as tap, double tap, swipe, etc. + * + * @private + * @param {RefObject} element Target HTML element for touch events + * @param {Touch} props props to customize touch behavior + * @returns {Touch} The Touch object + */ +export function Touch(element, props) { + const baseRef = Base(); + const propsRef = { ...props }; + //Internal Variables + let isTouchMoved = false; + let startPoint = { clientX: 0, clientY: 0 }; + let startEventData = null; + let lastMovedPoint = { clientX: 0, clientY: 0 }; + let scrollDirection = ''; + let hScrollLocked = false; + let vScrollLocked = false; + let defaultArgs = { originalEvent: null }; + let distanceX = 0; + let distanceY = 0; + let movedDirection = ''; + let tStampStart = 0; + let touchAction = true; + let timeOutTap = null; + let timeOutTapHold = null; + let tapCount = 0; + useLayoutEffect(() => { + bind(); + return () => { + unwireEvents(); + baseRef.destroy(); + }; + }, []); + /** + * Binds the touch event handlers to the target element. + * Calls internal methods to setup required bindings and adds necessary class for IE browser. + * + * @returns {void} + */ + function bind() { + if (element.current) { + wireEvents(); + if (Browser.isIE) { + element.current.classList.add('sf-block-touch'); + } + } + } + /** + * Attaches event listeners for start, move, end, and cancel touch events to the target element. + * + * @returns {void} + */ + function wireEvents() { + EventHandler.add(element.current, Browser.touchStartEvent, startEvent, undefined); + } + /** + * Detaches event listeners for start, move, end, and cancel touch events to the target element. + * + * @returns {void} + */ + function unwireEvents() { + EventHandler.remove(element.current, Browser.touchStartEvent, startEvent); + } + /** + * Returns if the HTML element is scrollable by inspecting its overflow properties. + * + * @param {HTMLElement} element - The HTML element to be checked. + * @returns {boolean} True if the element is scrollable, false otherwise. + */ + function isScrollable(element) { + const eleStyle = getComputedStyle(element); + const style = eleStyle.overflow + eleStyle.overflowX + eleStyle.overflowY; + return (/(auto|scroll)/).test(style); + } + /** + * Handler for the touch start event. Initializes touch action tracking and + * attaches additional event listeners for move, end, and cancel actions. + * + * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the touch start action. + * @returns {void} + */ + function startEvent(evt) { + if (touchAction === true) { + const point = updateChangeTouches(evt); + if (evt.changedTouches !== undefined) { + touchAction = false; + } + isTouchMoved = false; + movedDirection = ''; + startPoint = lastMovedPoint = { clientX: point.clientX, clientY: point.clientY }; + startEventData = point; + hScrollLocked = vScrollLocked = false; + tStampStart = Date.now(); + timeOutTapHold = setTimeout(() => { tapHoldEvent(evt); }, propsRef.tapHoldThreshold ? propsRef.tapHoldThreshold : 750); + EventHandler.add(element.current, Browser.touchMoveEvent, moveEvent, undefined); + EventHandler.add(element.current, Browser.touchEndEvent, endEvent, undefined); + EventHandler.add(element.current, Browser.touchCancelEvent, cancelEvent, undefined); + } + } + /** + * Handler for the touch move event. Updates movement tracking and triggers the scroll event if a scroll action is detected. + * + * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the touch move action. + * @returns {void} + */ + function moveEvent(evt) { + const point = updateChangeTouches(evt); + isTouchMoved = !(point.clientX === startPoint.clientX && point.clientY === startPoint.clientY); + let eScrollArgs = {}; + if (isTouchMoved) { + clearTimeout(timeOutTapHold); + calcScrollPoints(evt); + const scrollArg = { + startEvents: startEventData, + originalEvent: evt, + startX: startPoint.clientX, + startY: startPoint.clientY, + distanceX: distanceX, + distanceY: distanceY, + scrollDirection: scrollDirection, + velocity: getVelocity(point) + }; + eScrollArgs = extend(eScrollArgs, {}, scrollArg); + baseRef.trigger('scroll', eScrollArgs, propsRef.scroll); + lastMovedPoint = { clientX: point.clientX, clientY: point.clientY }; + } + } + /** + * Handler for the touch cancel event. Clears timeouts and triggers necessary cleanup. + * + * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the touch cancel action. + * @returns {void} + */ + function cancelEvent(evt) { + clearTimeout(timeOutTapHold); + clearTimeout(timeOutTap); + tapCount = 0; + swipeFn(evt); + EventHandler.remove(element.current, Browser.touchCancelEvent, cancelEvent); + } + /** + * Triggers when a tap hold is detected. + * Invokes the tap hold callback and removes additional event listeners. + * + * @param {MouseEvent | TouchEventArgs} evt - The event object from the tap hold action. + * @returns {void} + */ + function tapHoldEvent(evt) { + tapCount = 0; + touchAction = true; + EventHandler.remove(element.current, Browser.touchMoveEvent, moveEvent); + EventHandler.remove(element.current, Browser.touchEndEvent, endEvent); + const eTapArgs = { originalEvent: evt }; + baseRef.trigger('tapHold', eTapArgs, propsRef.tapHold); + EventHandler.remove(element.current, Browser.touchCancelEvent, cancelEvent); + } + /** + * Handler for the touch end event. Determines if a tap or swipe occurred and triggers the respective callbacks. + * + * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the touch end action. + * @returns {void} + */ + function endEvent(evt) { + swipeFn(evt); + if (!isTouchMoved) { + if (typeof propsRef.tap === 'function') { + baseRef.trigger('tap', { originalEvent: evt, tapCount: ++tapCount }, propsRef.tap); + timeOutTap = setTimeout(() => { + tapCount = 0; + }, propsRef.tapThreshold ? propsRef.tapThreshold : 350); + } + } + modeclear(); + } + /** + * Determines if a swipe occurred and triggers the swipe event callback. + * Computes swipe direction, distance, and velocity. + * + * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the swipe action. + * @returns {void} + */ + function swipeFn(evt) { + clearTimeout(timeOutTapHold); + clearTimeout(timeOutTap); + const point = updateChangeTouches(evt); + let diffX = point.clientX - startPoint.clientX; + let diffY = point.clientY - startPoint.clientY; + diffX = Math.floor(diffX < 0 ? -1 * diffX : diffX); + diffY = Math.floor(diffY < 0 ? -1 * diffY : diffY); + isTouchMoved = diffX > 1 || diffY > 1; + const isFirefox = (/Firefox/).test(Browser.userAgent); + if (isFirefox && point.clientX === 0 && point.clientY === 0 && evt.type === 'mouseup') { + isTouchMoved = false; + } + calcPoints(evt); + const swipeArgs = { + originalEvent: evt, + startEvents: startEventData, + startX: startPoint.clientX, + startY: startPoint.clientY, + distanceX: distanceX, + distanceY: distanceY, + swipeDirection: movedDirection, + velocity: getVelocity(point) + }; + if (isTouchMoved) { + const tDistance = propsRef.swipeSettings ? propsRef.swipeSettings.swipeThresholdDistance : 50; + const eSwipeArgs = extend(undefined, defaultArgs, swipeArgs); + let canTrigger = false; + const scrollBool = isScrollable(element.current); + const moved = swipeRegex.test(movedDirection); + if (tDistance && ((tDistance < distanceX && !moved) || (tDistance < distanceY && moved))) { + if (!scrollBool) { + canTrigger = true; + } + else { + canTrigger = checkSwipe(element.current, moved); + } + } + if (canTrigger) { + baseRef.trigger('swipe', eSwipeArgs, propsRef.swipe); + } + } + modeclear(); + } + /** + * Clears or resets various states and timeouts after a touch action completes. + * Ensures the touch action can be re-triggered properly. + * + * @returns {void} + */ + function modeclear() { + setTimeout(() => { + touchAction = true; + }, typeof propsRef.tap !== 'function' ? 0 : 20); + EventHandler.remove(element.current, Browser.touchMoveEvent, moveEvent); + EventHandler.remove(element.current, Browser.touchEndEvent, endEvent); + EventHandler.remove(element.current, Browser.touchCancelEvent, cancelEvent); + } + /** + * Calculates the distance and direction of the touch points during a swipe. + * Sets the moved direction based on the calculated points' differences. + * + * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the movement action. + * @returns {void} + */ + function calcPoints(evt) { + const point = updateChangeTouches(evt); + defaultArgs = { originalEvent: evt }; + distanceX = Math.abs(Math.abs(point.clientX) - Math.abs(startPoint.clientX)); + distanceY = Math.abs(Math.abs(point.clientY) - Math.abs(startPoint.clientY)); + movedDirection = distanceX > distanceY + ? (point.clientX > startPoint.clientX ? 'Right' : 'Left') + : (point.clientY < startPoint.clientY ? 'Up' : 'Down'); + } + /** + * Calculates the scrolling distance and direction when a scroll action is detected. + * Determines which direction the scroll is locked, updating the scroll direction accordingly. + * + * @param {MouseEventArgs | TouchEventArgs} evt - The event object from the scroll action. + * @returns {void} + */ + function calcScrollPoints(evt) { + const point = updateChangeTouches(evt); + defaultArgs = { originalEvent: evt }; + distanceX = Math.abs(Math.abs(point.clientX) - Math.abs(lastMovedPoint.clientX)); + distanceY = Math.abs(Math.abs(point.clientY) - Math.abs(lastMovedPoint.clientY)); + if ((distanceX > distanceY || hScrollLocked) && !vScrollLocked) { + scrollDirection = point.clientX > lastMovedPoint.clientX ? 'Right' : 'Left'; + hScrollLocked = true; + } + else { + scrollDirection = point.clientY < lastMovedPoint.clientY ? 'Up' : 'Down'; + vScrollLocked = true; + } + } + /** + * Calculates the velocity of the swipe or scroll action based on the distance moved and time taken. + * + * @param {MouseEventArgs | TouchEventArgs} pnt - The point from which velocity is calculated. + * @returns {number} The calculated velocity of the touch action. + */ + function getVelocity(pnt) { + const newX = pnt.clientX; + const newY = pnt.clientY; + const newT = Date.now(); + const xDist = newX - startPoint.clientX; + const yDist = newY - startPoint.clientY; + const interval = newT - tStampStart; + return Math.sqrt(xDist * xDist + yDist * yDist) / interval; + } + /** + * Determines if a swipe action should be triggered based on the element's scrollable status and direction of movement. + * + * @param {HTMLElement} ele - The element to check for swipe triggering. + * @param {boolean} flag - Indicates the swipe direction (horizontal or vertical). + * @returns {boolean} True if the swipe can be triggered, false otherwise. + */ + function checkSwipe(ele, flag) { + const keys = ['scroll', 'offset']; + const temp = flag ? ['Height', 'Top'] : ['Width', 'Left']; + if (ele[keys[0] + temp[0]] <= ele[keys[1] + temp[0]]) { + return true; + } + return (ele[keys[0] + temp[1]] === 0 || + ele[keys[1] + temp[0]] + ele[keys[0] + temp[1]] >= ele[keys[0] + temp[0]]); + } + /** + * Updates and returns the primary touch point from the event, used in various calculations. + * + * @param {MouseEventArgs | TouchEventArgs} evt - The event object from which to extract the touch point. + * @returns {MouseEventArgs | TouchEventArgs} The updated point from the touch event. + */ + function updateChangeTouches(evt) { + return evt.changedTouches && evt.changedTouches.length !== 0 ? evt.changedTouches[0] : evt; + } + return propsRef; +} diff --git a/components/base/src/util.d.ts b/components/base/src/util.d.ts new file mode 100644 index 0000000..5a5407d --- /dev/null +++ b/components/base/src/util.d.ts @@ -0,0 +1,176 @@ +/** + * Create Instance from constructor function with desired parameters. + * + * @param {Function} classFunction - Class function to which need to create instance + * @param {any[]} params - Parameters need to passed while creating instance + * @returns {any} ? + * @private + */ +export declare function createInstance(classFunction: Function, params: any[]): any; +/** + * To run a callback function immediately after the browser has completed other operations. + * + * @param {Function} handler - callback function to be triggered. + * @returns {Function} ? + * @private + */ +export declare function setImmediate(handler: Function): Function; +/** + * To get nameSpace value from the desired object. + * + * @param {string} nameSpace - String value to the get the inner object + * @param {any} obj - Object to get the inner object value. + * @returns {any} ? + * @private + */ +export declare function getValue(nameSpace: string, obj: any): any; +/** + * To set value for the nameSpace in desired object. + * + * @param {string} nameSpace - String value to the get the inner object + * @param {any} value - Value that you need to set. + * @param {any} obj - Object to get the inner object value. + * @returns {any} ? + * @private + */ +export declare function setValue(nameSpace: string, value: any, obj: any): any; +/** + * Delete an item from Object + * + * @param {any} obj - Object in which we need to delete an item. + * @param {string} key - String value to the get the inner object + * @returns {void} ? + * @private + */ +export declare function deleteObject(obj: any, key: string): void; +/** + *@private + */ +export declare const containerObject: any; +/** + * Check weather the given argument is only object. + * + * @param {any} obj - Object which is need to check. + * @returns {boolean} ? + * @private + */ +export declare function isObject(obj: any): boolean; +/** + * To get enum value by giving the string. + * + * @param {any} enumObject - Enum object. + * @param {string} enumValue - Enum value to be searched + * @returns {any} ? + * @private + */ +export declare function getEnumValue(enumObject: any, enumValue: string | number): any; +/** + * Merge the source object into destination object. + * + * @param {any} source - source object which is going to merge with destination object + * @param {any} destination - object need to be merged + * @returns {void} ? + * @private + */ +export declare function merge(source: Object, destination: Object): void; +/** + * Extend the two object with newer one. + * + * @param {any} copied - Resultant object after merged + * @param {Object} first - First object need to merge + * @param {Object} second - Second object need to merge + * @param {boolean} deep ? + * @returns {Object} ? + * @private + */ +export declare function extend(copied: Object, first: Object, second?: Object, deep?: boolean): Object; +/** + * To check whether the object is null or undefined. + * + * @param {any} value - To check the object is null or undefined + * @returns {boolean} ? + * @private + */ +export declare function isNullOrUndefined(value: T): boolean; +/** + * To check whether the object is undefined. + * + * @param {any} value - To check the object is undefined + * @returns {boolean} ? + * @private + */ +export declare function isUndefined(value: T): boolean; +/** + * To return the generated unique name + * + * @param {string} definedName - To concatenate the unique id to provided name + * @returns {string} ? + * @private + */ +export declare function getUniqueID(definedName?: string): string; +/** + * It limits the rate at which a function can fire. The function will fire only once every provided second instead of as quickly. + * + * @param {Function} eventFunction - Specifies the function to run when the event occurs + * @param {number} delay - A number that specifies the milliseconds for function delay call option + * @returns {Function} ? + * @private + */ +export declare function debounce(eventFunction: Function, delay: number): Function; +/** + * To convert the object to string for query url + * + * @param {Object} data ? + * @returns {string} ? + * @private + */ +export declare function queryParams(data: any): string; +/** + * To check whether the given array contains object. + * + * @param {any} value - Specifies the T type array to be checked. + * @returns {boolean} ? + * @private + */ +export declare function isObjectArray(value: T[]): boolean; +/** + * To check whether the child element is descendant to parent element or parent and child are same element. + * + * @param {Element} child - Specifies the child element to compare with parent. + * @param {Element} parent - Specifies the parent element. + * @returns {boolean} ? + * @private + */ +export declare function compareElementParent(child: Element, parent: Element): boolean; +/** + * To throw custom error message. + * + * @param {string} message - Specifies the error message to be thrown. + * @returns {void} ? + * @private + */ +export declare function throwError(message: string): void; +/** + * This function is used to print given element + * + * @param {Element} element - Specifies the print content element. + * @param {Window} printWindow - Specifies the print window. + * @returns {Window | null} ? + * @private + */ +export declare function print(element: Element, printWindow?: Window | null): Window | null; +/** + * Function to normalize the units applied to the element. + * + * @param {number|string} value ? + * @returns {string} result + * @private + */ +export declare function formatUnit(value: number | string): string; +/** + * Function to generate the unique id. + * + * @returns {any} ? + * @private + */ +export declare function uniqueID(): any; diff --git a/components/base/src/util.js b/components/base/src/util.js new file mode 100644 index 0000000..89afbaf --- /dev/null +++ b/components/base/src/util.js @@ -0,0 +1,381 @@ +let uid = 0; +/** + * Create Instance from constructor function with desired parameters. + * + * @param {Function} classFunction - Class function to which need to create instance + * @param {any[]} params - Parameters need to passed while creating instance + * @returns {any} ? + * @private + */ +export function createInstance(classFunction, params) { + const arrayParam = params; + arrayParam.unshift(undefined); + return Function.prototype.bind.apply(classFunction, arrayParam); +} +/** + * To run a callback function immediately after the browser has completed other operations. + * + * @param {Function} handler - callback function to be triggered. + * @returns {Function} ? + * @private + */ +export function setImmediate(handler) { + let unbind; + const num = new Uint16Array(5); + const intCrypto = window.msCrypto || window.crypto; + intCrypto.getRandomValues(num); + let secret = 'syn' + combineArray(num); + let messageHandler = (event) => { + if (event.source === window && typeof event.data === 'string' && event.data.length <= 32 && event.data === secret) { + handler(); + unbind(); + } + }; + window.addEventListener('message', messageHandler, false); + window.postMessage(secret, '*'); + return unbind = () => { + window.removeEventListener('message', messageHandler); + handler = messageHandler = secret = undefined; + }; +} +/** + * To get nameSpace value from the desired object. + * + * @param {string} nameSpace - String value to the get the inner object + * @param {any} obj - Object to get the inner object value. + * @returns {any} ? + * @private + */ +export function getValue(nameSpace, obj) { + let value = obj; + const splits = !isNullOrUndefined(nameSpace) ? nameSpace.replace(/\[/g, '.').replace(/\]/g, '').split('.') : []; + for (let i = 0; i < splits.length && !isNullOrUndefined(value); i++) { + value = value[splits[parseInt(i.toString(), 10)]]; + } + return value; +} +/** + * To set value for the nameSpace in desired object. + * + * @param {string} nameSpace - String value to the get the inner object + * @param {any} value - Value that you need to set. + * @param {any} obj - Object to get the inner object value. + * @returns {any} ? + * @private + */ +export function setValue(nameSpace, value, obj) { + const keys = nameSpace.replace(/\[/g, '.').replace(/\]/g, '').split('.'); + const start = obj || {}; + let fromObj = start; + let i; + const length = keys.length; + let key; + for (i = 0; i < length; i++) { + key = keys[parseInt(i.toString(), 10)]; + if (i + 1 === length) { + fromObj[`${key}`] = value === undefined ? {} : value; + } + else if (isNullOrUndefined(fromObj[`${key}`])) { + fromObj[`${key}`] = {}; + } + fromObj = fromObj[`${key}`]; + } + return start; +} +/** + * Delete an item from Object + * + * @param {any} obj - Object in which we need to delete an item. + * @param {string} key - String value to the get the inner object + * @returns {void} ? + * @private + */ +export function deleteObject(obj, key) { + delete obj[`${key}`]; +} +/** + *@private + */ +export const containerObject = typeof window !== 'undefined' ? window : {}; +/** + * Check weather the given argument is only object. + * + * @param {any} obj - Object which is need to check. + * @returns {boolean} ? + * @private + */ +export function isObject(obj) { + const objCon = {}; + return (!isNullOrUndefined(obj) && obj.constructor === objCon.constructor); +} +/** + * To get enum value by giving the string. + * + * @param {any} enumObject - Enum object. + * @param {string} enumValue - Enum value to be searched + * @returns {any} ? + * @private + */ +export function getEnumValue(enumObject, enumValue) { + return (enumObject[`${enumValue}`]); +} +/** + * Merge the source object into destination object. + * + * @param {any} source - source object which is going to merge with destination object + * @param {any} destination - object need to be merged + * @returns {void} ? + * @private + */ +export function merge(source, destination) { + if (!isNullOrUndefined(destination)) { + const temrObj = source; + const tempProp = destination; + const keys = Object.keys(destination); + const deepmerge = 'deepMerge'; + for (const key of keys) { + if (!isNullOrUndefined(temrObj[`${deepmerge}`]) && (temrObj[`${deepmerge}`].indexOf(key) !== -1) && + (isObject(tempProp[`${key}`]) || Array.isArray(tempProp[`${key}`]))) { + extend(temrObj[`${key}`], temrObj[`${key}`], tempProp[`${key}`], true); + } + else { + temrObj[`${key}`] = tempProp[`${key}`]; + } + } + } +} +/** + * Extend the two object with newer one. + * + * @param {any} copied - Resultant object after merged + * @param {Object} first - First object need to merge + * @param {Object} second - Second object need to merge + * @param {boolean} deep ? + * @returns {Object} ? + * @private + */ +export function extend(copied, first, second, deep) { + const result = copied && typeof copied === 'object' ? copied : {}; + let length = arguments.length; + const args = [copied, first, second, deep]; + if (deep) { + length = length - 1; + } + for (let i = 1; i < length; i++) { + if (!args[parseInt(i.toString(), 10)]) { + continue; + } + const obj1 = args[parseInt(i.toString(), 10)]; + Object.keys(obj1).forEach((key) => { + const src = result[`${key}`]; + const copy = obj1[`${key}`]; + let clone; + if (deep && (isObject(copy) || Array.isArray(copy))) { + if (isObject(copy)) { + clone = src ? src : {}; + if (Array.isArray(clone) && Object.prototype.hasOwnProperty.call(clone, 'isComplexArray')) { + extend(clone, {}, copy, deep); + } + else { + result[`${key}`] = extend(clone, {}, copy, deep); + } + } + else { + clone = src ? src : []; + result[`${key}`] = extend([], clone, copy, (clone && clone.length) || (copy && copy.length)); + } + } + else { + result[`${key}`] = copy; + } + }); + } + return result; +} +/** + * To check whether the object is null or undefined. + * + * @param {any} value - To check the object is null or undefined + * @returns {boolean} ? + * @private + */ +export function isNullOrUndefined(value) { + return value === undefined || value === null; +} +/** + * To check whether the object is undefined. + * + * @param {any} value - To check the object is undefined + * @returns {boolean} ? + * @private + */ +export function isUndefined(value) { + return typeof value === 'undefined'; +} +/** + * To return the generated unique name + * + * @param {string} definedName - To concatenate the unique id to provided name + * @returns {string} ? + * @private + */ +export function getUniqueID(definedName) { + return definedName ? `${definedName}_${uid++}` : `unique_${uid++}`; +} +/** + * It limits the rate at which a function can fire. The function will fire only once every provided second instead of as quickly. + * + * @param {Function} eventFunction - Specifies the function to run when the event occurs + * @param {number} delay - A number that specifies the milliseconds for function delay call option + * @returns {Function} ? + * @private + */ +export function debounce(eventFunction, delay) { + let timerId; + return function (...args) { + clearTimeout(timerId); + timerId = setTimeout(() => { + eventFunction.apply(this, args); + }, delay); + }; +} +/** + * To convert the object to string for query url + * + * @param {Object} data ? + * @returns {string} ? + * @private + */ +export function queryParams(data) { + return Object.keys(data) + .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[`${key}`])}`) + .join('&'); +} +/** + * To check whether the given array contains object. + * + * @param {any} value - Specifies the T type array to be checked. + * @returns {boolean} ? + * @private + */ +export function isObjectArray(value) { + return Array.isArray(value) && value.length > 0 && typeof value[0] === 'object' && value[0] !== null; +} +/** + * To check whether the child element is descendant to parent element or parent and child are same element. + * + * @param {Element} child - Specifies the child element to compare with parent. + * @param {Element} parent - Specifies the parent element. + * @returns {boolean} ? + * @private + */ +export function compareElementParent(child, parent) { + let node = child; + while (node !== null && node !== document) { + if (node === parent) { + return true; + } + node = node.parentNode; + } + return false; +} +/** + * To throw custom error message. + * + * @param {string} message - Specifies the error message to be thrown. + * @returns {void} ? + * @private + */ +export function throwError(message) { + try { + throw new Error(message); + } + catch (e) { + throw new Error(e.message + '\n' + e.stack); + } +} +/** + * This function is used to print given element + * + * @param {Element} element - Specifies the print content element. + * @param {Window} printWindow - Specifies the print window. + * @returns {Window | null} ? + * @private + */ +export function print(element, printWindow) { + if (typeof window === 'undefined') { + return null; + } + const div = document.createElement('div'); + const links = [].slice.call(document.getElementsByTagName('head')[0].querySelectorAll('base, link, style')); + const blinks = [].slice.call(document.getElementsByTagName('body')[0].querySelectorAll('link, style')); + if (blinks.length) { + for (let l = 0, len = blinks.length; l < len; l++) { + links.push(blinks[parseInt(l.toString(), 10)]); + } + } + let reference = ''; + if (!printWindow) { + printWindow = window.open('', 'print', 'height=452,width=1024,tabbar=no'); + } + if (!printWindow) { + throw new Error('Unable to open print window'); + } + div.appendChild(element.cloneNode(true)); + for (let i = 0, len = links.length; i < len; i++) { + reference += links[parseInt(i.toString(), 10)].outerHTML; + } + printWindow.document.write(' ' + reference + '' + div.innerHTML + + '' + ''); + printWindow.document.close(); + printWindow.focus(); + const interval = setInterval(() => { + if (printWindow.ready) { + printWindow.print(); + printWindow.close(); + clearInterval(interval); + } + }, 500); + return printWindow; +} +/** + * Function to normalize the units applied to the element. + * + * @param {number|string} value ? + * @returns {string} result + * @private + */ +export function formatUnit(value) { + const result = value + ''; + if (result.match(/auto|cm|mm|in|px|pt|pc|%|em|ex|ch|rem|vw|vh|vmin|vmax/)) { + return result; + } + return result + 'px'; +} +/** + * Function to generate the unique id. + * + * @returns {any} ? + * @private + */ +export function uniqueID() { + if ((typeof window) === 'undefined') { + return; + } + const num = new Uint16Array(5); + const intCrypto = window.msCrypto || window.crypto; + return intCrypto.getRandomValues(num); +} +/** + * Combines the first five elements of an Int16Array into a comma-separated string. + * + * @param {Int16Array} num ? + * @returns {string} ? + */ +function combineArray(num) { + let ret = ''; + for (let i = 0; i < 5; i++) { + ret += (i ? ',' : '') + num[parseInt(i.toString(), 10)]; + } + return ret; +} diff --git a/components/base/src/validate-lic.d.ts b/components/base/src/validate-lic.d.ts new file mode 100644 index 0000000..a560bb8 --- /dev/null +++ b/components/base/src/validate-lic.d.ts @@ -0,0 +1,73 @@ +export declare const componentList: string[]; +export type ILicenseValidator = { + isValidated: boolean; + isLicensed: boolean; + version: string; + platform: RegExp; + errors: IErrorType; + validate: () => boolean; + getDecryptedData: (key: string) => string; + getInfoFromKey: () => IValidator[]; +}; +/** + * License validation module + * + * @private + * @param {string} key - License key to validate + * @returns {LicenseValidator} License validator object + * @private + */ +export declare function LicenseValidator(key?: string): ILicenseValidator; +/** + * Converts the given number to characters. + * + * @private + * @param {number} cArr - Specifies the license key as number. + * @returns {string} ? + */ +export declare function convertToChar(cArr: number[]): string; +/** + * To set license key. + * + * @param {string} key - license key + * @returns {void} + */ +export declare function registerLicense(key: string): void; +/** + * Validates the license key. + * + * @private + * @param {string} [key] - Optional license key to validate + * @returns {boolean} Returns true if license is valid, false otherwise + */ +export declare function validateLicense(key?: string): boolean; +/** + * Gets the version information from the license validator. + * + * @private + * @returns {string} The version string from the license validator + */ +export declare function getVersion(): string; +/** + * Method for create overlay over the sample + * + * @private + * @returns {void} + */ +export declare function createLicenseOverlay(): void; +interface IValidator { + version?: string; + expiryDate?: string; + platform?: string; + invalidPlatform?: boolean; + lastValue?: number; + minVersion?: number; +} +interface IErrorType { + noLicense: string; + trailExpired: string; + versionMismatched: string; + platformMismatched: string; + invalidKey: string; +} +export {}; diff --git a/components/base/src/validate-lic.js b/components/base/src/validate-lic.js new file mode 100644 index 0000000..f2e4b8c --- /dev/null +++ b/components/base/src/validate-lic.js @@ -0,0 +1,448 @@ +import { getValue, containerObject, setValue, isNullOrUndefined } from './util'; +import { createElement } from './dom'; +export const componentList = ['grid', 'pivotview', 'treegrid', 'spreadsheet', 'rangeNavigator', 'DocumentEditor', 'listbox', 'inplaceeditor', 'PdfViewer', 'richtexteditor', 'DashboardLayout', 'chart', 'stockChart', 'circulargauge', 'diagram', 'heatmap', 'lineargauge', 'maps', 'slider', 'smithchart', 'barcode', 'sparkline', 'treemap', 'bulletChart', 'kanban', 'daterangepicker', 'schedule', 'gantt', 'signature', 'query-builder', 'drop-down-tree', 'carousel', 'filemanager', 'uploader', 'accordion', 'tab', 'treeview']; +const bypassKey = [115, 121, 110, 99, 102, 117, 115, 105, 111, 110, 46, + 105, 115, 76, 105, 99, 86, 97, 108, 105, 100, 97, 116, 101, 100]; +let accountURL; +/** + * License validation module + * + * @private + * @param {string} key - License key to validate + * @returns {LicenseValidator} License validator object + * @private + */ +export function LicenseValidator(key = '') { + let isValidated = false; + let isLicensed = true; + const version = '29'; + const platform = /JavaScript|ASPNET|ASPNETCORE|ASPNETMVC|FileFormats|essentialstudio/i; + const errors = { + noLicense: 'This application was built using a trial version of Syncfusion® Essential Studio®.' + + ' To remove the license validation message permanently, a valid license key must be included.', + trailExpired: 'This application was built using a trial version of Syncfusion® Essential Studio®.' + + ' To remove the license validation message permanently, a valid license key must be included.', + versionMismatched: 'The included Syncfusion® license key is invalid.', + platformMismatched: 'The included Syncfusion® license key is invalid.', + invalidKey: 'The included Syncfusion® license key is invalid.' + }; + /** + * To manage licensing operation. + */ + const manager = (() => { + let licKey = ''; + /** + * Sets the license key. + * + * @param {string} key - Specifies the license key. + * @returns {void} + */ + function set(key) { licKey = key; } + /** + * Gets the license key. + * + * @returns {string} -Gets the license key. + */ + function get() { return licKey; } + return { + setKey: set, + getKey: get + }; + })(); + /** + * To manage npx licensing operation. + */ + const npxManager = (() => { + const npxLicKey = 'npxKeyReplace'; + /** + * Gets the license key. + * + * @returns {string} - Gets the license key. + */ + function get() { return npxLicKey; } + return { + getKey: get + }; + })(); + manager.setKey(key); + /** + * To validate the provided license key. + * + * @returns {boolean} ? + */ + function validate() { + const contentKey = [115, 121, 110, 99, 102, 117, 115, 105, 111, 110, 46, 108, 105, + 99, 101, 110, 115, 101, 67, 111, 110, 116, 101, 110, 116]; + const URLKey = [115, 121, 110, 99, 102, 117, 115, 105, 111, 110, 46, 99, 108, + 97, 105, 109, 65, 99, 99, 111, 117, 110, 116, 85, 82, 76]; + if (!isValidated && (containerObject && !getValue(convertToChar(bypassKey), containerObject))) { + let validateMsg = null; + let validateURL = null; + if ((manager && manager.getKey()) || (npxManager && npxManager.getKey() !== 'npxKeyReplace')) { + const result = getInfoFromKey(); + if (result && result.length) { + for (const res of result) { + if (!platform.test(res.platform) || res.invalidPlatform) { + validateMsg = errors.platformMismatched; + } + else { + if (((res.minVersion >= res.lastValue) && (res.minVersion !== res.lastValue)) || + (res.lastValue < parseInt(version, 10))) { + validateMsg = errors.versionMismatched; + } + else { + if (res.lastValue == null || isNaN(res.lastValue)) { + validateMsg = errors.versionMismatched; + } + } + if (res.expiryDate) { + const expDate = new Date(res.expiryDate); + const currDate = new Date(); + if (expDate !== currDate && expDate < currDate) { + validateMsg = errors.trailExpired; + } + else { + break; + } + } + } + } + } + else { + validateMsg = errors.invalidKey; + } + } + else { + const licenseContent = getValue(convertToChar(contentKey), containerObject); + validateURL = getValue(convertToChar(URLKey), containerObject); + if (licenseContent && licenseContent !== '') { + validateMsg = licenseContent; + } + else { + validateMsg = errors.noLicense; + } + } + if (validateMsg && typeof document !== 'undefined' && !isNullOrUndefined(document)) { + accountURL = (validateURL && validateURL !== '') ? validateURL : 'https://www.syncfusion.com/account/claim-license-key?pl=SmF2YVNjcmlwdA==&vs=Mjc=&utm_source=es_license_validation_banner&utm_medium=listing&utm_campaign=license-information'; + const errorDiv = createElement('div', { + innerHTML: `` + validateMsg + ' ' + 'Claim your free account' + }); + errorDiv.setAttribute('style', `position: fixed; + top: 10px; + left: 10px; + right: 10px; + font-size: 14px; + background: #EEF2FF; + color: #222222; + z-index: 999999999; + text-align: left; + border: 1px solid #EEEEEE; + padding: 10px 11px 10px 50px; + border-radius: 8px; + font-family: Helvetica Neue, Helvetica, Arial;`); + document.body.appendChild(errorDiv); + isLicensed = false; + } + isValidated = true; + setValue(convertToChar(bypassKey), isValidated, containerObject); + } + return isLicensed; + } + /** + * Decrypts base64 encoded data from the provided key. + * + * @param {string} key - The base64 encoded key to decrypt + * @returns {string} The decrypted string or empty string if decryption fails + */ + function getDecryptedData(key) { + try { + return atob(key); + } + catch (error) { + return ''; + } + } + /** + * Get license information from key. + * + * @returns {IValidator} - Get license information from key. + */ + function getInfoFromKey() { + try { + let licKey = ''; + const pkey = [5439488, 7929856, 5111808, 6488064, 4587520, 7667712, 5439488, + 6881280, 5177344, 7208960, 4194304, 4456448, 6619136, 7733248, 5242880, 7077888, + 6356992, 7602176, 4587520, 7274496, 7471104, 7143424]; + let decryptedStr = []; + const resultArray = []; + let invalidPlatform = false; + let isNpxKey = false; + if (manager.getKey()) { + licKey = manager.getKey(); + } + else { + isNpxKey = true; + licKey = npxManager.getKey().split('npxKeyReplace')[1]; + } + const licKeySplit = licKey.split(';'); + for (const lKey of licKeySplit) { + const decodeStr = getDecryptedData(lKey); + if (!decodeStr) { + continue; + } + let k = 0; + let buffr = ''; + if (!isNpxKey) { + for (let i = 0; i < decodeStr.length; i++, k++) { + if (k === pkey.length) { + k = 0; + } + const c = decodeStr.charCodeAt(i); + buffr += String.fromCharCode(c ^ (pkey[parseInt(k.toString(), 10)] >> 16)); + } + } + else { + const charKey = decodeStr[decodeStr.length - 1]; + const decryptedKey = []; + for (let i = 0; i < decodeStr.length; i++) { + decryptedKey[parseInt(i.toString(), 10)] = decodeStr[parseInt(i.toString(), 10)].charCodeAt(0) + - charKey.charCodeAt(0); + } + for (let i = 0; i < decryptedKey.length; i++) { + buffr += String.fromCharCode(decryptedKey[parseInt(i.toString(), 10)]); + } + } + if (platform.test(buffr)) { + decryptedStr = buffr.split(';'); + invalidPlatform = false; + if (decryptedStr.length > 3) { + const minVersion = parseInt(decryptedStr[1].split('.')[0], 10); + const lastValue = parseInt(decryptedStr[4], 10); + resultArray.push({ + platform: decryptedStr[0], + version: decryptedStr[1], + expiryDate: decryptedStr[2], + lastValue: lastValue, + minVersion: minVersion + }); + } + } + else if (buffr && buffr.split(';').length > 3) { + invalidPlatform = true; + } + } + if (invalidPlatform && !resultArray.length) { + return [{ invalidPlatform: invalidPlatform }]; + } + else { + return resultArray.length ? resultArray : []; + } + } + catch (error) { + return []; + } + } + return { + isValidated, + isLicensed, + version, + platform, + errors, + validate, + getDecryptedData, + getInfoFromKey + }; +} +let licenseValidator = LicenseValidator(); +/** + * Converts the given number to characters. + * + * @private + * @param {number} cArr - Specifies the license key as number. + * @returns {string} ? + */ +export function convertToChar(cArr) { + let ret = ''; + for (const arr of cArr) { + ret += String.fromCharCode(arr); + } + return ret; +} +/** + * To set license key. + * + * @param {string} key - license key + * @returns {void} + */ +export function registerLicense(key) { + licenseValidator = LicenseValidator(key); +} +/** + * Validates the license key. + * + * @private + * @param {string} [key] - Optional license key to validate + * @returns {boolean} Returns true if license is valid, false otherwise + */ +export function validateLicense(key) { + if (key) { + registerLicense(key); + } + return licenseValidator.validate(); +} +/** + * Gets the version information from the license validator. + * + * @private + * @returns {string} The version string from the license validator + */ +export function getVersion() { + return licenseValidator.version; +} +/** + * Method for create overlay over the sample + * + * @private + * @returns {void} + */ +export function createLicenseOverlay() { + const bannerTemplate = ` +
+
+
+ +
+
Claim your FREE account and get a key in less than a minute
+
    +
  • Access to a 30-day free trial of any of our products.
    • +
  • Access to 24x5 support by developers via the support tickets, forum, feature & feedback page and chat.
    • +
  • 200+ ebooks on the latest technologies, industry trends, and research topics. +
    • +
  • Largest collection of over 7500 flat and wireframe icons for free with Syncfusion® Metro Studio.
    • +
  • Free and unlimited access to Syncfusion® technical blogs and whitepapers.
    • +
+
Syncfusion is trusted by 29,000+ businesses worldwide
+ + Claim your FREE account +
have a Syncfusion® account? Sign In
+
+
`; + if (typeof document !== 'undefined' && !isNullOrUndefined(document)) { + const errorBackground = createElement('div', { + innerHTML: bannerTemplate + }); + document.body.appendChild(errorBackground); + } +} diff --git a/components/base/styles/_all.scss b/components/base/styles/_all.scss new file mode 100644 index 0000000..b07cc99 --- /dev/null +++ b/components/base/styles/_all.scss @@ -0,0 +1,2 @@ +@import 'common/all.scss'; +@import 'animation/all.scss'; diff --git a/components/base/styles/_material3-dark-definition.scss b/components/base/styles/_material3-dark-definition.scss new file mode 100644 index 0000000..2b536d3 --- /dev/null +++ b/components/base/styles/_material3-dark-definition.scss @@ -0,0 +1,15 @@ +@use 'sass:meta'; +@import 'definition/material3-dark.scss'; + +@if not meta.variable-exists('is-roboto-loaded') { + //sass-lint:disable no-url-protocols,no-url-domains + @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap');// stylelint-disable-line no-invalid-position-at-import-rule +} + +$font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !default; +$font-size: 12px !default; +$font-weight: 400 !default; +$error-font-color: $danger !default; +$warning-font-color: $warning !default; +$success-font-color: $success !default; +$information-font-color: $info !default; diff --git a/components/base/styles/_material3-definition.scss b/components/base/styles/_material3-definition.scss new file mode 100644 index 0000000..17b8458 --- /dev/null +++ b/components/base/styles/_material3-definition.scss @@ -0,0 +1,16 @@ +@use 'sass:meta'; +@import 'definition/material3.scss'; + +@if not meta.variable-exists('is-roboto-loaded') { + //sass-lint:disable no-url-protocols,no-url-domains + @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap');// stylelint-disable-line no-invalid-position-at-import-rule +} + +$is-roboto-loaded: 'true' !default; +$font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !default; +$font-size: 12px !default; +$font-weight: 400 !default; +$error-font-color: $danger !default; +$warning-font-color: $warning !default; +$success-font-color: $success !default; +$information-font-color: $info !default; diff --git a/components/base/styles/animation/_all.scss b/components/base/styles/animation/_all.scss new file mode 100644 index 0000000..9845ebf --- /dev/null +++ b/components/base/styles/animation/_all.scss @@ -0,0 +1,505 @@ +@include export-module('base-animation') { + + @keyframes SlideLeftOut { + from { + transform: translate(0, 0); + } + + to { + transform: translate(-100%, 0); + } + } + + @keyframes SlideLeftIn { + from { + transform: translate(-100%, 0); + } + + to { + transform: translate(0, 0); + } + } + + @keyframes SlideRightIn { + from { + transform: translate(100%, 0); + } + + to { + transform: translate(0, 0); + } + } + + @keyframes SlideRightOut { + from { + transform: translate(0, 0); + } + + to { + transform: translate(100%, 0); + } + } + + @keyframes SlideBottomIn { + from { + transform: translate(0, 100%); + } + + to { + transform: translate(0, 0); + } + } + + @keyframes SlideBottomOut { + from { + transform: translate(0, 0); + } + + to { + transform: translate(0, 100%); + } + } + + @keyframes SlideTopIn { + from { + transform: translate(0, -100%); + } + + to { + transform: translate(0, 0); + } + } + + @keyframes SlideTopOut { + from { + transform: translate(0, 0); + } + + to { + transform: translate(0, -100%); + } + } + + @keyframes SlideRight { + from { + width: 0; + } + + to { + width: 100%; + } + } + + @keyframes SlideLeft { + from { + width: 100%; + } + + to { + width: 0; + } + } + + @keyframes SlideDown { + from { + height: 0; + } + + to { + height: 100%; + } + } + + @keyframes SlideUp { + from { + height: 100%; + } + + to { + height: 0; + } + } + + @keyframes FadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + + @keyframes FadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } + } + + @keyframes ZoomIn { + from { + transform: translate(0, 0) scale(0); + } + + to { + transform: translate(0, 0) scale(1); + } + } + + @keyframes ZoomOut { + from { + transform: translate(0, 0) scale(1); + } + + to { + transform: translate(0, 0) scale(0); + } + } + + @keyframes FadeZoomIn { + from { + opacity: 0; + transform: scale(0); + } + + to { + opacity: 1; + transform: scale(1); + } + } + + @keyframes FadeZoomOut { + from { + opacity: 1; + transform: scale(1); + } + + to { + opacity: 0; + transform: scale(0); + } + } + + @keyframes FlipRightDownIn { + from { + transform: perspective(400px) rotateY(-180deg); + transform-origin: right center; + transform-style: preserve-3d; + } + + to { + transform: rotateY(0deg); + transform-origin: right center; + transform-style: preserve-3d; + } + } + + @keyframes FlipRightDownOut { + from { + transform: perspective(400px) rotateY(0deg); + transform-origin: right center; + transform-style: preserve-3d; + } + + to { + transform: rotateY(-180deg); + transform-origin: right center; + transform-style: preserve-3d; + } + } + + @keyframes FlipRightUpIn { + from { + transform: perspective(400px) rotateY(135deg); + transform-origin: right center; + transform-style: preserve-3d; + } + + to { + transform: rotateY(0deg); + transform-origin: right center; + transform-style: preserve-3d; + } + } + + @keyframes FlipRightUpOut { + from { + transform: perspective(400px) rotateY(0deg); + transform-origin: right center; + transform-style: preserve-3d; + } + + to { + transform: rotateY(135deg); + transform-origin: right center; + transform-style: preserve-3d; + } + } + + @keyframes FlipLeftDownIn { + from { + transform: perspective(400px) rotateY(-180deg); + transform-origin: left center; + transform-style: preserve-3d; + } + + to { + transform: rotateY(0deg); + transform-origin: left center; + transform-style: preserve-3d; + } + } + + @keyframes FlipLeftDownOut { + from { + transform: perspective(400px) rotateY(0deg); + transform-origin: left center; + transform-style: preserve-3d; + } + + to { + transform: rotateY(135deg); + transform-origin: left center; + transform-style: preserve-3d; + } + } + + @keyframes FlipLeftUpIn { + from { + transform: perspective(400px) rotateY(-135deg); + transform-origin: left center; + transform-style: preserve-3d; + } + + to { + transform: rotateY(0deg); + transform-origin: left center; + transform-style: preserve-3d; + } + } + + @keyframes FlipLeftUpOut { + from { + transform: perspective(400px) rotateY(0deg); + transform-origin: left center; + transform-style: preserve-3d; + } + + to { + transform: rotateY(135deg) perspective(200px); + transform-origin: left center; + transform-style: preserve-3d; + } + } + + @keyframes FlipYLeftIn { + from { + opacity: 0; + transform: perspective(400px) rotateY(180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + + 50% { + transform: perspective(700px) rotateY(90deg); + } + + to { + opacity: 1; + transform: rotateY(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + } + + @keyframes FlipYLeftOut { + from { + opacity: 1; + transform: perspective(400px) rotateY(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + + 50% { + transform: perspective(700px) rotateY(90deg); + } + + 75% { + transform: perspective(850px) rotateY(125deg); + } + + to { + opacity: 0; + transform: rotateY(180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + } + + @keyframes FlipYRightIn { + from { + opacity: 0; + transform: perspective(400px) rotateY(-180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + + 50% { + transform: perspective(700px) rotateY(-90deg); + } + + to { + opacity: 1; + transform: rotateY(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + } + + @keyframes FlipYRightOut { + from { + opacity: 1; + transform: perspective(400px) rotateY(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + + 50% { + transform: perspective(700px) rotateY(-90deg); + } + + to { + opacity: 0; + transform: rotateY(-180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + } + + @keyframes FlipXDownIn { + from { + opacity: 0; + transform: perspective(400px) rotateX(180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + + 50% { + transform: perspective(700px) rotateX(90deg); + } + + to { + opacity: 1; + transform: rotateX(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + } + + @keyframes FlipXDownOut { + from { + opacity: 1; + transform: perspective(400px) rotateX(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + + 50% { + transform: perspective(700px) rotateX(90deg); + } + + 75% { + transform: perspective(850px) rotateX(125deg); + } + + to { + opacity: 0; + transform: rotateX(180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + } + + @keyframes FlipXUpIn { + from { + opacity: 0; + transform: perspective(400px) rotateX(-180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + + 50% { + transform: perspective(700px) rotateX(-90deg); + } + + to { + opacity: 1; + transform: rotateX(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + } + + @keyframes FlipXUpOut { + from { + opacity: 1; + transform: perspective(400px) rotateX(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + + 50% { + transform: perspective(700px) rotateX(-90deg); + } + + to { + opacity: 0; + transform: rotateX(-180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + } + + #{&} .sf-ripple-wrapper + { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + border-radius: inherit; + pointer-events: none; + } + + $ripple-background: rgba(0, 0, 0, .1); + $ripple-background-m3: linear-gradient(90deg, rgba(28, 27, 31, .08) 0%, rgba(28, 27, 31, .1) 5%, rgba(28, 27, 31, .1) 50%, rgba(28, 27, 31, .1) 50%, rgba(28, 27, 31, .1) 95%, rgba(28, 27, 31, .08) 100%); + + #{&} .sf-ripple-element + { + @if $skin-name =='Material3' { + background: $ripple-background-m3; + } + + @else { + background-color: $ripple-background; + } + border-radius: 0; + overflow: hidden; + pointer-events: none; + position: absolute; + transform: scale(0); + + @if $skin-name =='Material3' { + transition: opacity .3s transform 50ms cubic-bezier(.2, 0, 0, 1); + } + + @else { + transition: opacity, transform 0ms cubic-bezier(0, .1, .2, 1); + } + } +} diff --git a/components/base/styles/common/_all.scss b/components/base/styles/common/_all.scss new file mode 100644 index 0000000..d43f3cf --- /dev/null +++ b/components/base/styles/common/_all.scss @@ -0,0 +1,2 @@ +@import 'mixin.scss'; +@import 'core.scss'; diff --git a/components/base/styles/common/_core.scss b/components/base/styles/common/_core.scss new file mode 100644 index 0000000..263307a --- /dev/null +++ b/components/base/styles/common/_core.scss @@ -0,0 +1,111 @@ +@include export-module('base-core') { + + .sf-control, + .sf-css, + .sf-error { + font-family: $font-family; + font-size: $font-size; + font-weight: $font-weight; + } + + $white: #fff; + $background: #e82824; + $warning: #ffd800; + $yellow: #ff0; + .sf-error { + @if $skin-name == 'Material3' { + color: rgba($error-font-color); + } + @else { + color: $error-font-color; + } + } + + .sf-control, + .sf-control [class ^= 'sf-'], + .sf-control [class *= ' sf-'] { + box-sizing: border-box; + } + + .sf-control:focus, + .sf-control *:focus { + outline: none; + } + + .sf-rtl { + direction: rtl; + text-align: right; + } + + .sf-overlay { + background-color: $overlay-bg-color; + height: 100%; + opacity: .5; + pointer-events: none; + touch-action: none; + width: 100%; + } + + .sf-hidden { + display: none; + } + + .sf-blazor-hidden { + visibility: hidden; + } + + .sf-disabled { + background-image: none; + cursor: default; + opacity: .35; + } + + .sf-ul { + list-style-type: none; + } + + .sf-prevent-select { + user-select: none; + } + + .sf-warning { + @if $skin-name == 'Material3' { + color: rgba($warning-font-color); + } + @else { + color: $warning-font-color; + } + } + + .sf-success { + @if $skin-name == 'Material3' { + color: rgba($success-font-color); + } + @else { + color: $success-font-color; + } + } + + .sf-information { + @if $skin-name == 'Material3' { + color: rgba($information-font-color); + } + @else { + color: $information-font-color; + } + } + + .sf-block-touch { + touch-action: pinch-zoom; + } + .sf-license { + color: $yellow; + text-decoration: none; + } + .sf-license-banner { + position: absolute; + right: 10px; + top: 27%; + cursor: pointer; + } +} diff --git a/components/base/styles/common/_mixin.scss b/components/base/styles/common/_mixin.scss new file mode 100644 index 0000000..e72286b --- /dev/null +++ b/components/base/styles/common/_mixin.scss @@ -0,0 +1,11 @@ +@use 'sass:list'; + +$css: '' !default; +$imported-modules: () !default; + +@mixin export-module($module) { + @if (list.index($imported-modules, $module) == null) { + $imported-modules: list.append($imported-modules, $module) !global; + @content; + } +} \ No newline at end of file diff --git a/components/base/styles/definition/_material3-dark.scss b/components/base/styles/definition/_material3-dark.scss new file mode 100644 index 0000000..994eb2d --- /dev/null +++ b/components/base/styles/definition/_material3-dark.scss @@ -0,0 +1,662 @@ +@use 'sass:math'; +@use 'sass:color'; +@use 'sass:meta'; +@use 'sass:list'; +@import '../common/mixin.scss'; + +@function mapcolorvariable($pallete-name){ + @return var(#{'--color-sf-'+ $pallete-name}); +} + +@function darken-color($color, $amount) { + @if is-custom-property($color) { + @return #{$color}-#{$amount}; + } + + // maybe there is a way to call the original `darken` instead?? + @return adjust-color($color, $lightness: -1 * $amount); +} + +@mixin lighten-color($color, $amount) { + filter: brightness(#{100% + $amount}) saturate(100%) hue-rotate(0deg); + background-color: $color; +} + +@function rgbaChange($hex, $alpha: 1) { + $r: str-slice($hex, 1, 2); + $g: str-slice($hex, 3, 4); + $b: str-slice($hex, 5, 6); + $rgba: rgba(hex($r), hex($g), hex($b), $alpha); + @return $rgba; +} + +:root { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 208, 188, 255; + --color-sf-primary-container: 79, 55, 139; + --color-sf-secondary: 204, 194, 220; + --color-sf-secondary-container: 74, 68, 88; + --color-sf-tertiary: 239, 184, 200; + --color-sf-tertiary-container: 99, 59, 72; + --color-sf-surface: 28, 27, 31; + --color-sf-surface-variant: 73, 69, 79; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 55, 30, 115; + --color-sf-on-primary-container: 234, 221, 255; + --color-sf-on-secondary: 51, 45, 65; + --color-sf-on-secondary-container: 232, 222, 248; + --color-sf-on-tertiary: 73, 37, 50; + --color-sf-on-tertiary-containe: 255, 216, 228; + --color-sf-on-surface: 230, 225, 229; + --color-sf-on-surface-variant: 202, 196, 208; + --color-sf-on-background: 230, 225, 229; + --color-sf-outline: 147, 143, 153; + --color-sf-outline-variant: 68, 71, 70; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 208, 188, 255; + --color-sf-inverse-surface: 230, 225, 229; + --color-sf-inverse-on-surface: 49, 48, 51; + --color-sf-inverse-primary: 103, 80, 164; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 242, 184, 181; + --color-sf-error-container: 140, 29, 24; + --color-sf-on-error: 96, 20, 16; + --color-sf-on-error-container: 249, 222, 220; + --color-sf-success: 83, 202, 23; + --color-sf-success-container: 22, 62, 2; + --color-sf-on-success: 13, 39, 0; + --color-sf-on-success-container: 183, 250, 150; + --color-sf-info: 71, 172, 251; + --color-sf-info-container: 0, 67, 120; + --color-sf-on-info: 0, 51, 91; + --color-sf-on-info-container: 173, 219, 255; + --color-sf-warning: 245, 180, 130; + --color-sf-warning-container: 123, 65, 0; + --color-sf-on-warning: 99, 52, 0; + --color-sf-on-warning-container: 255, 220, 193; + --color-sf-spreadsheet-gridline: 231, 224, 236; + --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff; + --color-sf-success-text: 0, 0, 0; + --color-sf-warning-text: 0, 0, 0; + --color-sf-info-text: 0, 0, 0; + --color-sf-danger-text: 0, 0, 0; + --color-sf-diagram-palette-background: var(--color-sf-inverse-surface); + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary); +} + +$black: mapcolorvariable('black') !default; +$white: mapcolorvariable('white') !default; + +$primary : mapcolorvariable('primary') !default; +$primary-container: mapcolorvariable('primary-container') !default; +$secondary: mapcolorvariable('secondary') !default; +$secondary-container: mapcolorvariable('secondary-container') !default; +$tertiary: mapcolorvariable('tertiary') !default; +$tertiary-container: mapcolorvariable('tertiary-container') !default; +$surface: mapcolorvariable('surface') !default; +$surface-variant: mapcolorvariable('surface-variant') !default; +$background: mapcolorvariable('background') !default; +$on-primary: mapcolorvariable('on-primary') !default; +$on-primary-container: mapcolorvariable('on-primary-container') !default; +$on-secondary: mapcolorvariable('on-secondary') !default; +$on-secondary-container: mapcolorvariable('on-secondary-container') !default; +$on-tertiary: mapcolorvariable('on-tertiary') !default; +$on-tertiary-containe: mapcolorvariable('on-tertiary-containe') !default; +$on-surface: mapcolorvariable('on-surface') !default; +$on-surface-variant: mapcolorvariable('on-surface-variant') !default; +$on-background: mapcolorvariable('on-background') !default; +$outline: mapcolorvariable('outline') !default; +$outline-variant: mapcolorvariable('outline-variant') !default; +$shadow: mapcolorvariable('shadow') !default; +$surface-tint-color: mapcolorvariable('surface-tint-color') !default; +$inverse-surface: mapcolorvariable('inverse-surface') !default; +$inverse-on-surface: mapcolorvariable('inverse-on-surface') !default; +$inverse-primary: mapcolorvariable('inverse-primary') !default; +$scrim:mapcolorvariable('scrim') !default; +$error: mapcolorvariable('error') !default; +$error-container: mapcolorvariable('error-container') !default; +$on-error: mapcolorvariable('on-error') !default; +$on-error-container: mapcolorvariable('on-error-container') !default; +$success: mapcolorvariable('success') !default; +$success-container: mapcolorvariable('success-container') !default; +$on-success: mapcolorvariable('on-success') !default; +$on-success-container: mapcolorvariable('on-success-container') !default; +$info: mapcolorvariable('info') !default; +$info-container: mapcolorvariable('info-container') !default; +$on-info: mapcolorvariable('on-info') !default; +$on-info-container: mapcolorvariable('on-info-container') !default; +$warning: mapcolorvariable('warning') !default; +$warning-container: mapcolorvariable('warning-container') !default; +$on-warning: mapcolorvariable('on-warning') !default; +$on-warning-container: mapcolorvariable('on-warning-container') !default; +$success-text: mapcolorvariable('success-text') !default; +$warning-text: mapcolorvariable('warning-text') !default; +$info-text: mapcolorvariable('info-text') !default; +$danger-text: mapcolorvariable('danger-text') !default; +$spreadsheet-gridline: mapcolorvariable('spreadsheet-gridline') !default; + +$opacity0: 0 !default; +$opacity4: .04 !default; +$opacity5: .05 !default; +$opacity6: .06 !default; +$opacity8: .08 !default; +$opacity11: .11 !default; +$opacity12: .12 !default; +$opacity14: .14 !default; +$opacity16: .16 !default; + +$surface1: linear-gradient(0deg, rgba($primary, $opacity5), rgba($primary, $opacity5)), rgba($surface) !default; +$surface2: linear-gradient(0deg, rgba($primary, $opacity8), rgba($primary, $opacity8)), rgba($surface) !default; +$surface3: linear-gradient(0deg, rgba($primary, $opacity11), rgba($primary, $opacity11)), rgba($surface) !default; +$surface4: linear-gradient(0deg, rgba($primary, $opacity12), rgba($primary, $opacity12)), rgba($surface) !default; +$surface5: linear-gradient(0deg, rgba($primary, $opacity14), rgba($primary, $opacity14)), rgba($surface) !default; +$surface6: linear-gradient(0deg, rgba($primary, $opacity16), rgba($primary, $opacity16)), rgba($surface) !default; + +$level1: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3); +$level2: 0 2px 6px 2px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3); +$level3: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15); +$level4: 0 2px 3px 0 rgba(0, 0, 0, .3), 0 6px 10px 4px rgba(0, 0, 0, .15); +$level5: 0 4px 4px 0 rgba(0, 0, 0, .3), 0 8px 12px 6px rgba(0, 0, 0, .15); + +$primary: $primary !default; +$primary-text-color: $on-primary !default; +$primary-light: $primary-container !default; +$primary-lighter: $primary-light !default; +$primary-dark: $surface-tint-color !default; +$primary-darker: $on-primary-container !default; +$success: $success !default; +$transparent: transparent !default; +$info: $info !default; +$warning: $warning !default; +$danger: $error !default; +$success-light: $success-container !default; +$info-light: $info-container !default; +$warning-light: $warning-container !default; +$danger-light: $error-container !default; +$success-dark: $success !default; +$info-dark: $info !default; +$warning-dark: $warning !default; +$danger-dark:$error !default; +$success-light-alt: $success-light !default; +$info-light-alt: $info-light !default; +$warning-light-alt: $warning-light !default; +$danger-light-alt: $danger-light !default; + +$content-bg-color: $surface !default; +$content-bg-color-alt1: $surface1 !default; +$content-bg-color-alt2: $surface2 !default; +$content-bg-color-alt3: $surface3 !default; +$content-bg-color-alt4: $surface4 !default; +$content-bg-color-alt5: $surface5 !default; +$content-bg-color-alt6: $surface6 !default; +$content-bg-color-hover: rgba($on-surface, $opacity5) !default; +$content-bg-color-pressed: rgba($on-surface, $opacity8) !default; +$content-bg-color-focus: rgba($on-surface, $opacity4) !default; +$content-bg-color-selected: $primary-light !default; +$content-bg-color-dragged: $primary-light !default; +$content-bg-color-disabled: $white !default; +$flyout-bg-color: $surface3 !default; +$flyout-bg-color-hover: rgba($on-surface, $opacity5) !default; +$flyout-bg-color-pressed: rgba($on-surface, $opacity8) !default; +$flyout-bg-color-selected: rgba($primary-container, .65) !default; +$flyout-bg-color-focus: rgba($on-surface, $opacity4) !default; +$overlay-bg-color: rgba($scrim, .5) !default; +$table-bg-color-hover: rgba($on-surface, $opacity5) !default; +$table-bg-color-pressed: rgba($on-surface, $opacity8) !default; +$table-bg-color-selected: rgba($primary-container, .65) !default; + +$colorpicker-gradient-1: #f00 !default; +$colorpicker-gradient-2: #ff0 !default; +$ccolorpicker-gradient-3: #0f0 !default; +$colorpicker-gradient-4: #0ff !default; +$colorpicker-gradient-5: #00f !default; +$colorpicker-gradient-6: #f0f !default; +$colorpicker-gradient-7: #ff0004 !default; +$spreadsheet-selection-1: #673ab8 !default; +$spreadsheet-selection-2: #9c27b0 !default; +$spreadsheet-selection-3: #029688 !default; +$spreadsheet-selection-4: #4caf51 !default; +$spreadsheet-selection-5: #fe9800 !default; +$spreadsheet-selection-6: #3f52b5 !default; + +$content-text-color: $on-surface !default; +$content-text-color-alt1: $on-surface-variant !default; +$content-text-color-alt2: $on-surface-variant !default; +$content-text-color-alt3: $on-tertiary !default; +$content-text-color-inverse: $inverse-on-surface !default; +$content-text-color-hover: $content-text-color !default; +$content-text-color-pressed: $content-text-color !default; +$content-text-color-focus: $content-text-color !default; +$content-text-color-selected: $content-text-color !default; +$content-text-color-dragged: $content-text-color !default; +$content-text-color-disabled: rgba($on-surface, .38) !default; +$placeholder-text-color: $outline !default; +$flyout-text-color: $content-text-color !default; +$flyout-text-color-hover: $content-text-color !default; +$flyout-text-color-pressed: $content-text-color !default; +$flyout-text-color-selected: $content-text-color !default; +$flyout-text-color-focus: $content-text-color !default; +$flyout-text-color-disabled: rgba($on-surface, .38) !default; +$table-text-color-hover: $content-text-color !default; +$table-text-color-pressed: $content-text-color !default; +$table-text-color-selected: $content-text-color !default; + +$icon-color: $on-surface-variant !default; +$icon-color-hover: $on-surface !default; +$icon-color-pressed: $on-surface-variant !default; +$icon-color-disabled: rgba($on-surface-variant, .38) !default; + +$border-light: $outline-variant !default; +$border: $outline !default; +$border-alt: $on-surface-variant !default; +$border-dark: rgba($on-surface, .38) !default; +$border-hover: $border-light !default; +$border-pressed: $border-light !default; +$border-focus: $border-light !default; +$border-selected: $border-light !default; +$border-dragged: $border-light !default; +$border-disabled: $border-light !default; +$border-warning: $warning !default; +$border-error: $error !default; +$border-success: $success !default; +$spreadsheet-gridline: #e7e0ec !default; +$flyout-border: $border-light !default; + +$tooltip-bg-color: $inverse-surface !default; +$tooltip-border: $inverse-surface; +$tooltip-text-color: $inverse-on-surface !default; + +$shadow: 0 .8px 16px rgba($black, .15) !default; +$shadow-sm: $level1 !default; +$shadow-md: $level2 !default; +$shadow-lg: $level3 !default; +$shadow-xl: $level4 !default; +$shadow-2xl: $level5 !default; +$shadow-inner: inset 0 1px 2px rgba($black, .075) !default; +$shadow-none: 0 0 rgba($black, 0) !default; + +$shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff !default; +$shadow-focus-ring2: 0 0 0 1px rgba($black, .95) !default; +$primary-shadow-focus: 0 0 0 4px rgba($primary, .5) !default; +$secondary-shadow-focus: 0 0 0 4px rgba($secondary, .5) !default; +$success-shadow-focus: 0 0 0 4px rgba($success, .5) !default; +$danger-shadow-focus: 0 0 0 4px rgba($danger, .5) !default; +$info-shadow-focus: 0 0 0 4px rgba($info, .5) !default; +$warning-shadow-focus: 0 0 0 4px rgba($warning, .5) !default; + +$font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !default; + +$text-xxs: 10px !default; +$text-xs: 12px !default; +$text-sm: 14px !default; +$text-base: 16px !default; +$text-lg: 18px !default; +$text-xl: 20px !default; +$text-2xl: 24px !default; +$text-3xl: 28px !default; +$text-4xl: 32px !default; +$text-5xl: 42px !default; +$text-6xl: 68px !default; +$text-7xl: 78px !default; +$text-8xl: 96px !default; +$text-9xl: 128px !default; + +$h1-font-size: 40px !default; +$h2-font-size: 32px !default; +$h3-font-size: 28px !default; +$h4-font-size: $text-2xl !default; +$h5-font-size: $text-xl !default; +$h6-font-size: $text-base !default; + +$leading-none: 1 !default; +$leading-tight: 1.25 !default; +$leading-snug: 1.375 !default; +$leading-normal: 1.5 !default; +$leading-relaxed: 1.625 !default; +$leading-loose: 2 !default; + +$font-weight-lighter: lighter !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-medium: 600 !default; +$font-weight-bold: 700 !default; +$font-weight-bolder: bolder !default; + +$secondary-bg-color: $content-bg-color-alt1 !default; +$secondary-border-color: linear-gradient(0deg, rgba($primary, $opacity5), rgba($primary, $opacity5)) !default; +$secondary-text-color: $on-surface !default; +$secondary-bg-color-hover: linear-gradient(0deg, rgba($secondary-text-color, $opacity8), rgba($secondary-text-color, $opacity8)), rgba($content-bg-color) !default; +$secondary-border-color-hover: linear-gradient(0deg, rgba($secondary-text-color, $opacity8), rgba($secondary-text-color, $opacity8)) !default; +$secondary-text-color-hover: $secondary-text-color !default; +$secondary-bg-color-pressed:linear-gradient(0deg, rgba($secondary-text-color, $opacity12), rgba($secondary-text-color, $opacity12)), rgba($content-bg-color) !default; +$secondary-border-color-pressed: linear-gradient(0deg, rgba($secondary-text-color, $opacity12), rgba($secondary-text-color, $opacity12)) !default; +$secondary-text-color-pressed: $secondary-text-color !default; +$secondary-bg-color-focus: $secondary-bg-color-hover !default; +$secondary-border-color-focus: $secondary-border-color-hover !default; +$secondary-text-color-focus: $secondary-text-color-hover !default; +$secondary-bg-color-disabled: rgba($secondary, .12) !default; +$secondary-border-color-disabled: rgba($secondary, 0) !default; +$secondary-text-color-disabled: rgba($on-surface, .38) !default; + +$primary-bg-color: $primary !default; +$primary-border-color: $primary !default; +$primary-text: $primary-text-color !default; +$primary-bg-color-hover: linear-gradient(0deg, rgba($primary-text, $opacity8), rgba($primary-text, $opacity8)), rgba($primary-bg-color) !default; +$primary-border-color-hover: $primary-bg-color-hover !default; +$primary-text-hover: $primary-text !default; +$primary-bg-color-pressed: linear-gradient(0deg, rgba($primary-text, $opacity12), rgba($primary-text, $opacity12)), rgba($primary-bg-color) !default; +$primary-border-color-pressed: $primary-bg-color-pressed !default; +$primary-text-pressed: $primary-text-color !default; +$primary-bg-color-focus: $primary-bg-color-hover !default; +$primary-border-color-focus: $primary-border-color-hover !default; +$primary-text-focus: $primary-text !default; +$primary-bg-color-disabled: rgba($secondary, .12) !default; +$primary-border-color-disabled: rgba($secondary, 0) !default; +$primary-text-disabled: rgba($on-surface, .38) !default; + +$success-bg-color: $success !default; +$success-border-color: $success !default; +$success-text: $black !default; +$success-bg-color-hover: linear-gradient(0deg, rgba($success-text, $opacity8), rgba($success-text, $opacity8)), rgba($success-bg-color) !default; +$success-border-color-hover: $success-bg-color-hover !default; +$success-text-hover: $success-text !default; +$success-bg-color-pressed: linear-gradient(0deg, rgba($success-text, $opacity12), rgba($success-text, $opacity12)), rgba($success-bg-color) !default; +$success-border-color-pressed: $success-bg-color-pressed !default; +$success-text-pressed: $success-text !default; +$success-bg-color-focus: $success-bg-color-hover !default; +$success-border-color-focus: $success-border-color-hover !default; +$success-text-focus: $success-text !default; +$success-bg-color-disabled: rgba($secondary, .12) !default; +$success-border-color-disabled: $success-bg-color-disabled !default; +$success-text-disabled: rgba($on-surface, .38) !default; + +$warning-bg-color: $warning !default; +$warning-border-color: $warning !default; +$warning-text: $black !default; +$warning-bg-color-hover: linear-gradient(0deg, rgba($warning-text, $opacity8), rgba($warning-text, $opacity8)), rgba($warning-bg-color) !default; +$warning-border-color-hover: $warning-bg-color-hover !default; +$warning-text-hover: $warning-text !default; +$warning-bg-color-pressed: linear-gradient(0deg, rgba($warning-text, $opacity12), rgba($warning-text, $opacity12)), rgba($warning-bg-color) !default; +$warning-border-color-pressed: $warning-bg-color-pressed !default; +$warning-text-pressed: $warning-text !default; +$warning-bg-color-focus: $warning-bg-color-hover !default; +$warning-border-color-focus: $warning-border-color-hover !default; +$warning-text-focus: $warning-text !default; +$warning-bg-color-disabled: rgba($secondary, .12) !default; +$warning-border-color-disabled: $warning-bg-color-disabled !default; +$warning-text-disabled: rgba($on-surface, .38) !default; + +$danger-bg-color: $danger !default; +$danger-border-color: $danger !default; +$danger-text: $black !default; +$danger-bg-color-hover: linear-gradient(0deg, rgba($danger-text, $opacity8), rgba($danger-text, $opacity8)), rgba($danger-bg-color) !default; +$danger-border-color-hover: $danger-bg-color-hover !default; +$danger-text-hover: $danger-text !default; +$danger-bg-color-pressed: linear-gradient(0deg, rgba($danger-text, $opacity12), rgba($danger-text, $opacity12)), rgba($danger-bg-color) !default; +$danger-border-color-pressed: $danger-bg-color-pressed !default; +$danger-text-pressed: $danger-text !default; +$danger-bg-color-focus: $danger-bg-color-hover !default; +$danger-border-color-focus: $danger-border-color-hover !default; +$danger-text-focus: $danger-text !default; +$danger-bg-color-disabled: rgba($secondary, .12) !default; +$danger-border-color-disabled: $danger-bg-color-disabled !default; +$danger-text-disabled: rgba($on-surface, .38) !default; + +$info-text: $black !default; +$info-bg-color: $info !default; +$info-border-color: $info-bg-color !default; +$info-bg-color-hover: linear-gradient(0deg, rgba($info-text, $opacity8), rgba($info-text, $opacity8)), rgba($info-bg-color) !default; +$info-border-color-hover: $info-bg-color-hover !default; +$info-text-hover: $info-text !default; +$info-bg-color-pressed: linear-gradient(0deg, rgba($info-text, $opacity12), rgba($info-text, $opacity12)), rgba($info-bg-color) !default; +$info-border-color-pressed: $info-bg-color-pressed !default; +$info-text-pressed: $info-text !default; +$info-bg-color-focus: $info-bg-color-hover !default; +$info-border-color-focus: $info-border-color-hover !default; +$info-text-focus: $info-text-hover !default; +$info-bg-color-disabled: rgba($secondary, .12) !default; +$info-border-color-disabled: $info-bg-color-disabled !default; +$info-text-disabled: rgba($on-surface, .38) !default; + +$primary-outline: $primary-bg-color !default; +$primary-outline-border: $outline !default; +$secondary-outline: $secondary-text-color !default; +$secondary-outline-border: $outline !default; +$warning-outline: $warning-bg-color !default; +$warning-outline-border: $outline !default; +$danger-outline: $danger-bg-color !default; +$danger-outline-border: $outline !default; +$success-outline: $success-bg-color !default; +$success-outline-border: $outline !default; +$info-outline: $info-bg-color !default; +$info-outline-border:$outline !default; + +$toast-text-color: $content-text-color !default; +$toast-alt-text-color: $content-text-color !default; + +$series-1: $surface-variant !default; +$series-2: $outline-variant !default; +$series-3: $outline !default; +$series-4: $on-surface-variant !default; +$series-5: #6200ee !default; +$series-6: #e77a16 !default; +$series-7: #82c100 !default; +$series-8: #7107dc !default; +$series-9: #05b3da !default; +$series-10: #828486 !default; +$series-11: #b1212d !default; +$series-12: #38be09 !default; +$skin-name: 'Material3' !default; +$theme-name: 'Material3-dark' !default; + +$diagram-palette-background: $inverse-surface !default; +$diagram-palette-hover-background: rgba($surface, .05) !default; +$diagram-palette-selection-background: rgba($surface, .12) !default; + +$shape-none:0 !default; +$shape-extra-small:4px !default; +$shape-small:8px !default; +$shape-medium:12px !default; +$shape-Large:16px !default; +$shape-extra-large:16px !default; +$shape-full:50% !default; + +$button-radius:$shape-full !default; +$button-radius-small: $shape-full !default; +$button-radius-bigger: $shape-full !default; +$input-radius: $shape-extra-small !default; +$input-radius-small: $shape-extra-small !default; +$input-radius-bigger: $shape-extra-small !default; +$model-radius: $shape-medium !default; +$model-radius-small: $shape-small !default; +$model-radius-bigger: $shape-Large !default; +$flyout-radius: $shape-extra-small !default; +$flyout-radius-bigger: $shape-extra-small !default; +$flyout-radius-small: $shape-extra-small !default; +$chkbox-radius:2px !default; +$chkbox-radius-small:2px !default; +$chkbox-radius-bigger:2px !default; +$card-radius:$shape-small !default; +$card-radius-small:$shape-extra-small !default; +$card-radius-bigger:$shape-medium !default; +$msg-radius:$shape-none !default; +$msg-radius-small: $msg-radius !default; +$msg-radius-bigger: $msg-radius !default; +$toast-radius: $shape-extra-small !default; +$toast-radius-small: $toast-radius !default; +$toast-radius-bigger: $toast-radius !default; +$chip-radius: $shape-extra-small !default; +$chip-radius-small: $shape-extra-small !default; +$chip-radius-bigger: $shape-small !default; + +$btn-secondary-border-color: linear-gradient(0deg, rgba($content-bg-color, 0), rgba($content-bg-color, 0)) !default; + +$msg-color: rgba($on-surface) !default; +$msg-bg-color: $content-bg-color-alt1 !default; +$msg-border-color: linear-gradient(0deg, rgba($primary, $opacity5), rgba($primary, $opacity5)) !default; +$msg-color-alt1: rgba($on-surface) !default; +$msg-bg-color-alt1: $transparent !default; +$msg-border-color-alt1: rgba($outline) !default; +$msg-color-alt2: rgba($inverse-on-surface) !default; +$msg-bg-color-alt2: rgba($inverse-surface) !default; +$msg-border-color-alt2: rgba($inverse-surface) !default; + +$msg-icon-color: rgba($on-surface-variant) !default; +$msg-icon-color-alt1: rgba($on-surface-variant) !default; +$msg-icon-color-alt2: rgba($inverse-on-surface) !default; + +$msg-close-icon-color: rgba($icon-color) !default; +$msg-close-icon-color-alt1: rgba($icon-color) !default; +$msg-close-icon-color-alt2: rgba($inverse-on-surface) !default; + +$msg-success-color: rgba($on-success-container) !default; +$msg-success-bg-color: rgba($success-container) !default; +$msg-success-border-color: rgba($success-container) !default; +$msg-success-color-alt1: rgba($on-success-container) !default; +$msg-success-bg-color-alt1: $transparent !default; +$msg-success-border-color-alt1: rgba($success) !default; +$msg-success-color-alt2: rgba($on-success) !default; +$msg-success-bg-color-alt2: rgba($success) !default; +$msg-success-border-color-alt2: rgba($success) !default; + +$msg-success-icon-color: rgba($success) !default; +$msg-success-icon-color-alt1: rgba($on-success-container) !default; +$msg-success-icon-color-alt2: rgba($on-success) !default; + +$msg-success-close-icon-color: rgba($icon-color) !default; +$msg-success-close-icon-color-alt1: rgba($icon-color) !default; +$msg-success-close-icon-color-alt2: rgba($on-success) !default; + +$msg-danger-color: rgba($on-error-container) !default; +$msg-danger-bg-color: rgba($error-container) !default; +$msg-danger-border-color: rgba($error-container) !default; +$msg-danger-color-alt1: rgba($on-error-container) !default; +$msg-danger-bg-color-alt1: $transparent !default; +$msg-danger-border-color-alt1: rgba($error) !default; +$msg-danger-color-alt2: rgba($on-error) !default; +$msg-danger-bg-color-alt2: rgba($error) !default; +$msg-danger-border-color-alt2: rgba($error) !default; + +$msg-danger-icon-color: rgba($error) !default; +$msg-danger-icon-color-alt1: rgba($on-error-container) !default; +$msg-danger-icon-color-alt2: rgba($on-error) !default; + +$msg-danger-close-icon-color: rgba($icon-color) !default; +$msg-danger-close-icon-color-alt1: rgba($icon-color) !default; +$msg-danger-close-icon-color-alt2: rgba($on-error) !default; + +$msg-warning-color: rgba($on-warning-container) !default; +$msg-warning-bg-color: rgba($warning-container) !default; +$msg-warning-border-color: rgba($warning-container) !default; +$msg-warning-color-alt1: rgba($on-warning-container) !default; +$msg-warning-bg-color-alt1: $transparent !default; +$msg-warning-border-color-alt1: rgba($warning) !default; +$msg-warning-color-alt2: rgba($on-warning) !default; +$msg-warning-bg-color-alt2: rgba($warning) !default; +$msg-warning-border-color-alt2: rgba($warning) !default; + +$msg-warning-icon-color: rgba($warning) !default; +$msg-warning-icon-color-alt1: rgba($on-warning-container) !default; +$msg-warning-icon-color-alt2: rgba($on-warning) !default; + +$msg-warning-close-icon-color: rgba($icon-color) !default; +$msg-warning-close-icon-color-alt1: rgba($icon-color) !default; +$msg-warning-close-icon-color-alt2: rgba($on-warning) !default; + +$msg-info-color: rgba($on-info-container) !default; +$msg-info-bg-color: rgba($info-container) !default; +$msg-info-border-color: rgba($info-container) !default; +$msg-info-color-alt1: rgba($on-info-container) !default; +$msg-info-bg-color-alt1: $transparent !default; +$msg-info-border-color-alt1: rgba($info) !default; +$msg-info-color-alt2: rgba($on-info) !default; +$msg-info-bg-color-alt2: rgba($info) !default; +$msg-info-border-color-alt2: rgba($info) !default; + +$msg-info-icon-color: rgba($info) !default; +$msg-info-icon-color-alt1: rgba($on-info-container) !default; +$msg-info-icon-color-alt2: rgba($on-info) !default; + +$msg-info-close-icon-color: rgba($icon-color) !default; +$msg-info-close-icon-color-alt1: rgba($icon-color) !default; +$msg-info-close-icon-color-alt2: rgba($on-info) !default; + +$appbar-bg-color-alt1: $content-bg-color-alt2 !default; +$appbar-color-alt1: rgba($content-text-color) !default; +$appbar-border-color-alt1: linear-gradient(0deg, rgba($primary, $opacity8), rgba($primary, $opacity8)) !default; +$appbar-hover-bg-color-alt1: rgba(0, 0, 0, .05) !default; + +$appbar-bg-color-alt2: rgba($inverse-surface) !default; +$appbar-color-alt2: rgba($inverse-on-surface) !default; +$appbar-border-color-alt2: rgba($inverse-surface) !default; +$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default; + +$appbar-bottom-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .13), 0 .3px .9px rgba(0, 0, 0, .1) !default; +$appbar-top-shadow: 0 -1.6px 3.6px rgba(0, 0, 0, .13), 0 -.3px .9px rgba(0, 0, 0, .1) !default; + +$rating-selected-color: $primary !default; +$rating-unrated-color: $content-bg-color-alt3 !default; +$rating-selected-disabled-color: rgba($on-surface, .24) !default; +$rating-unrated-disabled-color: rgba($on-surface, .08) !default; +$rating-selected-hover-color: darken-color(rgba($primary), 5%) !default; +$rating-unrated-hover-color: darken-color(rgba($primary), 10%) !default; +$rating-pressed-color: darken-color(rgba($primary), 10%) !default; + +$skeleton-wave-color: rgba(73, 69, 79, 1) !default; + +$splitbtn-right-border: linear-gradient(to right, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default; +$splitbtn-right-border-rtl: linear-gradient(to left, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default; +$splitbtn-right-border-vertical: linear-gradient(to bottom, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default; + +$gantt-taskbar-color: linear-gradient(0deg, rgba($primary, .75), rgba($primary, .75)), rgba($content-bg-color) !default; + +$grey-white: #fff !default; +$base-font: #000 !default; +$grey-50: #fafafa !default; +$grey-300: #e0e0e0 !default; +$grey-400: #bdbdbd !default; +$grey-500: #9e9e9e !default; +$grey-600: #757575 !default; +$grey-700: #616161 !default; +$grey-800: #424242 !default; +$grey-900: #212121 !default; +$sd-focus-box-shadow: $secondary-shadow-focus !default; +$toooltip-text-color: #f9fafb !default; + +$range-button-font-color: $info !default; +$ddl-input-placeholder-padding: 0 0 0 8px !default; +$theme-light: $primary-light !default; +$gray-600: #6c757d !default; +$gray-300: #dee2e6 !default; +$gray-500: #adb5bd !default; +$gray-900: #212529 !default; +$primary-300: #7986cb; +$gray-400: #ced4da !default; + +$font-icon-8: 8px !default; +$font-icon-9: 9px !default; +$font-icon-10: 10px !default; +$font-icon-12: 12px !default; +$font-icon-13: 13px !default; +$font-icon-14: 14px !default; +$font-icon-15: 15px !default; +$font-icon-16: 16px !default; +$font-icon-17: 17px !default; +$font-icon-18: 18px !default; +$font-icon-20: 20px !default; +$font-icon-22: 22px !default; +$font-icon-24: 24px !default; +$font-icon-26: 26px !default; +$font-icon-28: 28px !default; +$font-icon-32: 32px !default; + +$font-size: 12px !default; +$font-weight: 400 !default; +$error-font-color: $danger !default; +$warning-font-color: $warning !default; +$success-font-color: $success !default; +$information-font-color: $info !default; + +$frozen-shadow: rgba(0, 0, 0, .25) !default; +$frozen-shadow-2: rgba(0, 0, 0, .25) !default; \ No newline at end of file diff --git a/components/base/styles/definition/_material3.scss b/components/base/styles/definition/_material3.scss new file mode 100644 index 0000000..1ab6536 --- /dev/null +++ b/components/base/styles/definition/_material3.scss @@ -0,0 +1,731 @@ +@use 'sass:math'; +@use 'sass:color'; +@use 'sass:meta'; +@use 'sass:list'; +@import '../common/mixin.scss'; + +@function mapcolorvariable($pallete-name){ + @return var(#{'--color-sf-'+ $pallete-name}); +} + +@function darken-color($color, $amount) { + @if is-custom-property($color) { + @return #{$color}-#{$amount}; + } + + // maybe there is a way to call the original `darken` instead?? + @return adjust-color($color, $lightness: -1 * $amount); +} + +@mixin lighten-color($color, $amount) { + filter: brightness(#{100% + $amount}) saturate(100%) hue-rotate(0deg); + background-color: $color; +} + +@function rgbaChange($hex, $alpha: 1) { + $r: str-slice($hex, 1, 2); + $g: str-slice($hex, 3, 4); + $b: str-slice($hex, 5, 6); + $rgba: rgba(hex($r), hex($g), hex($b), $alpha); + @return $rgba; +} + +@function hex-to-rgba($hex, $opacity) { + $r: str-slice($hex, 1, 2); + $g: str-slice($hex, 3, 4); + $b: str-slice($hex, 5, 6); + @if str-length($hex) == 8 { + $opacity: str-slice($hex, 7, 8); + } + $r: str-to-num($r, 16); + $g: str-to-num($g, 16); + $b: str-to-num($b, 16); + $opacity: $opacity / 255; + @return rgba($r, $g, $b, $opacity); +} + +:root { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 103, 80, 164; + --color-sf-primary-container: 234, 221, 255; + --color-sf-secondary: 98, 91, 113; + --color-sf-secondary-container: 232, 222, 248; + --color-sf-tertiary: 125, 82, 96; + --color-sf-tertiary-container: 255, 216, 228; + --color-sf-surface: 255, 255, 255; + --color-sf-surface-variant: 231, 224, 236; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 255, 255, 255; + --color-sf-on-primary-container: 33, 0, 94; + --color-sf-on-secondary: 255, 255, 255; + --color-sf-on-secondary-container: 30, 25, 43; + --color-sf-on-tertiary: 255, 255, 255; + --color-sf-on-tertiary-containe: 55, 11, 30; + --color-sf-on-surface: 28, 27, 31; + --color-sf-on-surface-variant: 73, 69, 78; + --color-sf-on-background: 28, 27, 31; + --color-sf-outline: 121, 116, 126; + --color-sf-outline-variant: 196, 199, 197; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 103, 80, 164; + --color-sf-inverse-surface: 49, 48, 51; + --color-sf-inverse-on-surface: 244, 239, 244; + --color-sf-inverse-primary: 208, 188, 255; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 179, 38, 30; + --color-sf-error-container: 249, 222, 220; + --color-sf-on-error: 255, 250, 250; + --color-sf-on-error-container: 65, 14, 11; + --color-sf-success: 32, 81, 7; + --color-sf-success-container: 209, 255, 186; + --color-sf-on-success: 244, 255, 239; + --color-sf-on-success-container: 13, 39, 0; + --color-sf-info: 1, 87, 155; + --color-sf-info-container: 233, 245, 255; + --color-sf-on-info: 250, 253, 255; + --color-sf-on-info-container: 0, 51, 91; + --color-sf-warning: 145, 76, 0; + --color-sf-warning-container: 254, 236, 222; + --color-sf-on-warning: 255, 255, 255; + --color-sf-on-warning-container: 47, 21, 0; + --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant); + --color-sf-shadow-focus-ring1: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(0, 0, 0); + --color-sf-diagram-palette-background: --color-sf-white; + --color-sf-success-text: 255, 255, 255; + --color-sf-warning-text: 255, 255, 255; + --color-sf-danger-text: 255, 255, 255; + --color-sf-info-text: 255, 255, 255; + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary-container); + --color-sf-secondary-bg-color: var(--color-sf-surface); +} + +$black: mapcolorvariable('black') !default; +$white: mapcolorvariable('white') !default; + +$primary : mapcolorvariable('primary') !default; +$primary-container: mapcolorvariable('primary-container') !default; +$secondary: mapcolorvariable('secondary') !default; +$secondary-container: mapcolorvariable('secondary-container') !default; +$tertiary: mapcolorvariable('tertiary') !default; +$tertiary-container: mapcolorvariable('tertiary-container') !default; +$surface: mapcolorvariable('surface') !default; +$surface-variant: mapcolorvariable('surface-variant') !default; +$background: mapcolorvariable('background') !default; +$on-primary: mapcolorvariable('on-primary') !default; +$on-primary-container: mapcolorvariable('on-primary-container') !default; +$on-secondary: mapcolorvariable('on-secondary') !default; +$on-secondary-container: mapcolorvariable('on-secondary-container') !default; +$on-tertiary: mapcolorvariable('on-tertiary') !default; +$on-tertiary-containe: mapcolorvariable('on-tertiary-containe') !default; +$on-surface: mapcolorvariable('on-surface') !default; +$on-surface-variant: mapcolorvariable('on-surface-variant') !default; +$on-background: mapcolorvariable('on-background') !default; +$outline: mapcolorvariable('outline') !default; +$outline-variant: mapcolorvariable('outline-variant') !default; +$shadow: mapcolorvariable('shadow') !default; +$surface-tint-color: mapcolorvariable('surface-tint-color') !default; +$inverse-surface: mapcolorvariable('inverse-surface') !default; +$inverse-on-surface: mapcolorvariable('inverse-on-surface') !default; +$inverse-primary: mapcolorvariable('inverse-primary') !default; +$scrim:mapcolorvariable('scrim') !default; +$error: mapcolorvariable('error') !default; +$error-container: mapcolorvariable('error-container') !default; +$on-error: mapcolorvariable('on-error') !default; +$on-error-container: mapcolorvariable('on-error-container') !default; +$success: mapcolorvariable('success') !default; +$success-container: mapcolorvariable('success-container') !default; +$on-success: mapcolorvariable('on-success') !default; +$on-success-container: mapcolorvariable('on-success-container') !default; +$info: mapcolorvariable('info') !default; +$info-container: mapcolorvariable('info-container') !default; +$on-info: mapcolorvariable('on-info') !default; +$on-info-container: mapcolorvariable('on-info-container') !default; +$warning: mapcolorvariable('warning') !default; +$warning-container: mapcolorvariable('warning-container') !default; +$on-warning: mapcolorvariable('on-warning') !default; +$on-warning-container: mapcolorvariable('on-warning-container') !default; +$success-text: mapcolorvariable('success-text') !default; +$warning-text: mapcolorvariable('warning-text') !default; +$info-text: mapcolorvariable('info-text') !default; +$danger-text: mapcolorvariable('danger-text') !default; + +$opacity0: 0 !default; +$opacity4: .04 !default; +$opacity5: .05 !default; +$opacity6: .06 !default; +$opacity8: .08 !default; +$opacity11: .11 !default; +$opacity12: .12 !default; +$opacity14: .14 !default; +$opacity16: .16 !default; + +$surface1: linear-gradient(0deg, rgba($primary, $opacity5), rgba($primary, $opacity5)), rgba($surface) !default; +$surface2: linear-gradient(0deg, rgba($primary, $opacity8), rgba($primary, $opacity8)), rgba($surface) !default; +$surface3: linear-gradient(0deg, rgba($primary, $opacity11), rgba($primary, $opacity11)), rgba($surface) !default; +$surface4: linear-gradient(0deg, rgba($primary, $opacity12), rgba($primary, $opacity12)), rgba($surface) !default; +$surface5: linear-gradient(0deg, rgba($primary, $opacity14), rgba($primary, $opacity14)), rgba($surface) !default; +$surface6: linear-gradient(0deg, rgba($primary, $opacity16), rgba($primary, $opacity16)), rgba($surface) !default; + +$level1: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3); +$level2: 0 2px 6px 2px rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .3); +$level3: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15); +$level4: 0 2px 3px 0 rgba(0, 0, 0, .3), 0 6px 10px 4px rgba(0, 0, 0, .15); +$level5: 0 4px 4px 0 rgba(0, 0, 0, .3), 0 8px 12px 6px rgba(0, 0, 0, .15); + +$primary: $primary !default; +$primary-text-color: $on-primary !default; +$primary-light: $primary-container !default; +$primary-lighter: $primary-light !default; +$primary-dark: $surface-tint-color !default; +$primary-darker: $on-primary-container !default; +$success: $success !default; +$transparent: transparent !default; +$info: $info !default; +$warning: $warning !default; +$danger: $error !default; +$success-light: $success-container !default; +$info-light: $info-container !default; +$warning-light: $warning-container !default; +$danger-light: $error-container !default; +$success-dark: $success !default; +$info-dark: $info !default; +$warning-dark: $warning !default; +$danger-dark:$error !default; +$success-light-alt: $success-light !default; +$info-light-alt: $info-light !default; +$warning-light-alt: $warning-light !default; +$danger-light-alt: $danger-light !default; + +$content-bg-color: $surface !default; +$content-bg-color-alt1: $surface1 !default; +$content-bg-color-alt2: $surface2 !default; +$content-bg-color-alt3: $surface3 !default; +$content-bg-color-alt4: $surface4 !default; +$content-bg-color-alt5: $surface5 !default; +$content-bg-color-alt6: $surface6 !default; +$content-bg-color-hover: rgba($on-surface, $opacity5) !default; +$content-bg-color-pressed: rgba($on-surface, $opacity8) !default; +$content-bg-color-focus: rgba($on-surface, $opacity4) !default; +$content-bg-color-selected: $primary-light !default; +$content-bg-color-dragged: $primary-light !default; +$content-bg-color-disabled: $white !default; +$flyout-bg-color: linear-gradient(0deg, rgba($content-bg-color, 1), rgba($content-bg-color, 1)), rgba($content-bg-color) !default; +$flyout-bg-color-hover: rgba($on-surface, $opacity5) !default; +$flyout-bg-color-pressed: rgba($on-surface, $opacity8) !default; +$flyout-bg-color-selected: rgba($primary-container, .65) !default; +$flyout-bg-color-focus: rgba($on-surface, $opacity4) !default; +$overlay-bg-color: rgba($scrim, .5) !default; +$table-bg-color-hover: rgba($on-surface, $opacity5) !default; +$table-bg-color-pressed: rgba($primary-container, .65) !default; +$table-bg-color-selected: rgba($primary-container, .65) !default; + +$colorpicker-gradient-1: #f00 !default; +$colorpicker-gradient-2: #ff0 !default; +$ccolorpicker-gradient-3: #0f0 !default; +$colorpicker-gradient-4: #0ff !default; +$colorpicker-gradient-5: #00f !default; +$colorpicker-gradient-6: #f0f !default; +$colorpicker-gradient-7: #ff0004 !default; +$spreadsheet-selection-1: #673ab8 !default; +$spreadsheet-selection-2: #9c27b0 !default; +$spreadsheet-selection-3: #029688 !default; +$spreadsheet-selection-4: #4caf51 !default; +$spreadsheet-selection-5: #fe9800 !default; +$spreadsheet-selection-6: #3f52b5 !default; + +$content-text-color: $on-surface !default; +$content-text-color-alt1: $on-surface-variant !default; +$content-text-color-alt2: $on-secondary-container !default; +$content-text-color-alt3: $on-tertiary !default; +$content-text-color-inverse: $inverse-on-surface !default; +$content-text-color-hover: $content-text-color !default; +$content-text-color-pressed: $content-text-color !default; +$content-text-color-focus: $content-text-color !default; +$content-text-color-selected: $content-text-color !default; +$content-text-color-dragged: $content-text-color !default; +$content-text-color-disabled: rgba($on-surface, .38) !default; +$placeholder-text-color: $outline !default; +$flyout-text-color: $content-text-color !default; +$flyout-text-color-hover: $content-text-color !default; +$flyout-text-color-pressed: $content-text-color !default; +$flyout-text-color-selected: $content-text-color !default; +$flyout-text-color-focus: $content-text-color !default; +$flyout-text-color-disabled: rgba($on-surface, .38) !default; +$table-text-color-hover: $content-text-color !default; +$table-text-color-pressed: $content-text-color !default; +$table-text-color-selected: $content-text-color !default; + +$icon-color: $on-surface-variant !default; +$icon-color-hover: $on-surface !default; +$icon-color-pressed: $on-surface-variant !default; +$icon-color-disabled: rgba($on-surface-variant, .38) !default; + +$border-light: $outline-variant !default; +$border: $outline !default; +$border-alt: $on-surface-variant !default; +$border-dark: rgba($on-surface, .38) !default; +$border-hover: $border-light !default; +$border-pressed: $border-light !default; +$border-focus: $border-light !default; +$border-selected: $border-light !default; +$border-dragged: $border-light !default; +$border-disabled: $border-light !default; +$border-warning: $warning !default; +$border-error: $error !default; +$border-success: $success !default; +$spreadsheet-gridline: $surface-variant !default; +$flyout-border: $border-light !default; + +$tooltip-bg-color: $inverse-surface !default; +$tooltip-border: $inverse-surface !default; +$tooltip-text-color: $inverse-on-surface !default; + +$shadow: 0 .8px 16px rgba($black, .15) !default; +$shadow-sm: $level1 !default; +$shadow-md: $level2 !default; +$shadow-lg: $level3 !default; +$shadow-xl: $level4 !default; +$shadow-2xl: $level5 !default; +$shadow-inner: inset 0 1px 2px rgba($black, .075) !default; +$shadow-none: 0 0 rgba($black, 0) !default; + +$shadow-focus-ring1: 0 0 0 1px #fff, 0 0 0 3px #000 !default; +$shadow-focus-ring2: 0 0 0 1px rgba($black, .95) !default; +$primary-shadow-focus: 0 0 0 4px rgba($primary, .5) !default; +$secondary-shadow-focus: 0 0 0 4px rgba($secondary, .5) !default; +$success-shadow-focus: 0 0 0 4px rgba($success, .5) !default; +$danger-shadow-focus: 0 0 0 4px rgba($danger, .5) !default; +$info-shadow-focus: 0 0 0 4px rgba($info, .5) !default; +$warning-shadow-focus: 0 0 0 4px rgba($warning, .5) !default; + +$font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !default; + +$text-xxs: 10px !default; +$text-xs: 12px !default; +$text-sm: 14px !default; +$text-base: 16px !default; +$text-lg: 18px !default; +$text-xl: 20px !default; +$text-2xl: 24px !default; +$text-3xl: 28px !default; +$text-4xl: 32px !default; +$text-5xl: 42px !default; +$text-6xl: 68px !default; +$text-7xl: 78px !default; +$text-8xl: 96px !default; +$text-9xl: 128px !default; + +$h1-font-size: 40px !default; +$h2-font-size: 32px !default; +$h3-font-size: 28px !default; +$h4-font-size: $text-2xl !default; +$h5-font-size: $text-xl !default; +$h6-font-size: $text-base !default; + +$leading-none: 1 !default; +$leading-tight: 1.25 !default; +$leading-snug: 1.375 !default; +$leading-normal: 1.5 !default; +$leading-relaxed: 1.625 !default; +$leading-loose: 2 !default; + +$font-weight-lighter: lighter !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-medium: 600 !default; +$font-weight-bold: 700 !default; +$font-weight-bolder: bolder !default; + +$secondary-bg-color: linear-gradient(0deg, rgba($content-bg-color, 1), rgba($content-bg-color, 1)), rgba($content-bg-color) !default; +$secondary-border-color: linear-gradient(0deg, rgba($content-bg-color, 1), rgba($content-bg-color, 1)) !default; +$secondary-text-color: $on-surface !default; +$secondary-bg-color-hover: linear-gradient(0deg, rgba($secondary-text-color, $opacity8), rgba($secondary-text-color, $opacity8)), rgba($content-bg-color) !default; +$secondary-border-color-hover: linear-gradient(0deg, rgba($secondary-text-color, $opacity8), rgba($secondary-text-color, $opacity8)) !default; +$secondary-text-color-hover: $secondary-text-color !default; +$secondary-bg-color-pressed: linear-gradient(0deg, rgba($secondary-text-color, $opacity12), rgba($secondary-text-color, $opacity12)), rgba($content-bg-color) !default; +$secondary-border-color-pressed: linear-gradient(0deg, rgba($secondary-text-color, $opacity12), rgba($secondary-text-color, $opacity12)) !default; +$secondary-text-color-pressed: $secondary-text-color !default; +$secondary-bg-color-focus: $secondary-bg-color-hover !default; +$secondary-border-color-focus: $secondary-border-color-hover !default; +$secondary-text-color-focus: $secondary-text-color-hover !default; +$secondary-bg-color-disabled: rgba($secondary, .12) !default; +$secondary-border-color-disabled: rgba($secondary, 0) !default; +$secondary-text-color-disabled: rgba($on-surface, .38) !default; + +$primary-bg-color: $primary !default; +$primary-border-color: $primary !default; +$primary-text: $primary-text-color !default; +$primary-bg-color-hover: linear-gradient(0deg, rgba($primary-text, $opacity8), rgba($primary-text, $opacity8)), rgba($primary-bg-color) !default; +$primary-border-color-hover: $primary-bg-color-hover !default; +$primary-text-hover: $primary-text !default; +$primary-bg-color-pressed: linear-gradient(0deg, rgba($primary-text, $opacity12), rgba($primary-text, $opacity12)), rgba($primary-bg-color) !default; +$primary-border-color-pressed: $primary-bg-color-pressed !default; +$primary-text-pressed: $primary-text-color !default; +$primary-bg-color-focus: $primary-bg-color-hover !default; +$primary-border-color-focus: $primary-border-color-hover !default; +$primary-text-focus: $primary-text !default; +$primary-bg-color-disabled: rgba($secondary, .12) !default; +$primary-border-color-disabled: rgba($secondary, 0) !default; +$primary-text-disabled: rgba($on-surface, .38) !default; + +$success-bg-color: $success !default; +$success-border-color: $success !default; +$success-text: $white !default; +$success-bg-color-hover: linear-gradient(0deg, rgba($success-text, $opacity8), rgba($success-text, $opacity8)), rgba($success-bg-color) !default; +$success-border-color-hover: $success-bg-color-hover !default; +$success-text-hover: $success-text !default; +$success-bg-color-pressed: linear-gradient(0deg, rgba($success-text, $opacity12), rgba($success-text, $opacity12)), rgba($success-bg-color) !default; +$success-border-color-pressed: $success-bg-color-pressed !default; +$success-text-pressed: $success-text !default; +$success-bg-color-focus: $success-bg-color-hover !default; +$success-border-color-focus: $success-border-color-hover !default; +$success-text-focus: $success-text !default; +$success-bg-color-disabled: rgba($secondary, .12) !default; +$success-border-color-disabled: $success-bg-color-disabled !default; +$success-text-disabled: rgba($on-surface, .38) !default; + +$warning-bg-color: $warning !default; +$warning-border-color: $warning !default; +$warning-text: $white !default; +$warning-bg-color-hover: linear-gradient(0deg, rgba($warning-text, $opacity8), rgba($warning-text, $opacity8)), rgba($warning-bg-color) !default; +$warning-border-color-hover: $warning-bg-color-hover !default; +$warning-text-hover: $warning-text !default; +$warning-bg-color-pressed: linear-gradient(0deg, rgba($warning-text, $opacity12), rgba($warning-text, $opacity12)), rgba($warning-bg-color) !default; +$warning-border-color-pressed: $warning-bg-color-pressed !default; +$warning-text-pressed: $warning-text !default; +$warning-bg-color-focus: $warning-bg-color-hover !default; +$warning-border-color-focus: $warning-border-color-hover !default; +$warning-text-focus: $warning-text !default; +$warning-bg-color-disabled: rgba($secondary, .12) !default; +$warning-border-color-disabled: $warning-bg-color-disabled !default; +$warning-text-disabled: rgba($on-surface, .38) !default; + +$danger-bg-color: $danger !default; +$danger-border-color: $danger !default; +$danger-text: $white !default; +$danger-bg-color-hover: linear-gradient(0deg, rgba($danger-text, $opacity8), rgba($danger-text, $opacity8)), rgba($danger-bg-color) !default; +$danger-border-color-hover: $danger-bg-color-hover !default; +$danger-text-hover: $danger-text !default; +$danger-bg-color-pressed: linear-gradient(0deg, rgba($danger-text, $opacity12), rgba($danger-text, $opacity12)), rgba($danger-bg-color) !default; +$danger-border-color-pressed: $danger-bg-color-pressed !default; +$danger-text-pressed: $danger-text !default; +$danger-bg-color-focus: $danger-bg-color-hover !default; +$danger-border-color-focus: $danger-border-color-hover !default; +$danger-text-focus: $danger-text !default; +$danger-bg-color-disabled: rgba($secondary, .12) !default; +$danger-border-color-disabled: $danger-bg-color-disabled !default; +$danger-text-disabled: rgba($on-surface, .38) !default; + +$info-text: $white !default; +$info-bg-color: $info !default; +$info-border-color: $info-bg-color !default; +$info-bg-color-hover: linear-gradient(0deg, rgba($info-text, $opacity8), rgba($info-text, $opacity8)), rgba($info-bg-color) !default; +$info-border-color-hover: $info-bg-color-hover !default; +$info-text-hover: $info-text !default; +$info-bg-color-pressed: linear-gradient(0deg, rgba($info-text, $opacity12), rgba($info-text, $opacity12)), rgba($info-bg-color) !default; +$info-border-color-pressed: $info-bg-color-pressed !default; +$info-text-pressed: $info-text !default; +$info-bg-color-focus: $info-bg-color-hover !default; +$info-border-color-focus: $info-border-color-hover !default; +$info-text-focus: $info-text-hover !default; +$info-bg-color-disabled: rgba($secondary, .12) !default; +$info-border-color-disabled: $info-bg-color-disabled !default; +$info-text-disabled: rgba($on-surface, .38) !default; + +$primary-outline: $primary-bg-color !default; +$primary-outline-border: $outline !default; +$secondary-outline: $secondary-text-color !default; +$secondary-outline-border: $outline !default; +$warning-outline: $warning-bg-color !default; +$warning-outline-border: $outline !default; +$danger-outline: $danger-bg-color !default; +$danger-outline-border: $outline !default; +$success-outline: $success-bg-color !default; +$success-outline-border: $outline !default; +$info-outline: $info-bg-color !default; +$info-outline-border:$outline !default; + +$toast-text-color: $content-text-color !default; +$toast-alt-text-color: $content-text-color !default; + +$series-1: $surface-variant !default; +$series-2: $outline-variant !default; +$series-3: $outline !default; +$series-4: $on-surface-variant !default; +$series-5: #6200ee !default; +$series-6: #e77a16 !default; +$series-7: #82c100 !default; +$series-8: #7107dc !default; +$series-9: #05b3da !default; +$series-10: #828486 !default; +$series-11: #b1212d !default; +$series-12: #38be09 !default; +$skin-name: 'Material3' !default; +$theme-name: 'Material3' !default; + +$diagram-palette-background: $white !default; +$diagram-palette-hover-background: $content-bg-color-hover !default; +$diagram-palette-selection-background: rgba($on-surface, .12) !default; + +$shape-none:0 !default; +$shape-extra-small:4px !default; +$shape-small:8px !default; +$shape-medium:12px !default; +$shape-Large:16px !default; +$shape-extra-large:16px !default; +$shape-full:50% !default; + +$button-radius: $shape-full !default; +$button-radius-small: $shape-full !default; +$button-radius-bigger: $shape-full !default; +$input-radius: $shape-extra-small !default; +$input-radius-small: $shape-extra-small !default; +$input-radius-bigger: $shape-extra-small !default; +$model-radius: $shape-medium !default; +$model-radius-small: $shape-small !default; +$model-radius-bigger: $shape-Large !default; +$flyout-radius: $shape-extra-small !default; +$flyout-radius-bigger: $shape-extra-small !default; +$flyout-radius-small: $shape-extra-small !default; +$chkbox-radius:2px !default; +$chkbox-radius-small:2px !default; +$chkbox-radius-bigger:2px !default; +$card-radius:$shape-small !default; +$card-radius-small:$shape-extra-small !default; +$card-radius-bigger:$shape-medium !default; +$msg-radius:$shape-none !default; +$msg-radius-small: $msg-radius !default; +$msg-radius-bigger: $msg-radius !default; +$toast-radius: $shape-extra-small !default; +$toast-radius-small: $toast-radius !default; +$toast-radius-bigger: $toast-radius !default; +$chip-radius: $shape-extra-small !default; +$chip-radius-small: $shape-extra-small !default; +$chip-radius-bigger: $shape-small !default; + +$btn-secondary-border-color: linear-gradient(0deg, rgba($content-bg-color, 0), rgba($content-bg-color, 0)) !default; + +$msg-color: rgba($on-surface) !default; +$msg-bg-color: $content-bg-color-alt1 !default; +$msg-border-color: linear-gradient(0deg, rgba($primary, $opacity5), rgba($primary, $opacity5)) !default; +$msg-color-alt1: rgba($on-surface) !default; +$msg-bg-color-alt1: $transparent !default; +$msg-border-color-alt1: rgba($outline-variant) !default; +$msg-color-alt2: rgba($inverse-on-surface) !default; +$msg-bg-color-alt2: rgba($inverse-surface) !default; +$msg-border-color-alt2: rgba($inverse-surface) !default; + +$msg-icon-color: rgba($on-surface-variant) !default; +$msg-icon-color-alt1: rgba($on-surface-variant) !default; +$msg-icon-color-alt2: rgba($inverse-on-surface) !default; + +$msg-close-icon-color: rgba($icon-color) !default; +$msg-close-icon-color-alt1: rgba($icon-color) !default; +$msg-close-icon-color-alt2: rgba($inverse-on-surface) !default; + +$msg-success-color: rgba($on-success-container) !default; +$msg-success-bg-color: rgba($success-container) !default; +$msg-success-border-color: rgba($success-container) !default; +$msg-success-color-alt1: rgba($on-success-container) !default; +$msg-success-bg-color-alt1: $transparent !default; +$msg-success-border-color-alt1: rgba($success) !default; +$msg-success-color-alt2: rgba($on-success) !default; +$msg-success-bg-color-alt2: rgba($success) !default; +$msg-success-border-color-alt2: rgba($success) !default; + +$msg-success-icon-color: rgba($success) !default; +$msg-success-icon-color-alt1: rgba($on-success-container) !default; +$msg-success-icon-color-alt2: rgba($on-success) !default; + +$msg-success-close-icon-color: rgba($icon-color) !default; +$msg-success-close-icon-color-alt1: rgba($icon-color) !default; +$msg-success-close-icon-color-alt2: rgba($on-success) !default; + +$msg-danger-color: rgba($on-error-container) !default; +$msg-danger-bg-color: rgba($error-container) !default; +$msg-danger-border-color: rgba($error-container) !default; +$msg-danger-color-alt1: rgba($on-error-container) !default; +$msg-danger-bg-color-alt1: $transparent !default; +$msg-danger-border-color-alt1: rgba($error) !default; +$msg-danger-color-alt2: rgba($on-error) !default; +$msg-danger-bg-color-alt2: rgba($error) !default; +$msg-danger-border-color-alt2: rgba($error) !default; + +$msg-danger-icon-color: rgba($error) !default; +$msg-danger-icon-color-alt1: rgba($on-error-container) !default; +$msg-danger-icon-color-alt2: rgba($on-error) !default; + +$msg-danger-close-icon-color: rgba($icon-color) !default; +$msg-danger-close-icon-color-alt1: rgba($icon-color) !default; +$msg-danger-close-icon-color-alt2: rgba($on-error) !default; + +$msg-warning-color: rgba($on-warning-container) !default; +$msg-warning-bg-color: rgba($warning-container) !default; +$msg-warning-border-color: rgba($warning-container) !default; +$msg-warning-color-alt1: rgba($on-warning-container) !default; +$msg-warning-bg-color-alt1: $transparent !default; +$msg-warning-border-color-alt1: rgba($warning) !default; +$msg-warning-color-alt2: rgba($on-warning) !default; +$msg-warning-bg-color-alt2: rgba($warning) !default; +$msg-warning-border-color-alt2: rgba($warning) !default; + +$msg-warning-icon-color: rgba($warning) !default; +$msg-warning-icon-color-alt1: rgba($on-warning-container) !default; +$msg-warning-icon-color-alt2: rgba($on-warning) !default; + +$msg-warning-close-icon-color: rgba($icon-color) !default; +$msg-warning-close-icon-color-alt1: rgba($icon-color) !default; +$msg-warning-close-icon-color-alt2: rgba($on-warning) !default; + +$msg-info-color: rgba($on-info-container) !default; +$msg-info-bg-color: rgba($info-container) !default; +$msg-info-border-color: rgba($info-container) !default; +$msg-info-color-alt1: rgba($on-info-container) !default; +$msg-info-bg-color-alt1: $transparent !default; +$msg-info-border-color-alt1: rgba($info) !default; +$msg-info-color-alt2: rgba($on-info) !default; +$msg-info-bg-color-alt2: rgba($info) !default; +$msg-info-border-color-alt2: rgba($info) !default; + +$msg-info-icon-color: rgba($info) !default; +$msg-info-icon-color-alt1: rgba($on-info-container) !default; +$msg-info-icon-color-alt2: rgba($on-info) !default; + +$msg-info-close-icon-color: rgba($icon-color) !default; +$msg-info-close-icon-color-alt1: rgba($icon-color) !default; +$msg-info-close-icon-color-alt2: rgba($on-info) !default; + +$appbar-bg-color-alt1: $content-bg-color-alt2 !default; +$appbar-color-alt1: rgba($content-text-color) !default; +$appbar-border-color-alt1: linear-gradient(0deg, rgba($primary, $opacity8), rgba($primary, $opacity8)) !default; +$appbar-hover-bg-color-alt1: rgba(0, 0, 0, .05) !default; + +$appbar-bg-color-alt2: rgba($inverse-surface) !default; +$appbar-color-alt2: rgba($inverse-on-surface) !default; +$appbar-border-color-alt2: rgba($inverse-surface) !default; +$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default; + +$appbar-bottom-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .13), 0 .3px .9px rgba(0, 0, 0, .1) !default; +$appbar-top-shadow: 0 -1.6px 3.6px rgba(0, 0, 0, .13), 0 -.3px .9px rgba(0, 0, 0, .1) !default; + +$rating-selected-color: $primary !default; +$rating-unrated-color: $content-bg-color-alt3 !default; +$rating-selected-disabled-color: rgba($on-surface, .24) !default; +$rating-unrated-disabled-color: rgba($on-surface, .08) !default; +$rating-selected-hover-color: darken-color(rgba($primary), 5%) !default; +$rating-unrated-hover-color: darken-color(rgba($primary), 10%) !default; +$rating-pressed-color: darken-color(rgba($primary), 10%) !default; + +$skeleton-wave-color: rgba(255, 255, 255, 1) !default; + +$splitbtn-right-border: linear-gradient(to right, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default; +$splitbtn-right-border-rtl: linear-gradient(to left, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default; +$splitbtn-right-border-vertical: linear-gradient(to bottom, rgba($content-bg-color, 1) 25%, rgba($border-light, 1) 75%) 1 !default; + +$gantt-taskbar-color: linear-gradient(0deg, rgba($primary, .75), rgba($primary, .75)), rgba($content-bg-color) !default; + +$grey-white: #fff !default; +$base-font: #000 !default; +$grey-50: #fafafa !default; +$grey-300: #e0e0e0 !default; +$grey-400: #bdbdbd !default; +$grey-500: #9e9e9e !default; +$grey-600: #757575 !default; +$grey-700: #616161 !default; +$grey-800: #424242 !default; +$grey-900: #212121 !default; +$sd-focus-box-shadow: $secondary-shadow-focus !default; +$toooltip-text-color: #f9fafb !default; + +$range-button-font-color: $info !default; +$ddl-input-placeholder-padding: 0 0 0 8px !default; +$theme-light: $primary-light !default; +$gray-600: #6c757d !default; +$gray-300: #dee2e6 !default; +$gray-500: #adb5bd !default; +$gray-900: #212529 !default; +$primary-300: #7986cb; +$gray-400: #ced4da !default; + +$font-icon-8: 8px !default; +$font-icon-9: 9px !default; +$font-icon-10: 10px !default; +$font-icon-12: 12px !default; +$font-icon-13: 13px !default; +$font-icon-14: 14px !default; +$font-icon-15: 15px !default; +$font-icon-16: 16px !default; +$font-icon-17: 17px !default; +$font-icon-18: 18px !default; +$font-icon-20: 20px !default; +$font-icon-22: 22px !default; +$font-icon-24: 24px !default; +$font-icon-26: 26px !default; +$font-icon-28: 28px !default; +$font-icon-32: 32px !default; + +.sf-dark-mode { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 208, 188, 255; + --color-sf-primary-container: 79, 55, 139; + --color-sf-secondary: 204, 194, 220; + --color-sf-secondary-container: 74, 68, 88; + --color-sf-tertiary: 239, 184, 200; + --color-sf-tertiary-container: 99, 59, 72; + --color-sf-surface: 28, 27, 31; + --color-sf-surface-variant: 73, 69, 79; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 55, 30, 115; + --color-sf-on-primary-container: 234, 221, 255; + --color-sf-on-secondary: 51, 45, 65; + --color-sf-on-secondary-container: 232, 222, 248; + --color-sf-on-tertiary: 73, 37, 50; + --color-sf-on-tertiary-containe: 255, 216, 228; + --color-sf-on-surface: 230, 225, 229; + --color-sf-on-surface-variant: 202, 196, 208; + --color-sf-on-background: 230, 225, 229; + --color-sf-outline: 147, 143, 153; + --color-sf-outline-variant: 68, 71, 70; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 208, 188, 255; + --color-sf-inverse-surface: 230, 225, 229; + --color-sf-inverse-on-surface: 49, 48, 51; + --color-sf-inverse-primary: 103, 80, 164; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 242, 184, 181; + --color-sf-error-container: 140, 29, 24; + --color-sf-on-error: 96, 20, 16; + --color-sf-on-error-container: 249, 222, 220; + --color-sf-success: 83, 202, 23; + --color-sf-success-container: 22, 62, 2; + --color-sf-on-success: 13, 39, 0; + --color-sf-on-success-container: 183, 250, 150; + --color-sf-info: 71, 172, 251; + --color-sf-info-container: 0, 67, 120; + --color-sf-on-info: 0, 51, 91; + --color-sf-on-info-container: 173, 219, 255; + --color-sf-warning: 245, 180, 130; + --color-sf-warning-container: 123, 65, 0; + --color-sf-on-warning: 99, 52, 0; + --color-sf-on-warning-container: 255, 220, 193; + --color-sf-spreadsheet-gridline: 231, 224, 236; + --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff; + --color-sf-success-text: 0, 0, 0; + --color-sf-warning-text: 0, 0, 0; + --color-sf-info-text: 0, 0, 0; + --color-sf-danger-text: 0, 0, 0; + --color-sf-diagram-palette-background: var(--color-sf-inverse-surface); + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary); +} + +$font-size: 12px !default; +$font-weight: 400 !default; +$error-font-color: $danger !default; +$warning-font-color: $warning !default; +$success-font-color: $success !default; +$information-font-color: $info !default; + +$frozen-shadow: rgba(0, 0, 0, .12) !default; +$frozen-shadow-2: rgba(0, 0, 0, .12) !default; \ No newline at end of file diff --git a/components/base/styles/material3-dark.css b/components/base/styles/material3-dark.css new file mode 100644 index 0000000..ecbb699 --- /dev/null +++ b/components/base/styles/material3-dark.css @@ -0,0 +1,549 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap"); +:root { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 208, 188, 255; + --color-sf-primary-container: 79, 55, 139; + --color-sf-secondary: 204, 194, 220; + --color-sf-secondary-container: 74, 68, 88; + --color-sf-tertiary: 239, 184, 200; + --color-sf-tertiary-container: 99, 59, 72; + --color-sf-surface: 28, 27, 31; + --color-sf-surface-variant: 73, 69, 79; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 55, 30, 115; + --color-sf-on-primary-container: 234, 221, 255; + --color-sf-on-secondary: 51, 45, 65; + --color-sf-on-secondary-container: 232, 222, 248; + --color-sf-on-tertiary: 73, 37, 50; + --color-sf-on-tertiary-containe: 255, 216, 228; + --color-sf-on-surface: 230, 225, 229; + --color-sf-on-surface-variant: 202, 196, 208; + --color-sf-on-background: 230, 225, 229; + --color-sf-outline: 147, 143, 153; + --color-sf-outline-variant: 68, 71, 70; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 208, 188, 255; + --color-sf-inverse-surface: 230, 225, 229; + --color-sf-inverse-on-surface: 49, 48, 51; + --color-sf-inverse-primary: 103, 80, 164; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 242, 184, 181; + --color-sf-error-container: 140, 29, 24; + --color-sf-on-error: 96, 20, 16; + --color-sf-on-error-container: 249, 222, 220; + --color-sf-success: 83, 202, 23; + --color-sf-success-container: 22, 62, 2; + --color-sf-on-success: 13, 39, 0; + --color-sf-on-success-container: 183, 250, 150; + --color-sf-info: 71, 172, 251; + --color-sf-info-container: 0, 67, 120; + --color-sf-on-info: 0, 51, 91; + --color-sf-on-info-container: 173, 219, 255; + --color-sf-warning: 245, 180, 130; + --color-sf-warning-container: 123, 65, 0; + --color-sf-on-warning: 99, 52, 0; + --color-sf-on-warning-container: 255, 220, 193; + --color-sf-spreadsheet-gridline: 231, 224, 236; + --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff; + --color-sf-success-text: 0, 0, 0; + --color-sf-warning-text: 0, 0, 0; + --color-sf-info-text: 0, 0, 0; + --color-sf-danger-text: 0, 0, 0; + --color-sf-diagram-palette-background: var(--color-sf-inverse-surface); + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary); +} + +.sf-control, +.sf-css, +.sf-error { + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 400; +} + +.sf-error { + color: rgba(var(--color-sf-error)); +} + +.sf-control, +.sf-control [class^=sf-], +.sf-control [class*=" sf-"] { + box-sizing: border-box; +} + +.sf-control:focus, +.sf-control *:focus { + outline: none; +} + +.sf-rtl { + direction: rtl; + text-align: right; +} + +.sf-overlay { + background-color: rgba(var(--color-sf-scrim), 0.5); + height: 100%; + opacity: 0.5; + pointer-events: none; + touch-action: none; + width: 100%; +} + +.sf-hidden { + display: none; +} + +.sf-blazor-hidden { + visibility: hidden; +} + +.sf-disabled { + background-image: none; + cursor: default; + opacity: 0.35; +} + +.sf-ul { + list-style-type: none; +} + +.sf-prevent-select { + user-select: none; +} + +.sf-warning { + color: rgba(var(--color-sf-warning)); +} + +.sf-success { + color: rgba(var(--color-sf-success)); +} + +.sf-information { + color: rgba(var(--color-sf-info)); +} + +.sf-block-touch { + touch-action: pinch-zoom; +} + +.sf-license { + color: #ff0; + text-decoration: none; +} + +.sf-license-banner { + position: absolute; + right: 10px; + top: 27%; + cursor: pointer; +} + +@keyframes SlideLeftOut { + from { + transform: translate(0, 0); + } + to { + transform: translate(-100%, 0); + } +} +@keyframes SlideLeftIn { + from { + transform: translate(-100%, 0); + } + to { + transform: translate(0, 0); + } +} +@keyframes SlideRightIn { + from { + transform: translate(100%, 0); + } + to { + transform: translate(0, 0); + } +} +@keyframes SlideRightOut { + from { + transform: translate(0, 0); + } + to { + transform: translate(100%, 0); + } +} +@keyframes SlideBottomIn { + from { + transform: translate(0, 100%); + } + to { + transform: translate(0, 0); + } +} +@keyframes SlideBottomOut { + from { + transform: translate(0, 0); + } + to { + transform: translate(0, 100%); + } +} +@keyframes SlideTopIn { + from { + transform: translate(0, -100%); + } + to { + transform: translate(0, 0); + } +} +@keyframes SlideTopOut { + from { + transform: translate(0, 0); + } + to { + transform: translate(0, -100%); + } +} +@keyframes SlideRight { + from { + width: 0; + } + to { + width: 100%; + } +} +@keyframes SlideLeft { + from { + width: 100%; + } + to { + width: 0; + } +} +@keyframes SlideDown { + from { + height: 0; + } + to { + height: 100%; + } +} +@keyframes SlideUp { + from { + height: 100%; + } + to { + height: 0; + } +} +@keyframes FadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes FadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@keyframes ZoomIn { + from { + transform: translate(0, 0) scale(0); + } + to { + transform: translate(0, 0) scale(1); + } +} +@keyframes ZoomOut { + from { + transform: translate(0, 0) scale(1); + } + to { + transform: translate(0, 0) scale(0); + } +} +@keyframes FadeZoomIn { + from { + opacity: 0; + transform: scale(0); + } + to { + opacity: 1; + transform: scale(1); + } +} +@keyframes FadeZoomOut { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0); + } +} +@keyframes FlipRightDownIn { + from { + transform: perspective(400px) rotateY(-180deg); + transform-origin: right center; + transform-style: preserve-3d; + } + to { + transform: rotateY(0deg); + transform-origin: right center; + transform-style: preserve-3d; + } +} +@keyframes FlipRightDownOut { + from { + transform: perspective(400px) rotateY(0deg); + transform-origin: right center; + transform-style: preserve-3d; + } + to { + transform: rotateY(-180deg); + transform-origin: right center; + transform-style: preserve-3d; + } +} +@keyframes FlipRightUpIn { + from { + transform: perspective(400px) rotateY(135deg); + transform-origin: right center; + transform-style: preserve-3d; + } + to { + transform: rotateY(0deg); + transform-origin: right center; + transform-style: preserve-3d; + } +} +@keyframes FlipRightUpOut { + from { + transform: perspective(400px) rotateY(0deg); + transform-origin: right center; + transform-style: preserve-3d; + } + to { + transform: rotateY(135deg); + transform-origin: right center; + transform-style: preserve-3d; + } +} +@keyframes FlipLeftDownIn { + from { + transform: perspective(400px) rotateY(-180deg); + transform-origin: left center; + transform-style: preserve-3d; + } + to { + transform: rotateY(0deg); + transform-origin: left center; + transform-style: preserve-3d; + } +} +@keyframes FlipLeftDownOut { + from { + transform: perspective(400px) rotateY(0deg); + transform-origin: left center; + transform-style: preserve-3d; + } + to { + transform: rotateY(135deg); + transform-origin: left center; + transform-style: preserve-3d; + } +} +@keyframes FlipLeftUpIn { + from { + transform: perspective(400px) rotateY(-135deg); + transform-origin: left center; + transform-style: preserve-3d; + } + to { + transform: rotateY(0deg); + transform-origin: left center; + transform-style: preserve-3d; + } +} +@keyframes FlipLeftUpOut { + from { + transform: perspective(400px) rotateY(0deg); + transform-origin: left center; + transform-style: preserve-3d; + } + to { + transform: rotateY(135deg) perspective(200px); + transform-origin: left center; + transform-style: preserve-3d; + } +} +@keyframes FlipYLeftIn { + from { + opacity: 0; + transform: perspective(400px) rotateY(180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateY(90deg); + } + to { + opacity: 1; + transform: rotateY(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipYLeftOut { + from { + opacity: 1; + transform: perspective(400px) rotateY(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateY(90deg); + } + 75% { + transform: perspective(850px) rotateY(125deg); + } + to { + opacity: 0; + transform: rotateY(180deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipYRightIn { + from { + opacity: 0; + transform: perspective(400px) rotateY(-180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateY(-90deg); + } + to { + opacity: 1; + transform: rotateY(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipYRightOut { + from { + opacity: 1; + transform: perspective(400px) rotateY(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateY(-90deg); + } + to { + opacity: 0; + transform: rotateY(-180deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipXDownIn { + from { + opacity: 0; + transform: perspective(400px) rotateX(180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateX(90deg); + } + to { + opacity: 1; + transform: rotateX(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipXDownOut { + from { + opacity: 1; + transform: perspective(400px) rotateX(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateX(90deg); + } + 75% { + transform: perspective(850px) rotateX(125deg); + } + to { + opacity: 0; + transform: rotateX(180deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipXUpIn { + from { + opacity: 0; + transform: perspective(400px) rotateX(-180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateX(-90deg); + } + to { + opacity: 1; + transform: rotateX(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipXUpOut { + from { + opacity: 1; + transform: perspective(400px) rotateX(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateX(-90deg); + } + to { + opacity: 0; + transform: rotateX(-180deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +.sf-ripple-wrapper { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + border-radius: inherit; + pointer-events: none; +} + +.sf-ripple-element { + background: linear-gradient(90deg, rgba(28, 27, 31, 0.08) 0%, rgba(28, 27, 31, 0.1) 5%, rgba(28, 27, 31, 0.1) 50%, rgba(28, 27, 31, 0.1) 50%, rgba(28, 27, 31, 0.1) 95%, rgba(28, 27, 31, 0.08) 100%); + border-radius: 0; + overflow: hidden; + pointer-events: none; + position: absolute; + transform: scale(0); + transition: opacity 0.3s transform 50ms cubic-bezier(0.2, 0, 0, 1); +} \ No newline at end of file diff --git a/components/base/styles/material3-dark.scss b/components/base/styles/material3-dark.scss new file mode 100644 index 0000000..c14a867 --- /dev/null +++ b/components/base/styles/material3-dark.scss @@ -0,0 +1,2 @@ +@import 'material3-dark-definition.scss'; +@import 'all.scss'; diff --git a/components/base/styles/material3.css b/components/base/styles/material3.css new file mode 100644 index 0000000..f060024 --- /dev/null +++ b/components/base/styles/material3.css @@ -0,0 +1,605 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap"); +:root { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 103, 80, 164; + --color-sf-primary-container: 234, 221, 255; + --color-sf-secondary: 98, 91, 113; + --color-sf-secondary-container: 232, 222, 248; + --color-sf-tertiary: 125, 82, 96; + --color-sf-tertiary-container: 255, 216, 228; + --color-sf-surface: 255, 255, 255; + --color-sf-surface-variant: 231, 224, 236; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 255, 255, 255; + --color-sf-on-primary-container: 33, 0, 94; + --color-sf-on-secondary: 255, 255, 255; + --color-sf-on-secondary-container: 30, 25, 43; + --color-sf-on-tertiary: 255, 255, 255; + --color-sf-on-tertiary-containe: 55, 11, 30; + --color-sf-on-surface: 28, 27, 31; + --color-sf-on-surface-variant: 73, 69, 78; + --color-sf-on-background: 28, 27, 31; + --color-sf-outline: 121, 116, 126; + --color-sf-outline-variant: 196, 199, 197; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 103, 80, 164; + --color-sf-inverse-surface: 49, 48, 51; + --color-sf-inverse-on-surface: 244, 239, 244; + --color-sf-inverse-primary: 208, 188, 255; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 179, 38, 30; + --color-sf-error-container: 249, 222, 220; + --color-sf-on-error: 255, 250, 250; + --color-sf-on-error-container: 65, 14, 11; + --color-sf-success: 32, 81, 7; + --color-sf-success-container: 209, 255, 186; + --color-sf-on-success: 244, 255, 239; + --color-sf-on-success-container: 13, 39, 0; + --color-sf-info: 1, 87, 155; + --color-sf-info-container: 233, 245, 255; + --color-sf-on-info: 250, 253, 255; + --color-sf-on-info-container: 0, 51, 91; + --color-sf-warning: 145, 76, 0; + --color-sf-warning-container: 254, 236, 222; + --color-sf-on-warning: 255, 255, 255; + --color-sf-on-warning-container: 47, 21, 0; + --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant); + --color-sf-shadow-focus-ring1: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(0, 0, 0); + --color-sf-diagram-palette-background: --color-sf-white; + --color-sf-success-text: 255, 255, 255; + --color-sf-warning-text: 255, 255, 255; + --color-sf-danger-text: 255, 255, 255; + --color-sf-info-text: 255, 255, 255; + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary-container); + --color-sf-secondary-bg-color: var(--color-sf-surface); +} + +.sf-dark-mode { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 208, 188, 255; + --color-sf-primary-container: 79, 55, 139; + --color-sf-secondary: 204, 194, 220; + --color-sf-secondary-container: 74, 68, 88; + --color-sf-tertiary: 239, 184, 200; + --color-sf-tertiary-container: 99, 59, 72; + --color-sf-surface: 28, 27, 31; + --color-sf-surface-variant: 73, 69, 79; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 55, 30, 115; + --color-sf-on-primary-container: 234, 221, 255; + --color-sf-on-secondary: 51, 45, 65; + --color-sf-on-secondary-container: 232, 222, 248; + --color-sf-on-tertiary: 73, 37, 50; + --color-sf-on-tertiary-containe: 255, 216, 228; + --color-sf-on-surface: 230, 225, 229; + --color-sf-on-surface-variant: 202, 196, 208; + --color-sf-on-background: 230, 225, 229; + --color-sf-outline: 147, 143, 153; + --color-sf-outline-variant: 68, 71, 70; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 208, 188, 255; + --color-sf-inverse-surface: 230, 225, 229; + --color-sf-inverse-on-surface: 49, 48, 51; + --color-sf-inverse-primary: 103, 80, 164; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 242, 184, 181; + --color-sf-error-container: 140, 29, 24; + --color-sf-on-error: 96, 20, 16; + --color-sf-on-error-container: 249, 222, 220; + --color-sf-success: 83, 202, 23; + --color-sf-success-container: 22, 62, 2; + --color-sf-on-success: 13, 39, 0; + --color-sf-on-success-container: 183, 250, 150; + --color-sf-info: 71, 172, 251; + --color-sf-info-container: 0, 67, 120; + --color-sf-on-info: 0, 51, 91; + --color-sf-on-info-container: 173, 219, 255; + --color-sf-warning: 245, 180, 130; + --color-sf-warning-container: 123, 65, 0; + --color-sf-on-warning: 99, 52, 0; + --color-sf-on-warning-container: 255, 220, 193; + --color-sf-spreadsheet-gridline: 231, 224, 236; + --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff; + --color-sf-success-text: 0, 0, 0; + --color-sf-warning-text: 0, 0, 0; + --color-sf-info-text: 0, 0, 0; + --color-sf-danger-text: 0, 0, 0; + --color-sf-diagram-palette-background: var(--color-sf-inverse-surface); + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary); +} + +.sf-control, +.sf-css, +.sf-error { + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 400; +} + +.sf-error { + color: rgba(var(--color-sf-error)); +} + +.sf-control, +.sf-control [class^=sf-], +.sf-control [class*=" sf-"] { + box-sizing: border-box; +} + +.sf-control:focus, +.sf-control *:focus { + outline: none; +} + +.sf-rtl { + direction: rtl; + text-align: right; +} + +.sf-overlay { + background-color: rgba(var(--color-sf-scrim), 0.5); + height: 100%; + opacity: 0.5; + pointer-events: none; + touch-action: none; + width: 100%; +} + +.sf-hidden { + display: none; +} + +.sf-blazor-hidden { + visibility: hidden; +} + +.sf-disabled { + background-image: none; + cursor: default; + opacity: 0.35; +} + +.sf-ul { + list-style-type: none; +} + +.sf-prevent-select { + user-select: none; +} + +.sf-warning { + color: rgba(var(--color-sf-warning)); +} + +.sf-success { + color: rgba(var(--color-sf-success)); +} + +.sf-information { + color: rgba(var(--color-sf-info)); +} + +.sf-block-touch { + touch-action: pinch-zoom; +} + +.sf-license { + color: #ff0; + text-decoration: none; +} + +.sf-license-banner { + position: absolute; + right: 10px; + top: 27%; + cursor: pointer; +} + +@keyframes SlideLeftOut { + from { + transform: translate(0, 0); + } + to { + transform: translate(-100%, 0); + } +} +@keyframes SlideLeftIn { + from { + transform: translate(-100%, 0); + } + to { + transform: translate(0, 0); + } +} +@keyframes SlideRightIn { + from { + transform: translate(100%, 0); + } + to { + transform: translate(0, 0); + } +} +@keyframes SlideRightOut { + from { + transform: translate(0, 0); + } + to { + transform: translate(100%, 0); + } +} +@keyframes SlideBottomIn { + from { + transform: translate(0, 100%); + } + to { + transform: translate(0, 0); + } +} +@keyframes SlideBottomOut { + from { + transform: translate(0, 0); + } + to { + transform: translate(0, 100%); + } +} +@keyframes SlideTopIn { + from { + transform: translate(0, -100%); + } + to { + transform: translate(0, 0); + } +} +@keyframes SlideTopOut { + from { + transform: translate(0, 0); + } + to { + transform: translate(0, -100%); + } +} +@keyframes SlideRight { + from { + width: 0; + } + to { + width: 100%; + } +} +@keyframes SlideLeft { + from { + width: 100%; + } + to { + width: 0; + } +} +@keyframes SlideDown { + from { + height: 0; + } + to { + height: 100%; + } +} +@keyframes SlideUp { + from { + height: 100%; + } + to { + height: 0; + } +} +@keyframes FadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes FadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@keyframes ZoomIn { + from { + transform: translate(0, 0) scale(0); + } + to { + transform: translate(0, 0) scale(1); + } +} +@keyframes ZoomOut { + from { + transform: translate(0, 0) scale(1); + } + to { + transform: translate(0, 0) scale(0); + } +} +@keyframes FadeZoomIn { + from { + opacity: 0; + transform: scale(0); + } + to { + opacity: 1; + transform: scale(1); + } +} +@keyframes FadeZoomOut { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0); + } +} +@keyframes FlipRightDownIn { + from { + transform: perspective(400px) rotateY(-180deg); + transform-origin: right center; + transform-style: preserve-3d; + } + to { + transform: rotateY(0deg); + transform-origin: right center; + transform-style: preserve-3d; + } +} +@keyframes FlipRightDownOut { + from { + transform: perspective(400px) rotateY(0deg); + transform-origin: right center; + transform-style: preserve-3d; + } + to { + transform: rotateY(-180deg); + transform-origin: right center; + transform-style: preserve-3d; + } +} +@keyframes FlipRightUpIn { + from { + transform: perspective(400px) rotateY(135deg); + transform-origin: right center; + transform-style: preserve-3d; + } + to { + transform: rotateY(0deg); + transform-origin: right center; + transform-style: preserve-3d; + } +} +@keyframes FlipRightUpOut { + from { + transform: perspective(400px) rotateY(0deg); + transform-origin: right center; + transform-style: preserve-3d; + } + to { + transform: rotateY(135deg); + transform-origin: right center; + transform-style: preserve-3d; + } +} +@keyframes FlipLeftDownIn { + from { + transform: perspective(400px) rotateY(-180deg); + transform-origin: left center; + transform-style: preserve-3d; + } + to { + transform: rotateY(0deg); + transform-origin: left center; + transform-style: preserve-3d; + } +} +@keyframes FlipLeftDownOut { + from { + transform: perspective(400px) rotateY(0deg); + transform-origin: left center; + transform-style: preserve-3d; + } + to { + transform: rotateY(135deg); + transform-origin: left center; + transform-style: preserve-3d; + } +} +@keyframes FlipLeftUpIn { + from { + transform: perspective(400px) rotateY(-135deg); + transform-origin: left center; + transform-style: preserve-3d; + } + to { + transform: rotateY(0deg); + transform-origin: left center; + transform-style: preserve-3d; + } +} +@keyframes FlipLeftUpOut { + from { + transform: perspective(400px) rotateY(0deg); + transform-origin: left center; + transform-style: preserve-3d; + } + to { + transform: rotateY(135deg) perspective(200px); + transform-origin: left center; + transform-style: preserve-3d; + } +} +@keyframes FlipYLeftIn { + from { + opacity: 0; + transform: perspective(400px) rotateY(180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateY(90deg); + } + to { + opacity: 1; + transform: rotateY(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipYLeftOut { + from { + opacity: 1; + transform: perspective(400px) rotateY(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateY(90deg); + } + 75% { + transform: perspective(850px) rotateY(125deg); + } + to { + opacity: 0; + transform: rotateY(180deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipYRightIn { + from { + opacity: 0; + transform: perspective(400px) rotateY(-180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateY(-90deg); + } + to { + opacity: 1; + transform: rotateY(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipYRightOut { + from { + opacity: 1; + transform: perspective(400px) rotateY(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateY(-90deg); + } + to { + opacity: 0; + transform: rotateY(-180deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipXDownIn { + from { + opacity: 0; + transform: perspective(400px) rotateX(180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateX(90deg); + } + to { + opacity: 1; + transform: rotateX(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipXDownOut { + from { + opacity: 1; + transform: perspective(400px) rotateX(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateX(90deg); + } + 75% { + transform: perspective(850px) rotateX(125deg); + } + to { + opacity: 0; + transform: rotateX(180deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipXUpIn { + from { + opacity: 0; + transform: perspective(400px) rotateX(-180deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateX(-90deg); + } + to { + opacity: 1; + transform: rotateX(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +@keyframes FlipXUpOut { + from { + opacity: 1; + transform: perspective(400px) rotateX(0deg); + transform-origin: center center; + transform-style: preserve-3d; + } + 50% { + transform: perspective(700px) rotateX(-90deg); + } + to { + opacity: 0; + transform: rotateX(-180deg); + transform-origin: center center; + transform-style: preserve-3d; + } +} +.sf-ripple-wrapper { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + border-radius: inherit; + pointer-events: none; +} + +.sf-ripple-element { + background: linear-gradient(90deg, rgba(28, 27, 31, 0.08) 0%, rgba(28, 27, 31, 0.1) 5%, rgba(28, 27, 31, 0.1) 50%, rgba(28, 27, 31, 0.1) 50%, rgba(28, 27, 31, 0.1) 95%, rgba(28, 27, 31, 0.08) 100%); + border-radius: 0; + overflow: hidden; + pointer-events: none; + position: absolute; + transform: scale(0); + transition: opacity 0.3s transform 50ms cubic-bezier(0.2, 0, 0, 1); +} \ No newline at end of file diff --git a/components/base/styles/material3.scss b/components/base/styles/material3.scss new file mode 100644 index 0000000..9eeb62e --- /dev/null +++ b/components/base/styles/material3.scss @@ -0,0 +1,2 @@ +@import 'material3-definition.scss'; +@import 'all.scss'; diff --git a/components/buttons/README.md b/components/buttons/README.md new file mode 100644 index 0000000..708342e --- /dev/null +++ b/components/buttons/README.md @@ -0,0 +1,156 @@ +# React Buttons Components + +## What's Included in the React Button Package + +The React Button package includes the following list of components. + +### React Button + +The Button component is designed to create highly customizable and interactive button elements with a variety of styling and functional options. It allows for tailored interactions through different configurations such as size, color, icon positioning, and toggle capability. + +Explore the demo [here](https://react.syncfusion.com/button). + +**Key features** + +- **Color Variants:** Style buttons with distinct color options like 'warning', 'success', 'danger', and 'info' to fit your application's theme. + +- **Icon Support:** Integrate SVG icons within buttons for enhanced visual cues. Configure the icon's position to be left, right, top, or bottom relative to button text. + +- **Toggle Functionality:** Use the button as a toggle to maintain and represent states within your application, enabling buttons to switch between active and inactive states upon user interaction. + +- **Size Options:** Adjust button dimensions with size variants such as 'small', 'medium' and 'bigger', allowing for flexibility in different UI contexts. + +- **Variant Styles:** Choose from various button styles like 'outlind', 'filled', and 'flat' to seamlessly integrate with your design language. + +- **Selection Management:** Include prop configurations to set initial states, making it simple to handle selection states, especially useful for toggle buttons. + +### React Checkbox + +The Checkbox component offers a flexible and user-friendly way to allow users to make binary selections. It supports various states and configurations to accommodate different use cases in applications. + +Explore the demo [here](https://react.syncfusion.com/checkbox). + +**Key features** + +- **Selection States:** The Checkbox component can be configured to be in checked, unchecked, or indeterminate states. This provides a visual cue for users to understand the current selection state. + +- **Label Support:** Display informative text alongside the checkbox to clearly convey its purpose to users. The label can be positioned either before or after the checkbox element based on UI preferences. + +- **Label Positioning:** Configure the label placement with the `labelPlacement` prop, choosing whether the label appears before or after the Checkbox. + +### React Chip + +The Chip component represents information in a compact form, such as entity attribute, text, or action. It provides a versatile way to display content in a contained, interactive element. + +Explore the demo [here](https://react.syncfusion.com/chip). + +**Key features** + +- **Variants:** Display chips with different visual styles using either 'filled' or 'outlined' variants to match your design requirements. + +- **Colors:** Customize the appearance with predefined color options including primary, info, danger, success, and warning. + +- **Icons and Avatars:** Enhance visual representation with leading icons, trailing icons, or avatars to provide additional context. + +### React ChipList + +The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form. It provides a flexible way to manage and interact with a group of chip elements. + +Explore the demo [here](https://react.syncfusion.com/chiplist). + +**Key features** + +- **Selection Modes:** Supports three selection types - 'single', 'multiple', and 'none' to control how users can select chips. + +- **Data Binding:** Easily populate the ChipList with an array of strings, numbers, or custom chip configurations. + +- **Customizable Chips:** Each chip can be individually styled with avatars, leading icons, trailing icons, and different variants. + +- **Removable Chips:** Configure chips to be removable with built-in delete event handling. + +- **Controlled & Uncontrolled Modes:** Supports both controlled and uncontrolled component patterns for selection and deletion. + +### React Floating Action Button + +The Floating Action Button (FAB) component provides a prominent primary action within an application interface, positioned for high visibility and customizable with various styling options. + +Explore the demo [here](https://react.syncfusion.com/floating-action-button). + +**Key features** + +- **Color Variants:** Customizable color options such as 'warning', 'success', 'danger', and 'info' are available to help the FAB blend seamlessly with your application's color scheme. + +- **Icon Customization:** Integrate SVG icons within buttons for enhanced visual appeal. Control icon placement relative to text with configurable options for positioning. + +- **Visibility Control:** Easily manage the visibility of the FAB using the `isVisible` prop, deciding if it should be displayed based on application logic. + +- **Positioning:** The FAB can be positioned flexibly with options like top-left, top-right, bottom-left, and bottom-right to fit different design requirements. + +- **Size Options:** Modify the size of the FAB with options for 'small', 'medium' and 'bigger', accommodating different interface contexts. + +- **Toggle Functionality:** Activate toggle behavior for the FAB to allow it to switch states on each user interaction, which can be useful for certain UI scenarios. + +### React RadioButton + +The RadioButton component enables users to select a single option from a group, offering a clear circular interface for making selections. It is a simple and efficient way to present mutually exclusive choices to users. + +Explore the demo [here](https://react.syncfusion.com/radio-button). + +**Key features** + +- **Selection State:** Easily configure the RadioButton to be in a checked or unchecked state, indicating selected or unselected options within a group. + +- **Label Customization:** The RadioButton can be accompanied by a text label to describe its function, which helps users understand the purpose of the radio selection. + +- **Label Positioning:** Flexibly position the label relative to the RadioButton with options available for placing it before or after the button, enhancing UI layout consistency. + +- **Form Integration:** The value attribute of the RadioButton can be included as part of form data submitted to the server, facilitating efficient data processing. + +### React Switch + +The Switch component is a toggle interface offering a binary decision between on and off states, visually represented with an optional label for clarity. Its intuitive design makes it ideal for user interactions requiring a straightforward choice. + +Explore the demo [here](https://react.syncfusion.com/switch). + +**Key features** + +- **State Control:** Easily configure the switch to be in a checked (on) or unchecked (off) state, providing an immediate visual cue of its current position to users. + +- **Label Customization:** Customize the on and off labels to provide additional context for users, clarifying what each state signifies within the application's workflow. + +- **Size Options:** Adapt the size of the switch to fit various UI designs with available size options such as 'small', 'medium' and 'bigger', ensuring seamless integration with different interfaces. + +- **Form Integration:** Utilize the switch within forms by setting name and value attributes, ensuring that user selections are included in form submissions for backend processing. + + +

+Trusted by the world's leading companies + + Syncfusion logo + +

+ +## Setup + +To install `buttons` and its dependent packages, use the following command, + +```sh +npm install @syncfusion/react-buttons +``` + +## Support + +Product support is available through following mediums. + +* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* Live chat + +## License and copyright + +> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). + +> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. + +See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. + +© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. diff --git a/components/buttons/button.d.ts b/components/buttons/button.d.ts new file mode 100644 index 0000000..7cd5bc5 --- /dev/null +++ b/components/buttons/button.d.ts @@ -0,0 +1,4 @@ +/** + * button + */ +export * from './src/button/index'; diff --git a/components/buttons/button.js b/components/buttons/button.js new file mode 100644 index 0000000..7cd5bc5 --- /dev/null +++ b/components/buttons/button.js @@ -0,0 +1,4 @@ +/** + * button + */ +export * from './src/button/index'; diff --git a/components/buttons/check-box.d.ts b/components/buttons/check-box.d.ts new file mode 100644 index 0000000..3560ec4 --- /dev/null +++ b/components/buttons/check-box.d.ts @@ -0,0 +1,4 @@ +/** + * check-box + */ +export * from './src/check-box/index'; diff --git a/components/buttons/check-box.js b/components/buttons/check-box.js new file mode 100644 index 0000000..3560ec4 --- /dev/null +++ b/components/buttons/check-box.js @@ -0,0 +1,4 @@ +/** + * check-box + */ +export * from './src/check-box/index'; diff --git a/components/buttons/chip.d.ts b/components/buttons/chip.d.ts new file mode 100644 index 0000000..0af2b0c --- /dev/null +++ b/components/buttons/chip.d.ts @@ -0,0 +1,4 @@ +/** + * chip + */ +export * from './src/chip/index'; diff --git a/components/buttons/chip.js b/components/buttons/chip.js new file mode 100644 index 0000000..0af2b0c --- /dev/null +++ b/components/buttons/chip.js @@ -0,0 +1,4 @@ +/** + * chip + */ +export * from './src/chip/index'; diff --git a/components/buttons/chipList.d.ts b/components/buttons/chipList.d.ts new file mode 100644 index 0000000..3eb2e10 --- /dev/null +++ b/components/buttons/chipList.d.ts @@ -0,0 +1,4 @@ +/** + * chipList + */ +export * from './src/chipList/index'; diff --git a/components/buttons/chipList.js b/components/buttons/chipList.js new file mode 100644 index 0000000..3eb2e10 --- /dev/null +++ b/components/buttons/chipList.js @@ -0,0 +1,4 @@ +/** + * chipList + */ +export * from './src/chipList/index'; diff --git a/components/buttons/floating-action-button.d.ts b/components/buttons/floating-action-button.d.ts new file mode 100644 index 0000000..bdd6856 --- /dev/null +++ b/components/buttons/floating-action-button.d.ts @@ -0,0 +1,4 @@ +/** + * floating-action-button + */ +export * from './src/floating-action-button/index'; diff --git a/components/buttons/floating-action-button.js b/components/buttons/floating-action-button.js new file mode 100644 index 0000000..bdd6856 --- /dev/null +++ b/components/buttons/floating-action-button.js @@ -0,0 +1,4 @@ +/** + * floating-action-button + */ +export * from './src/floating-action-button/index'; diff --git a/components/buttons/index.d.ts b/components/buttons/index.d.ts new file mode 100644 index 0000000..2c4eda4 --- /dev/null +++ b/components/buttons/index.d.ts @@ -0,0 +1,4 @@ +/** + * index + */ +export * from './src/index'; diff --git a/components/buttons/index.js b/components/buttons/index.js new file mode 100644 index 0000000..2c4eda4 --- /dev/null +++ b/components/buttons/index.js @@ -0,0 +1,4 @@ +/** + * index + */ +export * from './src/index'; diff --git a/components/buttons/license b/components/buttons/license new file mode 100644 index 0000000..af45e1a --- /dev/null +++ b/components/buttons/license @@ -0,0 +1,13 @@ +Syncfusion® License + +Copyright (c) Syncfusion®, Inc. All rights reserved. + +Essential® JS 2 library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License. + +To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®’s terms and conditions. + +If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options. + +You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions. + +The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf diff --git a/components/buttons/package.json b/components/buttons/package.json new file mode 100644 index 0000000..9d39c81 --- /dev/null +++ b/components/buttons/package.json @@ -0,0 +1,50 @@ +{ + "name": "@syncfusion/react-buttons", + "version": "29.1.33", + "description": "A package of feature-rich Pure React components such as Button, CheckBox, RadioButton and Switch.", + "author": "Syncfusion Inc.", + "license": "SEE LICENSE IN license", + "keywords": [ + "syncfusion", + "web-components", + "react", + "syncfusion-react", + "react-buttons", + "button", + "react button", + "checkbox", + "react checkbox", + "checkboxes", + "radio button", + "radiobutton", + "radiobuttons", + "react radiobutton", + "switch", + "react switch", + "primary button", + "flat button", + "round button", + "icon button", + "togglebutton", + "toggle button", + "form control", + "form controls", + "input", + "floating action button", + "floating button", + "fab" + ], + "repository": { + "type": "git", + "url": "https://github.com/syncfusion/react-ui-components.git" + }, + "homepage": "https://www.syncfusion.com/react-ui-components", + "module": "./index.js", + "readme": "README.md", + "dependencies": { + "@syncfusion/react-base": "~29.1.33" + }, + "devDependencies": {}, + "typings": "index.d.ts", + "sideEffects": false +} \ No newline at end of file diff --git a/components/buttons/radio-button.d.ts b/components/buttons/radio-button.d.ts new file mode 100644 index 0000000..4b0ca7c --- /dev/null +++ b/components/buttons/radio-button.d.ts @@ -0,0 +1,4 @@ +/** + * radio-button + */ +export * from './src/radio-button/index'; diff --git a/components/buttons/radio-button.js b/components/buttons/radio-button.js new file mode 100644 index 0000000..4b0ca7c --- /dev/null +++ b/components/buttons/radio-button.js @@ -0,0 +1,4 @@ +/** + * radio-button + */ +export * from './src/radio-button/index'; diff --git a/components/buttons/src/button/button.d.ts b/components/buttons/src/button/button.d.ts new file mode 100644 index 0000000..a171c35 --- /dev/null +++ b/components/buttons/src/button/button.d.ts @@ -0,0 +1,171 @@ +import { ButtonHTMLAttributes } from 'react'; +import * as React from 'react'; +/** + * Defines the label position of the component. + * ```props + * After :- When the label is positioned After, it appears to the right of the component. + * Before :- When the label is positioned Before, it appears to the left of the component. + * ``` + */ +export type LabelPlacement = 'After' | 'Before'; +/** + * Specifies the position of an icon relative to text content in a button component. + */ +export declare enum IconPosition { + /** + * Positions the icon to the left of text content in a button. + */ + Left = "Left", + /** + * Positions the icon to the right of text content in a button. + */ + Right = "Right", + /** + * Positions the icon above text content in a button. + */ + Top = "Top", + /** + * Positions the icon below text content in a button. + */ + Bottom = "Bottom" +} +/** + * Specifies the type of Color to display the Button with distinctive colors. + */ +export declare enum Color { + /** + * The button is displayed with colors that indicate success. + */ + Success = "Success", + /** + * The button is displayed with colors that indicate information. + */ + Info = "Info", + /** + * The button is displayed with colors that indicate a warning. + */ + Warning = "Warning", + /** + * The button is displayed with colors that indicate danger. + */ + Danger = "Danger", + /** + * The button is displayed with colors that indicate it is a primary button. + */ + Primary = "Primary", + /** + * The button is displayed with colors that indicate it is a secondary button. + */ + Secondary = "Secondary" +} +/** + * Defines the visual style variants for a button component, controlling background, border, and text appearance. + */ +export declare enum Variant { + /** + * Displays a solid background color with contrasting text. + */ + Filled = "Filled", + /** + * Displays a border with a transparent background and colored text. + */ + Outlined = "Outlined", + /** + * Displays only colored text without background and border. + */ + Flat = "Flat" +} +/** + * Specifies the size of the Button for layout purposes. + */ +export declare enum Size { + /** + * The button is displayed in a smaller size. + */ + Small = "Small", + /** + * The button is displayed in a medium size. + */ + Medium = "Medium", + /** + * The button is displayed in a larger size. + */ + Large = "Large" +} +/** + * Button component properties interface. + * Extends standard HTMLButtonElement attributes. + */ +export interface ButtonProps { + /** + * Specifies the position of the icon relative to the button text. Options include placing the icon at the left, right, top, or bottom of the button content. + * + * @default IconPosition.Left + */ + iconPosition?: IconPosition; + /** + * Defines an icon for the button, which can either be a CSS class name for custom styling or an SVG element for rendering. + * + * @default - + */ + icon?: string | React.ReactNode; + /** + * Indicates whether the button functions as a toggle button. If true, the button can switch between active and inactive states each time it is clicked. + * + * @default false + */ + togglable?: boolean; + /** + * Sets the initial selected state for a toggle button. When true, the button is initially rendered in a 'selected' or 'active' state, otherwise it's inactive. + * + * @default false + */ + selected?: boolean; + /** + * Specifies the Color style of the button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Danger', and 'Info'. + * + * @default Color.Primary + */ + color?: Color; + /** + * Specifies the variant style of the button. Options include 'Outlined', 'Filled', and 'Flat'. + * + * @default Variant.Filled + */ + variant?: Variant; + /** + * Specifies the size style of the button. Options include 'Small', 'Medium' and 'Large'. + * + * @default Size.Medium + */ + size?: Size; + /** + * Styles the button to visually appear as a hyperlink. When true, the button text is underlined. + * + * @default false + */ + isLink?: boolean; +} +/** + * Interface representing the Button component methods. + */ +export interface IButton extends ButtonProps { + /** + * This is button component element. + * + * @private + * @default null + */ + element?: HTMLElement | null; +} +type IButtonProps = IButton & ButtonHTMLAttributes; +/** + * The Button component is a versatile element for creating styled buttons with functionalities like toggling, icon positioning, and HTML attribute support, enhancing interaction based on its configuration and state. + * + * ```typescript + * + * ``` + */ +export declare const Button: React.ForwardRefExoticComponent>; +declare const _default: React.NamedExoticComponent & React.RefAttributes>; +export default _default; diff --git a/components/buttons/src/button/button.js b/components/buttons/src/button/button.js new file mode 100644 index 0000000..5ba50e2 --- /dev/null +++ b/components/buttons/src/button/button.js @@ -0,0 +1,146 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react'; +import { preRender, useProviderContext, useRippleEffect } from '@syncfusion/react-base'; +import * as React from 'react'; +/** + * Specifies the position of an icon relative to text content in a button component. + */ +export var IconPosition; +(function (IconPosition) { + /** + * Positions the icon to the left of text content in a button. + */ + IconPosition["Left"] = "Left"; + /** + * Positions the icon to the right of text content in a button. + */ + IconPosition["Right"] = "Right"; + /** + * Positions the icon above text content in a button. + */ + IconPosition["Top"] = "Top"; + /** + * Positions the icon below text content in a button. + */ + IconPosition["Bottom"] = "Bottom"; +})(IconPosition || (IconPosition = {})); +/** + * Specifies the type of Color to display the Button with distinctive colors. + */ +export var Color; +(function (Color) { + /** + * The button is displayed with colors that indicate success. + */ + Color["Success"] = "Success"; + /** + * The button is displayed with colors that indicate information. + */ + Color["Info"] = "Info"; + /** + * The button is displayed with colors that indicate a warning. + */ + Color["Warning"] = "Warning"; + /** + * The button is displayed with colors that indicate danger. + */ + Color["Danger"] = "Danger"; + /** + * The button is displayed with colors that indicate it is a primary button. + */ + Color["Primary"] = "Primary"; + /** + * The button is displayed with colors that indicate it is a secondary button. + */ + Color["Secondary"] = "Secondary"; +})(Color || (Color = {})); +/** + * Defines the visual style variants for a button component, controlling background, border, and text appearance. + */ +export var Variant; +(function (Variant) { + /** + * Displays a solid background color with contrasting text. + */ + Variant["Filled"] = "Filled"; + /** + * Displays a border with a transparent background and colored text. + */ + Variant["Outlined"] = "Outlined"; + /** + * Displays only colored text without background and border. + */ + Variant["Flat"] = "Flat"; +})(Variant || (Variant = {})); +/** + * Specifies the size of the Button for layout purposes. + */ +export var Size; +(function (Size) { + /** + * The button is displayed in a smaller size. + */ + Size["Small"] = "Small"; + /** + * The button is displayed in a medium size. + */ + Size["Medium"] = "Medium"; + /** + * The button is displayed in a larger size. + */ + Size["Large"] = "Large"; +})(Size || (Size = {})); +/** + * The Button component is a versatile element for creating styled buttons with functionalities like toggling, icon positioning, and HTML attribute support, enhancing interaction based on its configuration and state. + * + * ```typescript + * + * ``` + */ +export const Button = forwardRef((props, ref) => { + const buttonRef = useRef(null); + const { disabled = false, iconPosition = IconPosition.Left, icon, className = '', togglable = false, selected, color = Color.Primary, variant = Variant.Filled, size, isLink = false, onClick, children, ...domProps } = props; + const [isActive, setIsActive] = useState(selected ?? false); + const { dir, ripple } = useProviderContext(); + const { rippleMouseDown, Ripple } = useRippleEffect(ripple, { duration: 500 }); + const publicAPI = { + iconPosition, + icon, + togglable, + selected, + color, + variant, + size, + isLink + }; + const handleButtonClick = (event) => { + if (togglable && selected === undefined) { + setIsActive((prevState) => !prevState); + } + onClick?.(event); + }; + useEffect(() => { + if (selected !== undefined) { + setIsActive(selected); + } + }, [selected]); + useEffect(() => { + preRender('btn'); + }, []); + useImperativeHandle(ref, () => ({ + ...publicAPI, + element: buttonRef.current + }), [publicAPI]); + const classNames = [ + 'sf-btn', + className, + dir === 'rtl' ? 'sf-rtl' : '', + isActive ? 'sf-active' : '', + isLink ? 'sf-link' : '', + color && color.toLowerCase() !== 'secondary' ? `sf-${color.toLowerCase()}` : '', + variant && color.toLowerCase() !== 'secondary' ? `sf-${variant.toLowerCase()}` : '', + size && size.toLowerCase() !== 'medium' ? `sf-${size.toLowerCase()}` : '' + ].filter(Boolean).join(' '); + return (_jsxs("button", { ref: buttonRef, type: 'button', className: classNames, onClick: handleButtonClick, onMouseDown: rippleMouseDown, disabled: disabled, ...domProps, children: [!children && (_jsx("span", { className: `sf-btn-icon ${typeof icon === 'string' ? icon : ''}`, children: typeof icon !== 'string' && icon })), children && icon && (iconPosition === 'Left' || iconPosition === 'Top') && (_jsx("span", { className: `sf-btn-icon ${typeof icon === 'string' ? icon : ''} sf-icon-${iconPosition.toLowerCase()}`, children: typeof icon !== 'string' && icon })), children, children && icon && (iconPosition === 'Right' || iconPosition === 'Bottom') && (_jsx("span", { className: `sf-btn-icon ${typeof icon === 'string' ? icon : ''} sf-icon-${iconPosition.toLowerCase()}`, children: typeof icon !== 'string' && icon })), ripple && _jsx(Ripple, {})] })); +}); +export default React.memo(Button); diff --git a/components/buttons/src/button/index.d.ts b/components/buttons/src/button/index.d.ts new file mode 100644 index 0000000..1c9f264 --- /dev/null +++ b/components/buttons/src/button/index.d.ts @@ -0,0 +1,4 @@ +/** + * Button modules + */ +export * from './button'; diff --git a/components/buttons/src/button/index.js b/components/buttons/src/button/index.js new file mode 100644 index 0000000..1c9f264 --- /dev/null +++ b/components/buttons/src/button/index.js @@ -0,0 +1,4 @@ +/** + * Button modules + */ +export * from './button'; diff --git a/components/buttons/src/check-box/check-box.d.ts b/components/buttons/src/check-box/check-box.d.ts new file mode 100644 index 0000000..27725c1 --- /dev/null +++ b/components/buttons/src/check-box/check-box.d.ts @@ -0,0 +1,74 @@ +import { InputHTMLAttributes, ChangeEvent } from 'react'; +import { LabelPlacement } from '../button/button'; +/** + * Properties interface for the CheckBox component + * + */ +export interface CheckBoxProps { + /** + * Specifies if the CheckBox is in an `indeterminate` state, which visually presents it as neither checked nor unchecked; setting this to `true` will make the CheckBox appear in an indeterminate state. + * + * @default false + */ + indeterminate?: boolean; + /** + * Defines the text label for the Checkbox component, helping users understand its purpose. + * + * @default - + */ + label?: string; + /** + * Specifies the position of the label relative to the CheckBox. It determines whether the label appears before or after the checkbox element in the UI. + * + * @default 'After' + */ + labelPlacement?: LabelPlacement; + /** + * Specifies a value that indicates whether the CheckBox is `checked` or not. When set to `true`, the CheckBox will be in `checked` state. + * + * @default false + */ + checked?: boolean; + /** + * Defines `value` attribute for the CheckBox. It is a form data passed to the server when submitting the form. + * + * + * @default - + */ + value?: string; + /** + * Triggers when the CheckBox state has been changed by user interaction, allowing custom logic to be executed in response to the state change. + * + * @event change + */ + onChange?: (args: ChangeEvent) => void; +} +/** + * Interface to define the structure of the CheckBox component reference instance + * + */ +export interface ICheckBox extends CheckBoxProps { + /** + * This is checkbox component element. + * + * @private + * @default null + */ + element?: HTMLElement | null; +} +type ICheckBoxProps = ICheckBox & InputHTMLAttributes; +/** + * The CheckBox component allows users to select one or multiple options from a list, providing a visual representation of a binary choice with states like checked, unchecked, or indeterminate. + * + * ```typescript + * + * ``` + */ +export declare const CheckBox: React.ForwardRefExoticComponent>; +export default CheckBox; +interface CSSCheckBoxProps { + className?: string; + checked?: boolean; + label?: string; +} +export declare const CSSCheckBox: React.FC; diff --git a/components/buttons/src/check-box/check-box.js b/components/buttons/src/check-box/check-box.js new file mode 100644 index 0000000..9528931 --- /dev/null +++ b/components/buttons/src/check-box/check-box.js @@ -0,0 +1,125 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { useState, useEffect, useCallback, useImperativeHandle, useRef, forwardRef } from 'react'; +import { preRender, useProviderContext, SvgIcon, useRippleEffect } from '@syncfusion/react-base'; +const CHECK = 'sf-check'; +const DISABLED = 'sf-checkbox-disabled'; +const FRAME = 'sf-frame'; +const INDETERMINATE = 'sf-stop'; +const LABEL = 'sf-label'; +const WRAPPER = 'sf-checkbox-wrapper'; +const CheckBoxClass = 'sf-control sf-checkbox sf-lib'; +/** + * The CheckBox component allows users to select one or multiple options from a list, providing a visual representation of a binary choice with states like checked, unchecked, or indeterminate. + * + * ```typescript + * + * ``` + */ +export const CheckBox = forwardRef((props, ref) => { + const { onChange, checked, className = '', disabled = false, indeterminate = false, labelPlacement = 'After', name = '', value = '', ...domProps } = props; + const isControlled = checked !== undefined; + const [checkedState, setCheckedState] = useState(() => { + if (isControlled) { + return checked; + } + return domProps.defaultChecked || false; + }); + const [isIndeterminate, setIsIndeterminate] = useState(indeterminate); + const [isFocused, setIsFocused] = useState(false); + const [storedLabel, setStoredLabel] = useState(props.label ?? ''); + const [storedLabelPosition, setStoredLabelPosition] = useState(labelPlacement ?? 'After'); + const inputRef = useRef(null); + const wrapperRef = useRef(null); + const rippleContainerRef = useRef(null); + const { dir, ripple } = useProviderContext(); + const { rippleMouseDown, Ripple } = useRippleEffect(ripple, { isCenterRipple: true }); + const checkIcon = 'M23.8284 3.75L8.5 19.0784L0.17157 10.75L3 7.92157L8.5 13.4216L21 0.92157L23.8284 3.75Z'; + const indeterminateIcon = 'M0.5 0.5H17.5V3.5H0.5V0.5Z'; + const publicAPI = { + checked, + indeterminate, + value + }; + useImperativeHandle(ref, () => ({ + ...publicAPI, + element: inputRef.current + }), [publicAPI]); + useEffect(() => { + if (isControlled) { + setCheckedState(!!checked); + } + }, [checked, isControlled]); + useEffect(() => { + setStoredLabel(props.label ?? ''); + setStoredLabelPosition(labelPlacement ?? 'After'); + }, [props.label, labelPlacement]); + useEffect(() => { + preRender('checkbox'); + }, []); + useEffect(() => { + setIsIndeterminate(indeterminate); + }, [indeterminate]); + const handleStateChange = useCallback((event) => { + const newChecked = event.target.checked; + setIsIndeterminate(false); + if (!isControlled) { + setCheckedState(newChecked); + } + onChange?.(event); + }, [onChange, isControlled]); + const handleFocus = () => { + setIsFocused(true); + }; + const handleBlur = () => { + setIsFocused(false); + }; + const handleMouseDown = useCallback((e) => { + if (ripple && rippleContainerRef.current && rippleMouseDown) { + const syntheticEvent = { + ...e, + currentTarget: rippleContainerRef.current, + target: rippleContainerRef.current, + preventDefault: e.preventDefault, + stopPropagation: e.stopPropagation + }; + rippleMouseDown(syntheticEvent); + } + }, [ripple, rippleMouseDown]); + const wrapperClass = [ + WRAPPER, + className, + disabled ? DISABLED : '', + isFocused ? 'sf-focus' : '', + !disabled && dir === 'rtl' ? 'sf-rtl' : '' + ].filter(Boolean).join(' '); + const renderIcons = () => (_jsxs("span", { className: `sf-icons ${FRAME} ${isIndeterminate ? INDETERMINATE : checkedState ? CHECK : ''}`, children: [isIndeterminate && (_jsx(SvgIcon, { width: "12", height: "12", viewBox: "2 0 16 4", d: indeterminateIcon, fill: "currentColor" })), checkedState && !isIndeterminate && (_jsx(SvgIcon, { width: "14", height: "14", viewBox: "0 0 25 20", d: checkIcon, fill: "currentColor" }))] })); + const renderRipple = () => (_jsx("span", { ref: rippleContainerRef, className: `sf-ripple-container ${checkedState ? 'sf-ripple-check' : ''}`, children: ripple && _jsx(Ripple, {}) })); + const renderLabel = (label) => (_jsx("span", { className: LABEL, children: label })); + return (_jsx("div", { ref: wrapperRef, className: wrapperClass, "aria-disabled": disabled ? 'true' : 'false', onMouseDown: handleMouseDown, children: _jsxs("label", { children: [_jsx("input", { ref: inputRef, className: `${CheckBoxClass} ${className}`, type: "checkbox", name: name, value: value, checked: isControlled ? checked : checkedState, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, onChange: handleStateChange, ...domProps }), storedLabelPosition === 'Before' && renderLabel(storedLabel), storedLabelPosition === 'After' && renderRipple(), renderIcons(), storedLabelPosition === 'Before' && renderRipple(), storedLabelPosition === 'After' && renderLabel(storedLabel)] }) })); +}); +CheckBox.displayName = 'CheckBox'; +export default CheckBox; +const createCSSCheckBox = (props) => { + const { className = '', checked = false, label = '', ...domProps } = props; + const { dir, ripple } = useProviderContext(); + const checkIcon = 'M23.8284 3.75L8.5 19.0784L0.17157 10.75L3 7.92157L8.5 13.4216L21 0.92157L23.8284 3.75Z'; + const rippleContainerRef = useRef(null); + const { rippleMouseDown, Ripple } = useRippleEffect(ripple, { isCenterRipple: true }); + const handleMouseDown = useCallback((e) => { + if (ripple && rippleContainerRef.current && rippleMouseDown) { + const syntheticEvent = { + ...e, + currentTarget: rippleContainerRef.current, + target: rippleContainerRef.current, + preventDefault: e.preventDefault, + stopPropagation: e.stopPropagation + }; + rippleMouseDown(syntheticEvent); + } + }, [ripple, rippleMouseDown]); + return (_jsxs("div", { className: `sf-checkbox-wrapper sf-css ${className} ${(dir === 'rtl') ? 'sf-rtl' : ''}`, onMouseDown: handleMouseDown, ...domProps, children: [_jsx("span", { ref: rippleContainerRef, className: `sf-ripple-container ${checked ? 'sf-ripple-check' : ''}`, children: ripple && _jsx(Ripple, {}) }), _jsx("span", { className: `sf-frame e-icons ${checked ? 'sf-check' : ''}`, children: checked && (_jsx(SvgIcon, { width: '10', height: '10', viewBox: '0 0 20 26', d: checkIcon, fill: "currentColor" })) }), label && (_jsx("span", { className: LABEL, children: label }))] })); +}; +// Component definition for CheckBox using create function +export const CSSCheckBox = (props) => { + return createCSSCheckBox(props); +}; diff --git a/components/buttons/src/check-box/index.d.ts b/components/buttons/src/check-box/index.d.ts new file mode 100644 index 0000000..5d25ea5 --- /dev/null +++ b/components/buttons/src/check-box/index.d.ts @@ -0,0 +1,4 @@ +/** + * CheckBox modules + */ +export * from './check-box'; diff --git a/components/buttons/src/check-box/index.js b/components/buttons/src/check-box/index.js new file mode 100644 index 0000000..5d25ea5 --- /dev/null +++ b/components/buttons/src/check-box/index.js @@ -0,0 +1,4 @@ +/** + * CheckBox modules + */ +export * from './check-box'; diff --git a/components/buttons/src/chip/chip.d.ts b/components/buttons/src/chip/chip.d.ts new file mode 100644 index 0000000..247cb2e --- /dev/null +++ b/components/buttons/src/chip/chip.d.ts @@ -0,0 +1,128 @@ +import { HTMLAttributes } from 'react'; +import * as React from 'react'; +/** + * Represents the variant types for the Chip component. + */ +export type ChipVariant = 'filled' | 'outlined'; +/** + * Represents the color types for the Chip component. + */ +export type ChipColor = 'primary' | 'info' | 'danger' | 'success' | 'warning'; +/** + * Represents the model for the Chip component. + * + */ +export interface ChipModel { + /** + * Specifies the text content for the Chip. + * + * @default - + */ + text?: string; + /** + * Defines the value of the Chip. + * + * @default - + */ + value?: string | number; + /** + * Specifies the icon CSS class or React node for the avatar in the Chip. + * + * @default - + */ + avatar?: string | React.ReactNode; + /** + * Specifies the leading icon CSS class or React node for the Chip. + * + * @default - + */ + leadingIcon?: string | React.ReactNode; + /** + * Specifies the trailing icon CSS or React node for the Chip. + * + * @default - + */ + trailingIcon?: string | React.ReactNode; + /** + * Specifies whether the Chip component is disabled or not. + * + * @default false + */ + disabled?: boolean; + /** + * Specifies the leading icon url for the Chip. + * + * @default - + */ + leadingIconUrl?: string; + /** + * Specifies the trailing icon url for the Chip. + * + * @default - + */ + trailingIconUrl?: string; + /** + * Specifies whether the Chip is removable. + * + * @default false + */ + removable?: boolean; + /** + * Specifies the variant of the Chip, either 'filled' or 'outlined'. + * + * @default - + */ + variant?: ChipVariant; + /** + * Specifies the color of the Chip, one of 'primary', 'info', 'danger', 'success', or 'warning'. + * + * @default - + */ + color?: ChipColor; +} +/** + * Represents the props for the Chip component. + * + * @ignore + */ +export interface ChipProps extends ChipModel { + /** + * Event handler for the delete action. + * @event onDelete + */ + onDelete?: (event: DeleteEvent) => void; +} +/** + * Represents the arguments for the delete event of a Chip. + */ +export interface DeleteEvent { + /** + * Specifies the data associated with the deleted Chip. + */ + data: ChipModel; + /** + * Specifies the event that triggered the delete action. + */ + event: React.MouseEvent | React.KeyboardEvent; +} +/** + * Represents the interface for the Chip component. + */ +export interface IChip extends ChipProps { + /** + * Specifies the Chip component element. + * + * @private + */ + element?: HTMLDivElement | null; +} +type ChipComponentProps = ChipProps & HTMLAttributes; +/** + * The Chip component represents information in a compact form, such as entity attribute, text, or action. + * + * ```typescript + * Anne + * ``` + */ +export declare const Chip: React.ForwardRefExoticComponent>; +export default Chip; diff --git a/components/buttons/src/chip/chip.js b/components/buttons/src/chip/chip.js new file mode 100644 index 0000000..39f6196 --- /dev/null +++ b/components/buttons/src/chip/chip.js @@ -0,0 +1,117 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react'; +import { preRender, useProviderContext, SvgIcon, useRippleEffect } from '@syncfusion/react-base'; +import * as React from 'react'; +/** + * The Chip component represents information in a compact form, such as entity attribute, text, or action. + * + * ```typescript + * Anne + * ``` + */ +export const Chip = React.memo(forwardRef((props, ref) => { + const { value, text, avatar, leadingIcon, trailingIcon, className, disabled = false, leadingIconUrl, trailingIconUrl, children, removable, variant, color, onDelete, onClick, ...otherProps } = props; + const publicAPI = { + value, + text, + avatar, + leadingIcon, + trailingIcon, + disabled, + leadingIconUrl, + trailingIconUrl, + removable, + variant, + color + }; + const chipRef = useRef(null); + const [isFocused, setIsFocused] = useState(false); + const { dir, ripple } = useProviderContext(); + const closeIcon = 'M10.5858 12.0001L2.58575 4.00003L3.99997 2.58582L12 10.5858L20 2.58582L21.4142 4.00003L13.4142 12.0001L21.4142 20L20 21.4142L12 13.4143L4.00003 21.4142L2.58581 20L10.5858 12.0001Z'; + const selectIcon = 'M21.4142 6L9.00003 18.4142L2.58582 12L4.00003 10.5858L9.00003 15.5858L20 4.58578L21.4142 6Z'; + const { rippleMouseDown, Ripple } = useRippleEffect(ripple); + useLayoutEffect(() => { + preRender('chip'); + }, []); + useImperativeHandle(ref, () => ({ + ...publicAPI, + element: chipRef.current + })); + const handleDelete = React.useCallback((e) => { + if (!removable) { + return; + } + e.stopPropagation(); + const eventArgs = { + event: e, + data: props + }; + if (onDelete) { + onDelete(eventArgs); + } + }, [onDelete, text, props]); + const handleSpanDelete = React.useCallback((e) => { + if (removable) { + handleDelete(e); + } + }, [removable, handleDelete]); + const handleClick = React.useCallback((e) => { + if (onClick) { + onClick(e); + } + }, [onClick, text, props]); + const handleKeyDown = React.useCallback((e) => { + switch (e.key) { + case 'Enter': + case ' ': + e.preventDefault(); + handleClick(e); + break; + case 'Delete': + case 'Backspace': + if (removable) { + e.preventDefault(); + handleDelete(e); + } + break; + } + }, [removable, handleClick, handleDelete]); + const handleFocus = React.useCallback(() => { + setIsFocused(true); + }, []); + const handleBlur = React.useCallback(() => { + setIsFocused(false); + }, []); + const chipClassName = React.useMemo(() => { + if (className?.includes('sf-chip')) { + return className; + } + return [ + 'sf-chip sf-control sf-lib sf-chip-list', + className, + disabled ? 'sf-disabled' : '', + dir === 'rtl' ? 'sf-rtl' : '', + avatar ? 'sf-chip-avatar-wrap' : + leadingIcon ? 'sf-chip-icon-wrap' : '', + isFocused ? 'sf-focused' : '', + variant === 'outlined' ? 'sf-outline' : '', + color ? `sf-${color}` : '' + ].filter(Boolean).join(' '); + }, [className, disabled, dir, avatar, leadingIcon, isFocused, variant, color]); + const avatarClasses = React.useMemo(() => { + return [ + 'sf-chip-avatar', + typeof avatar === 'string' ? avatar : '' + ].filter(Boolean).join(' '); + }, [avatar]); + const trailingIconClasses = React.useMemo(() => { + return [ + trailingIconUrl && !removable ? 'sf-trailing-icon-url' : 'sf-chip-delete', + removable ? 'sf-dlt-btn' : (typeof trailingIcon === 'string' ? trailingIcon : '') + ].filter(Boolean).join(' '); + }, [trailingIconUrl, removable, trailingIcon]); + return (_jsxs("div", { ref: chipRef, className: chipClassName, tabIndex: disabled ? -1 : 0, role: "button", "aria-disabled": disabled ? 'true' : 'false', "aria-label": text ? text : undefined, "data-value": value ? value.toString() : undefined, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, onMouseDown: rippleMouseDown, ...otherProps, children: [chipClassName.includes('sf-selectable') && (_jsx("span", { className: 'sf-selectable-icon', children: _jsx(SvgIcon, { width: '12', height: '12', d: selectIcon }) })), (avatar) && (_jsx("span", { className: avatarClasses, children: typeof avatar !== 'string' && avatar })), (leadingIcon && !avatar) && (typeof leadingIcon === 'string' ? + _jsx("span", { className: `sf-chip-icon ${leadingIcon}` }) : + _jsx("span", { className: "sf-chip-icon", children: leadingIcon })), (leadingIconUrl && !leadingIcon && !avatar) && (_jsx("span", { className: "sf-chip-avatar sf-image-url", children: leadingIconUrl && (_jsx("img", { className: 'sf-leading-image', src: leadingIconUrl, alt: "leading image" })) })), children ? (_jsx("div", { className: "sf-chip-template", children: children })) : text ? (_jsx("span", { className: "sf-chip-text", children: text })) : null, (trailingIcon || trailingIconUrl || removable) && (_jsxs("span", { className: trailingIconClasses, onClick: handleSpanDelete, children: [removable && (_jsx(SvgIcon, { width: '13', height: '13', d: closeIcon })), !removable && typeof trailingIcon !== 'string' && trailingIcon, !removable && trailingIconUrl && (_jsx("img", { className: 'sf-trailing-image', src: trailingIconUrl, alt: "trailing image" }))] })), ripple && _jsx(Ripple, {})] })); +})); +export default Chip; diff --git a/components/buttons/src/chip/index.d.ts b/components/buttons/src/chip/index.d.ts new file mode 100644 index 0000000..8f133ba --- /dev/null +++ b/components/buttons/src/chip/index.d.ts @@ -0,0 +1,4 @@ +/** + * Chip modules + */ +export * from './chip'; diff --git a/components/buttons/src/chip/index.js b/components/buttons/src/chip/index.js new file mode 100644 index 0000000..8f133ba --- /dev/null +++ b/components/buttons/src/chip/index.js @@ -0,0 +1,4 @@ +/** + * Chip modules + */ +export * from './chip'; diff --git a/components/buttons/src/chipList/chip-list.d.ts b/components/buttons/src/chipList/chip-list.d.ts new file mode 100644 index 0000000..73420ee --- /dev/null +++ b/components/buttons/src/chipList/chip-list.d.ts @@ -0,0 +1,156 @@ +import { HTMLAttributes } from 'react'; +import { ChipModel } from '../chip/chip'; +import * as React from 'react'; +/** + * Selection types for ChipList + */ +export type SelectionType = 'single' | 'multiple' | 'none'; +/** + * Defines the possible chip data types + */ +export type ChipData = string | number | ChipItemProps; +/** + * @ignore + */ +export interface ChipListProps { + /** + * This chips property helps to render ChipList component. + * ```html + * + * ``` + * + * @default [] + */ + chips?: ChipData[]; + /** + * Specifies a value that indicates whether the ChipList component is disabled or not. + * ```html + * + * ``` + * + * @default false + */ + disabled?: boolean; + /** + * Specifies the selected chip items in the ChipList. + * ```html + * + * ``` + * + * @default [] + */ + selectedChips?: number[]; + /** + * Defines the selection type of the ChipList. The available types are: + * 1. single + * 2. multiple + * 3. none + * + * @default 'none' + */ + selection?: SelectionType; + /** + * Enables or disables the delete functionality of a ChipList. + * ```html + * + * ``` + * + * @default false + */ + removable?: boolean; + /** + * Triggers when the chip item is removed. + * + * @event onDelete + */ + onDelete?: (args: ChipDeleteEvent) => void; + /** + * Triggers when the selected chips in the ChipList change. + * ```html + * console.log(args)} /> + * ``` + * + * @event onSelect + */ + onSelect?: (args: ChipSelectEvent) => void; +} +/** + * Represents the properties of a Chip component. + */ +export interface ChipItemProps extends ChipModel { + /** + * Specifies the custom classes to be added to the chip element. + * + * @default - + */ + className?: string; + /** + * Specifies the additional HTML attributes in a key-value pair format. + * + * @default - + */ + htmlAttributes?: React.HTMLAttributes; + /** + * Specifies the children to be rendered for the chip item. + * This can be a React node, a function that returns a React node, or a string. + * + * @default - + */ + children?: React.ReactNode; +} +/** + * Represents the arguments for the chip selection event. + */ +export interface ChipSelectEvent { + /** + * Specifies the indexes of the chips that are currently selected. + */ + selectedChipIndexes: number[]; + /** + * Specifies the event that triggered the select action. + */ + event: React.MouseEvent | React.KeyboardEvent; +} +/** + * Represents the arguments for the chip deletion event. + */ +export interface ChipDeleteEvent { + /** + * Specifies the remaining chips after deletion. + */ + chips: ChipData[]; + /** + * Specifies the event that triggered the delete action. + */ + event: React.MouseEvent | React.KeyboardEvent; +} +/** + * Represents the main properties and methods of the ChipList component. + */ +export interface IChipList extends ChipListProps { + /** + * Specifies the ChipList component element. + * + * @private + */ + element: HTMLDivElement | null; + /** + * Gets the selected chips from the ChipList. + * + * @public + * @returns {ChipData[]} + */ + getSelectedChips(): ChipData[]; +} +type ChipListComponentProps = ChipListProps & Omit, 'onSelect'>; +/** + * The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form. + * It supports various selection modes, chip deletion, and customization options. + * + * ```typescript + * + * ``` + */ +export declare const ChipList: React.ForwardRefExoticComponent>; +declare const _default: React.NamedExoticComponent, "onSelect"> & React.RefAttributes>; +export default _default; diff --git a/components/buttons/src/chipList/chip-list.js b/components/buttons/src/chipList/chip-list.js new file mode 100644 index 0000000..b47ba29 --- /dev/null +++ b/components/buttons/src/chipList/chip-list.js @@ -0,0 +1,226 @@ +import { jsx as _jsx } from "react/jsx-runtime"; +import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react'; +import { Chip } from '../chip/chip'; +import { isNullOrUndefined, preRender, useProviderContext } from '@syncfusion/react-base'; +import * as React from 'react'; +/** + * The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form. + * It supports various selection modes, chip deletion, and customization options. + * + * ```typescript + * + * ``` + */ +export const ChipList = forwardRef((props, ref) => { + const chipListRef = useRef(null); + const [chipData, setChipData] = useState([]); + const [selectedIndexes, setSelectedIndexes] = useState([]); + const [focusedIndex, setFocusedIndex] = useState(null); + const prevSelectedChipsRef = useRef([]); + const { dir } = useProviderContext(); + const { chips = [], className, disabled = false, selectedChips = [], selection = 'none', removable = false, onClick, onDelete, onSelect, ...otherProps } = props; + useEffect(() => { + let newChipData = null; + if (chips.length > 0) { + newChipData = chips.map((chip) => chip); + } + if (newChipData !== null) { + setChipData(newChipData); + } + else { + setChipData(chips); + } + }, [chips, className, disabled]); + useEffect(() => { + if (selectedIndexes.length > 0) { + if (selection === 'single') { + setSelectedIndexes((prev) => [prev[prev.length - 1]]); + } + else if (selection === 'none') { + setSelectedIndexes([]); + } + } + }, [selection]); + useEffect(() => { + if ((selectedChips && chipData.length > 0 && JSON.stringify(prevSelectedChipsRef.current) !== JSON.stringify(selectedChips))) { + if (selection === 'none') { + return; + } + let finalSelectedIndexes = []; + if (selection === 'single') { + finalSelectedIndexes = selectedChips.slice(0, 1); + } + else if (selection === 'multiple') { + finalSelectedIndexes = selectedChips; + } + setSelectedIndexes(finalSelectedIndexes); + prevSelectedChipsRef.current = selectedChips; + } + }, [selectedChips, chipData]); + useEffect(() => { + if (chips.length > 0) { + setChipData(chips); + } + }, [chips]); + useEffect(() => { + if (selectedChips.length > 0) { + setSelectedIndexes(selectedChips); + } + }, [selectedChips]); + useLayoutEffect(() => { + preRender('chipList'); + }, []); + const refInstance = { + chips: chipData, + disabled, + selectedChips, + selection, + removable + }; + refInstance.getSelectedChips = () => { + if (selection === 'none' || selectedIndexes.length === 0) { + return []; + } + const data = []; + selectedIndexes.forEach((index) => { + const chip = chipData[index]; + (data).push(chip); + }); + if (selection === 'single') { + return data[0] ? [data[0]] : []; + } + return data; + }; + useImperativeHandle(ref, () => ({ + ...refInstance, + element: chipListRef.current + })); + const handleFocus = useCallback((index) => { + setFocusedIndex(index); + }, []); + const handleBlur = useCallback(() => { + setFocusedIndex(null); + }, []); + const handleClick = useCallback((e, index) => { + if (onClick) { + onClick(e); + } + if (selection !== 'none') { + setFocusedIndex(null); + let newSelectedIndexes = [...selectedIndexes]; + if (selection === 'single') { + newSelectedIndexes = [index]; + } + else if (selection === 'multiple') { + newSelectedIndexes = selectedIndexes.includes(index) + ? selectedIndexes.filter((i) => i !== index) + : [...selectedIndexes, index]; + } + if (onSelect) { + onSelect({ event: e, selectedChipIndexes: newSelectedIndexes }); + } + else { + setSelectedIndexes(newSelectedIndexes); + } + } + }, [onClick, selection, selectedIndexes, onSelect, refInstance]); + const handleDelete = useCallback((e, index) => { + e.stopPropagation(); + if (onDelete) { + const updatedChips = chipData.filter((_, i) => i !== index); + onDelete({ event: e, chips: updatedChips }); + } + else { + setChipData((prevChipData) => prevChipData.filter((_, i) => i !== index)); + if (chipData.length > 1) { + const newFocusIndex = index !== 0 ? index - 1 : 0; + chipListRef.current?.children[newFocusIndex]?.focus(); + } + } + }, [onDelete, chipData]); + const handleKeyDown = useCallback((e, index, chip) => { + switch (e.key) { + case 'Enter': + case ' ': + e.preventDefault(); + handleClick(e, index); + break; + case 'Delete': + case 'Backspace': + if (removable && chip.removable !== false) { + e.preventDefault(); + handleDelete(e, index); + } + break; + } + }, [handleClick, handleDelete, removable]); + const memoizedOnClick = useCallback((index) => { + return (e) => handleClick(e, index); + }, [handleClick, selectedIndexes]); + const MemoizedOnDelete = useCallback((index) => { + return (args) => removable && handleDelete(args.event, index); + }, [removable, handleDelete]); + const MemoizedOnFocus = useCallback((index) => { + return () => handleFocus(index); + }, [handleFocus]); + const MemoizedOnKeyDown = useCallback((index, chip) => { + return (e) => handleKeyDown(e, index, chip); + }, [handleKeyDown]); + const memoizedChipData = useMemo(() => chipData, [chipData]); + const memoizedSelectedIndexes = useMemo(() => selectedIndexes, [selectedIndexes]); + const memoizedFocusedIndex = useMemo(() => focusedIndex, [focusedIndex]); + const renderChip = (chip, index, props, selectedIndexes, focusedIndex, memoizedOnClick, MemoizedOnDelete, MemoizedOnFocus, handleBlur, MemoizedOnKeyDown) => { + const chipProps = typeof chip === 'object' ? chip : { text: chip.toString() }; + const { children, className, removable, htmlAttributes, color, ...restChipProps } = chipProps; + const isSelected = selectedIndexes.includes(index); + const isFocused = focusedIndex === index; + const isEnabled = chipProps.disabled !== true && props.disabled !== true; + const chipClassNames = [ + 'sf-chip', + selection === 'multiple' ? 'sf-selectable' : '', + className ? className : props.className, + isEnabled ? '' : 'sf-disabled', + isSelected ? 'sf-active' : '', + isFocused ? 'sf-focused' : '', + chipProps.avatar ? 'sf-chip-avatar-wrap' : + chipProps.leadingIcon ? 'sf-chip-icon-wrap' : '', + chipProps.variant === 'outlined' ? 'sf-outline' : '', + chipProps.color ? `sf-${color}` : '' + ].filter(Boolean).join(' '); + const { onClick, ...otherHtmlAttributes } = htmlAttributes || {}; + return (_jsx(MemoizedChip, { ...restChipProps, chipColor: color, removable: props.removable ? !isNullOrUndefined(removable) ? removable : true : false, className: chipClassNames, children: children, onClick: memoizedOnClick(index), onDelete: MemoizedOnDelete(index), onFocus: MemoizedOnFocus(index), onBlur: handleBlur, tabIndex: isEnabled ? 0 : -1, role: 'option', onKeyDown: MemoizedOnKeyDown(index, chipProps), "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": !isEnabled ? 'true' : 'false', "aria-label": chipProps.text, index: index, disabled: !isEnabled, isFocused: isFocused, isSelected: isSelected, ...otherHtmlAttributes }, index)); + }; + const renderContent = useMemo(() => memoizedChipData.map((chip, index) => renderChip(chip, index, props, memoizedSelectedIndexes, memoizedFocusedIndex, memoizedOnClick, MemoizedOnDelete, MemoizedOnFocus, handleBlur, MemoizedOnKeyDown)), [memoizedChipData, props, memoizedSelectedIndexes, memoizedFocusedIndex, + memoizedOnClick, MemoizedOnDelete, MemoizedOnFocus, handleBlur, MemoizedOnKeyDown]); + const classes = React.useMemo(() => { + return [ + 'sf-control', + 'sf-chip-list', + 'sf-chip-set', + selection === 'multiple' ? 'sf-multi-selection' : selection === 'single' ? 'sf-selection' : '', + 'sf-lib', + dir === 'rtl' ? 'sf-rtl' : '', + props.className, + !disabled ? '' : 'sf-disabled' + ].filter(Boolean).join(' '); + }, [selection, dir, props.className, disabled]); + return (_jsx("div", { ref: chipListRef, className: classes, role: "listbox", "aria-multiselectable": selection === 'multiple' ? 'true' : 'false', "aria-disabled": (disabled) ? 'true' : 'false', ...otherProps, children: renderContent })); +}); +export default React.memo(ChipList); +const MemoizedChip = React.memo(({ isSelected, isFocused, chipColor, ...props }) => _jsx(Chip, { ...props, color: chipColor }), (prevProps, nextProps) => { + return (prevProps.text === nextProps.text && + prevProps.value === nextProps.value && + prevProps.disabled === nextProps.disabled && + prevProps.removable === nextProps.removable && + prevProps.className === nextProps.className && + prevProps.isSelected === nextProps.isSelected && + prevProps.isFocused === nextProps.isFocused && + prevProps.index === nextProps.index && + prevProps.onClick?.toString() === nextProps.onClick?.toString() && + prevProps.onDelete?.toString === nextProps.onDelete?.toString && + prevProps.variant === nextProps.variant && + prevProps.chipColor === nextProps.chipColor && + prevProps.avatar === nextProps.avatar && + prevProps.leadingIcon === nextProps.leadingIcon && + prevProps.trailingIcon === nextProps.trailingIcon); +}); diff --git a/components/buttons/src/chipList/index.d.ts b/components/buttons/src/chipList/index.d.ts new file mode 100644 index 0000000..f5d00af --- /dev/null +++ b/components/buttons/src/chipList/index.d.ts @@ -0,0 +1,4 @@ +/** + * ChipList modules + */ +export * from './chip-list'; diff --git a/components/buttons/src/chipList/index.js b/components/buttons/src/chipList/index.js new file mode 100644 index 0000000..f5d00af --- /dev/null +++ b/components/buttons/src/chipList/index.js @@ -0,0 +1,4 @@ +/** + * ChipList modules + */ +export * from './chip-list'; diff --git a/components/buttons/src/floating-action-button/floating-action-button.d.ts b/components/buttons/src/floating-action-button/floating-action-button.d.ts new file mode 100644 index 0000000..775bc99 --- /dev/null +++ b/components/buttons/src/floating-action-button/floating-action-button.d.ts @@ -0,0 +1,108 @@ +import { ButtonHTMLAttributes } from 'react'; +import { IconPosition, Color, Size } from '../button/button'; +import * as React from 'react'; +/** + * Defines the position of FAB (Floating Action Button) in target. + */ +export declare enum FabPosition { + /** + * Positions the FAB at the target's top left corner. + */ + TopLeft = "TopLeft", + /** + * Places the FAB on the top-center position of the target. + */ + TopCenter = "TopCenter", + /** + * Positions the FAB at the target's top right corner. + */ + TopRight = "TopRight", + /** + * Positions the FAB in the middle of target's left side. + */ + MiddleLeft = "MiddleLeft", + /** + * Positions the FAB in the center of target. + */ + MiddleCenter = "MiddleCenter", + /** + * Positions the FAB in the middle of target's right side. + */ + MiddleRight = "MiddleRight", + /** + * Positions the FAB at the target's bottom left corner. + */ + BottomLeft = "BottomLeft", + /** + * Places the FAB on the bottom-center position of the target. + */ + BottomCenter = "BottomCenter", + /** + * Positions the FAB at the target's bottom right corner. + */ + BottomRight = "BottomRight" +} +export interface FabButtonProps { + /** + * Specifies the position of the Floating Action Button (FAB) relative to its target element. Options may include positions such as top-left, top-right, bottom-left, and bottom-right. + * + * @default FabPosition.BottomRight + */ + position?: FabPosition; + /** + * Determines the visibility of the Floating Action Button. When `true`, the FAB is visible; when `false`, it is hidden. + * + * @default true + */ + visible?: boolean; + /** + * Enables toggle behavior for the FAB. If `true`, the FAB will act as a toggle button, changing state on each click. + * + * @default false + */ + togglable?: boolean; + /** + * Defines an icon for the button, which can either be a CSS class name for custom styling or an SVG element for rendering. + * + * @default - + */ + icon?: string | React.ReactNode; + /** + * Defines the position of the icon relative to the text on the FAB. Options may include 'Left', 'Right', 'Top', or 'Bottom'. + * + * @default IconPosition.Left + */ + iconPosition?: IconPosition; + /** + * Specifies the Color style of the FAB button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Danger', and 'Info'. + * + * @default Color.Primary + */ + color?: Color; + /** + * Specifies the size style of the FAB button. Options include 'Small', 'Medium' and 'Large'. + * + * @default Size.Medium + */ + size?: Size; +} +export interface IFabButton extends FabButtonProps { + /** + * This is button component element. + * + * @private + * @default null + */ + element?: HTMLElement | null; +} +type IFabProps = FabButtonProps & ButtonHTMLAttributes; +/** + * The Floating Action Button (FAB) component offers a prominent primary action for an application interface, prominently positioned and styled to stand out with custom icon support. + * + * ```typescript + * FAB + * ``` + */ +export declare const Fab: React.ForwardRefExoticComponent>; +declare const _default: React.NamedExoticComponent & React.RefAttributes>; +export default _default; diff --git a/components/buttons/src/floating-action-button/floating-action-button.js b/components/buttons/src/floating-action-button/floating-action-button.js new file mode 100644 index 0000000..bbccd21 --- /dev/null +++ b/components/buttons/src/floating-action-button/floating-action-button.js @@ -0,0 +1,116 @@ +import { jsx as _jsx } from "react/jsx-runtime"; +import { useRef, useImperativeHandle, forwardRef, useEffect } from 'react'; +import { Button, IconPosition, Color } from '../button/button'; +import { preRender, useProviderContext } from '@syncfusion/react-base'; +import * as React from 'react'; +/** + * Defines the position of FAB (Floating Action Button) in target. + */ +export var FabPosition; +(function (FabPosition) { + /** + * Positions the FAB at the target's top left corner. + */ + FabPosition["TopLeft"] = "TopLeft"; + /** + * Places the FAB on the top-center position of the target. + */ + FabPosition["TopCenter"] = "TopCenter"; + /** + * Positions the FAB at the target's top right corner. + */ + FabPosition["TopRight"] = "TopRight"; + /** + * Positions the FAB in the middle of target's left side. + */ + FabPosition["MiddleLeft"] = "MiddleLeft"; + /** + * Positions the FAB in the center of target. + */ + FabPosition["MiddleCenter"] = "MiddleCenter"; + /** + * Positions the FAB in the middle of target's right side. + */ + FabPosition["MiddleRight"] = "MiddleRight"; + /** + * Positions the FAB at the target's bottom left corner. + */ + FabPosition["BottomLeft"] = "BottomLeft"; + /** + * Places the FAB on the bottom-center position of the target. + */ + FabPosition["BottomCenter"] = "BottomCenter"; + /** + * Positions the FAB at the target's bottom right corner. + */ + FabPosition["BottomRight"] = "BottomRight"; +})(FabPosition || (FabPosition = {})); +/** + * The Floating Action Button (FAB) component offers a prominent primary action for an application interface, prominently positioned and styled to stand out with custom icon support. + * + * ```typescript + * FAB + * ``` + */ +export const Fab = forwardRef((props, ref) => { + const buttonRef = useRef(null); + const { dir } = useProviderContext(); + const { disabled = false, position = FabPosition.BottomRight, iconPosition = IconPosition.Left, className = '', togglable = false, icon, children, color = Color.Primary, size, visible = true, ...domProps } = props; + const fabPositionClasses = getFabPositionClasses(position, dir); + const classNames = [ + 'sf-control', + 'sf-fab', + 'sf-lib', + 'sf-btn', + className || '', + visible ? '' : 'sf-fab-hidden', + dir === 'rtl' ? 'sf-rtl' : '', + icon && !children ? 'sf-icon-btn' : '', + ...fabPositionClasses + ].filter(Boolean).join(' '); + const publicAPI = { + iconPosition, + icon, + togglable, + visible, + color, + size + }; + useImperativeHandle(ref, () => ({ + ...publicAPI, + element: buttonRef.current?.element + }), [publicAPI]); + useEffect(() => { + preRender('fab'); + }, []); + function getFabPositionClasses(position, dir) { + const positions = { + vertical: '', + horizontal: '', + middle: '', + align: '' + }; + if (['BottomLeft', 'BottomCenter', 'BottomRight'].indexOf(position) !== -1) { + positions.vertical = 'sf-fab-bottom'; + } + else { + positions.middle = 'sf-fab-top'; + } + if (['MiddleLeft', 'MiddleRight', 'MiddleCenter'].indexOf(position) !== -1) { + positions.vertical = 'sf-fab-middle'; + } + if (['TopCenter', 'BottomCenter', 'MiddleCenter'].indexOf(position) !== -1) { + positions.align = 'sf-fab-center'; + } + const isRight = ['TopRight', 'MiddleRight', 'BottomRight'].indexOf(position) !== -1; + if ((!((dir === 'rtl') || isRight) || ((dir === 'rtl') && isRight))) { + positions.horizontal = 'sf-fab-left'; + } + else { + positions.horizontal = 'sf-fab-right'; + } + return Object.values(positions).filter(Boolean); + } + return (_jsx(Button, { ref: buttonRef, className: classNames, icon: icon, color: color, size: size, disabled: disabled, iconPosition: icon ? iconPosition : undefined, togglable: togglable, ...domProps, children: children })); +}); +export default React.memo(Fab); diff --git a/components/buttons/src/floating-action-button/index.d.ts b/components/buttons/src/floating-action-button/index.d.ts new file mode 100644 index 0000000..702ad51 --- /dev/null +++ b/components/buttons/src/floating-action-button/index.d.ts @@ -0,0 +1,4 @@ +/** + * Floating Action Button modules + */ +export * from './floating-action-button'; diff --git a/components/buttons/src/floating-action-button/index.js b/components/buttons/src/floating-action-button/index.js new file mode 100644 index 0000000..702ad51 --- /dev/null +++ b/components/buttons/src/floating-action-button/index.js @@ -0,0 +1,4 @@ +/** + * Floating Action Button modules + */ +export * from './floating-action-button'; diff --git a/components/buttons/src/index.d.ts b/components/buttons/src/index.d.ts new file mode 100644 index 0000000..97918be --- /dev/null +++ b/components/buttons/src/index.d.ts @@ -0,0 +1,10 @@ +/** + * Button all modules + */ +export * from './button/index'; +export * from './check-box/index'; +export * from './radio-button/index'; +export * from './switch/index'; +export * from './floating-action-button/index'; +export * from './chip/index'; +export * from './chipList/index'; diff --git a/components/buttons/src/index.js b/components/buttons/src/index.js new file mode 100644 index 0000000..97918be --- /dev/null +++ b/components/buttons/src/index.js @@ -0,0 +1,10 @@ +/** + * Button all modules + */ +export * from './button/index'; +export * from './check-box/index'; +export * from './radio-button/index'; +export * from './switch/index'; +export * from './floating-action-button/index'; +export * from './chip/index'; +export * from './chipList/index'; diff --git a/components/buttons/src/radio-button/index.d.ts b/components/buttons/src/radio-button/index.d.ts new file mode 100644 index 0000000..c89029f --- /dev/null +++ b/components/buttons/src/radio-button/index.d.ts @@ -0,0 +1,4 @@ +/** + * RadioButton modules + */ +export * from './radio-button'; diff --git a/components/buttons/src/radio-button/index.js b/components/buttons/src/radio-button/index.js new file mode 100644 index 0000000..c89029f --- /dev/null +++ b/components/buttons/src/radio-button/index.js @@ -0,0 +1,4 @@ +/** + * RadioButton modules + */ +export * from './radio-button'; diff --git a/components/buttons/src/radio-button/radio-button.d.ts b/components/buttons/src/radio-button/radio-button.d.ts new file mode 100644 index 0000000..a575389 --- /dev/null +++ b/components/buttons/src/radio-button/radio-button.d.ts @@ -0,0 +1,58 @@ +import * as React from 'react'; +import { ChangeEvent, InputHTMLAttributes } from 'react'; +import { LabelPlacement } from '../button/button'; +/** + * Defines the properties for the RadioButton component. + */ +export interface RadioButtonProps { + /** + * Specifies a value that indicates whether the RadioButton is `checked` or not. When set to `true`, the RadioButton will be in `checked` state. + * + * @default false + */ + checked?: boolean; + /** + * Defines the caption for the RadioButton, that describes the purpose of the RadioButton. + * + * @default - + */ + label?: string; + /** + * Specifies the position of the label relative to the RadioButton. It determines whether the label appears before or after the radio button element in the UI. + * + * @default LabelPlacement.After + */ + labelPlacement?: LabelPlacement; + /** + * Defines `value` attribute for the RadioButton. It is a form data passed to the server when submitting the form. + * + * @default - + */ + value?: string; + /** + * Event trigger when the RadioButton state has been changed by user interaction. + * + * @event change + */ + onChange?: (event: ChangeEvent) => void; +} +export interface IRadioButton extends RadioButtonProps { + /** + * This is RadioButton component input element. + * + * @private + * @default null + */ + element?: HTMLInputElement | null; +} +type IRadioButtonProps = IRadioButton & InputHTMLAttributes; +/** + * The RadioButton component allows users to select a single option from a group, utilizing a circular input field that provides a clear user selection interface. + * + * ```typescript + * + * ``` + */ +export declare const RadioButton: React.ForwardRefExoticComponent>; +declare const _default: React.NamedExoticComponent & React.RefAttributes>; +export default _default; diff --git a/components/buttons/src/radio-button/radio-button.js b/components/buttons/src/radio-button/radio-button.js new file mode 100644 index 0000000..91c2fa5 --- /dev/null +++ b/components/buttons/src/radio-button/radio-button.js @@ -0,0 +1,54 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import * as React from 'react'; +import { useRef, useImperativeHandle, useState, useEffect, forwardRef } from 'react'; +import { preRender, useProviderContext, useRippleEffect } from '@syncfusion/react-base'; +/** + * The RadioButton component allows users to select a single option from a group, utilizing a circular input field that provides a clear user selection interface. + * + * ```typescript + * + * ``` + */ +export const RadioButton = forwardRef((props, ref) => { + const { checked, className = '', disabled = false, label = '', labelPlacement = 'After', name = '', value = '', onChange, ...domProps } = props; + const isControlled = checked !== undefined; + const [isChecked, setIsChecked] = useState(() => isControlled ? !!checked : !!domProps.defaultChecked); + const radioInputRef = useRef(null); + const { dir, ripple } = useProviderContext(); + const { rippleMouseDown, Ripple } = useRippleEffect(ripple, { duration: 400, isCenterRipple: true }); + useEffect(() => { + if (isControlled) { + setIsChecked(!!checked); + } + }, [checked, isControlled]); + useEffect(() => { + preRender('radio'); + }, []); + const publicAPI = { + checked: isChecked, + label, + labelPlacement, + value + }; + useImperativeHandle(ref, () => ({ + ...publicAPI, + element: radioInputRef.current + }), [publicAPI]); + const onRadioChange = (event) => { + if (!isControlled) { + setIsChecked(event.target.checked); + } + if (onChange) { + onChange(event); + } + }; + const classNames = [ + 'sf-radio-wrapper', + 'sf-wrapper', + className + ].filter(Boolean).join(' '); + const rtlClass = (dir === 'rtl') ? 'sf-rtl' : ''; + const labelBefore = labelPlacement === 'Before'; + return (_jsxs("div", { className: classNames, children: [_jsx("input", { ref: radioInputRef, type: "radio", id: `sf-${value}`, name: name, value: value, disabled: disabled, onChange: onRadioChange, className: `sf-control sf-radio sf-lib ${className}`, checked: isControlled ? !!checked : undefined, defaultChecked: !isControlled ? isChecked : undefined, ...domProps }), _jsxs("label", { className: `${labelBefore ? 'sf-right' : ''} ${rtlClass}`, htmlFor: `sf-${value}`, children: [_jsx("span", { className: "sf-ripple-container", onMouseDown: rippleMouseDown, children: ripple && _jsx(Ripple, {}) }), _jsx("span", { className: "sf-label", children: label })] })] })); +}); +export default React.memo(RadioButton); diff --git a/components/buttons/src/switch/index.d.ts b/components/buttons/src/switch/index.d.ts new file mode 100644 index 0000000..26dafdc --- /dev/null +++ b/components/buttons/src/switch/index.d.ts @@ -0,0 +1,4 @@ +/** + * Switch modules + */ +export * from './switch'; diff --git a/components/buttons/src/switch/index.js b/components/buttons/src/switch/index.js new file mode 100644 index 0000000..26dafdc --- /dev/null +++ b/components/buttons/src/switch/index.js @@ -0,0 +1,4 @@ +/** + * Switch modules + */ +export * from './switch'; diff --git a/components/buttons/src/switch/switch.d.ts b/components/buttons/src/switch/switch.d.ts new file mode 100644 index 0000000..cde6c10 --- /dev/null +++ b/components/buttons/src/switch/switch.d.ts @@ -0,0 +1,74 @@ +import { ChangeEvent } from 'react'; +import * as React from 'react'; +import { Size } from '../button/button'; +/** + * Interface representing Switch component properties. + * + */ +export interface SwitchProps { + /** + * Specifies a value that indicates whether the Switch is `checked` or not. When set to `true`, the Switch will be in `checked` state. + * + * + * @default false + */ + checked?: boolean; + /** + * Defines `name` attribute for the Switch. It is used to reference form data (Switch value) after a form is submitted. + * + * @default - + */ + name?: string; + /** + * Specifies a text that indicates the Switch is in checked state. + * + * @default - + */ + onLabel?: string; + /** + * Specifies a text that indicates the Switch is in unchecked state. + * + * @default - + */ + offLabel?: string; + /** + * Defines `value` attribute for the Switch. It is a form data passed to the server when submitting the form. + * + * @default - + */ + value?: string; + /** + * Specifies the size style of the switch button. Options include 'Small', 'Medium' and 'Large'. + * + * @default Size.Medium + */ + size?: Size; + /** + * Callback fired on change event. + * + * @event change + */ + onChange?: (args: ChangeEvent) => void; +} +/** + * Interface for exposing imperative methods for the Switch component. + */ +export interface ISwitch extends SwitchProps { + /** + * This is Switch component element. + * + * @private + * @default null + */ + element?: HTMLElement | null; +} +type ISwitchProps = ISwitch & React.InputHTMLAttributes; +/** + * The Switch component is a toggle switch offering a binary decision interface, visually indicating the state between on and off with optional label customization for clear communication. + * + * ```typescript + * + * ``` + */ +export declare const Switch: React.ForwardRefExoticComponent>; +export default Switch; diff --git a/components/buttons/src/switch/switch.js b/components/buttons/src/switch/switch.js new file mode 100644 index 0000000..d25175d --- /dev/null +++ b/components/buttons/src/switch/switch.js @@ -0,0 +1,99 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { forwardRef, useState, useEffect, useImperativeHandle, useCallback } from 'react'; +import * as React from 'react'; +import { preRender, useProviderContext, useRippleEffect } from '@syncfusion/react-base'; +import { Size } from '../button/button'; +/** + * The Switch component is a toggle switch offering a binary decision interface, visually indicating the state between on and off with optional label customization for clear communication. + * + * ```typescript + * + * ``` + */ +export const Switch = forwardRef((props, ref) => { + const { checked, className = '', disabled = false, name = '', onLabel = '', offLabel = '', value = '', size = Size.Medium, onChange, ...domProps } = props; + const isControlled = checked !== undefined; + const [isChecked, setIsChecked] = useState(() => isControlled ? !!checked : !!domProps.defaultChecked); + const switchRef = React.useRef(null); + const [isFocused, setIsFocused] = useState(false); + const { dir, ripple } = useProviderContext(); + const rippleContainerRef = React.useRef(null); + const { rippleMouseDown, Ripple } = useRippleEffect(ripple, { duration: 400, isCenterRipple: true }); + const publicAPI = { + checked, + onLabel, + offLabel, + name, + value, + size + }; + useImperativeHandle(ref, () => ({ + ...publicAPI, + element: switchRef.current + }), [isChecked, disabled, publicAPI]); + useEffect(() => { + if (isControlled) { + setIsChecked(!!checked); + } + }, [checked, isControlled]); + useEffect(() => { + preRender('switch'); + }, []); + const togglable = useCallback(() => { + if (disabled) { + return; + } + const newCheckedState = !isChecked; + if (!isControlled) { + setIsChecked(newCheckedState); + } + if (onChange) { + const syntheticEvent = { + ...new Event('change', { bubbles: true }), + target: { ...switchRef.current, checked: newCheckedState, value }, + currentTarget: switchRef.current + }; + onChange(syntheticEvent); + } + }, [isChecked, isControlled, onChange, disabled]); + const handleChange = (event) => { + if (disabled) { + return; + } + const newChecked = event.target.checked; + if (!isControlled) { + setIsChecked(newChecked); + } + onChange?.(event); + }; + const handleBlur = () => setIsFocused(false); + const handleFocus = () => setIsFocused(true); + const handleKeyUp = (event) => { + if ((event.key === ' ' || event.key === 'Space') && event.target === switchRef.current) { + event.preventDefault(); + togglable(); + } + }; + const handleMouseDown = useCallback((e) => { + if (ripple && rippleContainerRef.current && rippleMouseDown) { + const syntheticEvent = { + ...e, + currentTarget: rippleContainerRef.current, + target: rippleContainerRef.current, + preventDefault: e.preventDefault, + stopPropagation: e.stopPropagation + }; + rippleMouseDown(syntheticEvent); + } + }, [ripple, rippleMouseDown]); + const switchClasses = [ + 'sf-control', + 'sf-switch', + 'sf-lib', + isFocused ? 'sf-focus' : '', + typeof size === 'string' ? (size.toLowerCase() === 'medium' ? '' : `sf-${size.toLowerCase() === 'large' ? 'bigger' : size.toLowerCase()}`) : '', + className + ].join(' '); + return (_jsxs("div", { className: `sf-switch-wrapper ${isFocused ? 'sf-focus' : ''} ${typeof size === 'string' ? `sf-${size.toLowerCase() === 'large' ? 'bigger' : size.toLowerCase()}` : ''} ${className} ${disabled ? 'sf-switch-disabled' : ''} ${(dir === 'rtl') ? 'sf-rtl' : ''}`, onClick: () => togglable(), onMouseDown: handleMouseDown, children: [_jsx("input", { ref: switchRef, type: "checkbox", className: switchClasses, name: name, value: value, checked: isControlled ? !!checked : isChecked, disabled: disabled, onKeyUp: handleKeyUp, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, ...domProps }), _jsxs("span", { className: `sf-switch-inner ${isChecked ? 'sf-switch-active' : ''}`, children: [_jsx("span", { className: "sf-switch-on", children: onLabel }), _jsx("span", { className: "sf-switch-off", children: offLabel })] }), _jsx("span", { className: `sf-switch-handle ${isChecked ? 'sf-switch-active' : ''}`, children: _jsx("span", { ref: rippleContainerRef, className: `sf-ripple-container ${isChecked ? 'sf-ripple-check' : ''}`, children: ripple && _jsx(Ripple, {}) }) })] })); +}); +export default Switch; diff --git a/components/buttons/styles/button/_all.scss b/components/buttons/styles/button/_all.scss new file mode 100644 index 0000000..a0fe77d --- /dev/null +++ b/components/buttons/styles/button/_all.scss @@ -0,0 +1,2 @@ +@import 'layout.scss'; +@import 'theme.scss'; diff --git a/components/buttons/styles/button/_layout.scss b/components/buttons/styles/button/_layout.scss new file mode 100644 index 0000000..e1e3910 --- /dev/null +++ b/components/buttons/styles/button/_layout.scss @@ -0,0 +1,564 @@ +@mixin icon-top-bottom { + display: block; + margin-top: 0; + width: auto; +} + +@mixin top-bottom-icon-btn { + line-height: 1; +} + +@mixin mat3-border-radius { + @if $skin-name == 'Material3' { + border-radius: 4px; + } +} + +@include export-module('button-layout') { + .sf-btn, + .sf-css.sf-btn { + /* stylelint-disable property-no-vendor-prefix */ + position: relative; + -webkit-font-smoothing: antialiased; + border: $btn-border; + border-radius: $btn-border-radius; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + font-family: $font-family; + font-size: $btn-font-size; + font-weight: $btn-font-weight; + justify-content: center; + line-height: $btn-text-line-height; + outline: none; + padding: $btn-padding; + text-align: center; + text-decoration: none; + text-transform: $btn-text-transform; + user-select: none; + vertical-align: middle; + white-space: nowrap; + @if $skin-name == 'Material3' { + letter-spacing: .15px; + } + @at-root { + &:disabled { + cursor: default; + } + + &:hover, + &:focus { + text-decoration: none; + } + + &::-moz-focus-inner { + border: 0; + padding: 0; + } + + & .sf-btn-icon { + display: inline-block; + font-size: $btn-icon-font-size; + margin-top: $btn-icon-margin-top; + vertical-align: middle; + width: $btn-icon-btn-width; + line-height: 1px; + + &.sf-icon-left { + margin-left: $btn-icon-margin; + width: $btn-icon-width; + } + + &.sf-icon-right { + width: $btn-icon-width; + margin-right: $btn-icon-margin; + } + + &.sf-icon-top { + padding-bottom: $btn-icon-top-bottom-padding; + @include icon-top-bottom; + } + + &.sf-icon-bottom { + padding-top: $btn-icon-top-bottom-padding; + @include icon-top-bottom; + } + + path { + fill-rule: evenodd; + clip-rule: evenodd; + } + } + + &.sf-icon-btn { + @if $skin-name != 'tailwind3' { + padding: $btn-icon-padding; + } + @if $skin-name == 'fluent2' { + line-height: 14px; + } + @include mat3-border-radius; + } + + &.sf-top-icon-btn, + &.sf-bottom-icon-btn { + @include top-bottom-icon-btn; + padding: $btn-top-icon-padding; + } + + &.sf-round { + border-radius: 50%; + height: $btn-round-height; + line-height: 1; + padding: 0; + width: $btn-round-width; + + & .sf-btn-icon { + font-size: $btn-round-font-size; + line-height: $btn-round-icon-line-height; + margin-top: 0; + width: auto; + } + } + + &.sf-rounded { + border-radius: 40px; + } + + &.sf-round-corner { + @if $skin-name == 'Material3' { + border-radius: 25px; + padding: $btn-padding; + } + } + + &.sf-rtl { + & .sf-icon-right { + margin-left: $btn-icon-margin; + margin-right: 0; + } + + & .sf-icon-left { + margin-left: 0; + margin-right: $btn-icon-margin; + } + } + + &.sf-flat { + border: $btn-flat-border; + } + + &.sf-small { + font-size: $btn-small-font-size; + line-height: $btn-small-text-line-height; + padding: $btn-small-padding; + &.sf-round-corner { + @if $skin-name == 'Material3' { + border-radius: 25px; + padding: $btn-small-padding; + } + } + + & .sf-btn-icon { + font-size: $btn-small-icon-font-size; + width: $btn-icon-small-width; + + &.sf-icon-left { + margin-left: $btn-small-icon-margin; + width: $btn-small-icon-width; + } + + &.sf-icon-right { + margin-right: $btn-small-icon-margin; + width: $btn-small-icon-width; + } + + &.sf-icon-top { + padding-bottom: $btn-small-icon-top-bottom-padding; + width: auto; + } + + &.sf-icon-bottom { + padding-top: $btn-small-icon-top-bottom-padding; + width: auto; + } + } + + &.sf-icon-btn { + padding: $btn-small-icon-padding; + @include mat3-border-radius; + } + + &.sf-top-icon-btn, + &.sf-bottom-icon-btn { + @include top-bottom-icon-btn; + padding: $btn-top-icon-padding; + } + + &.sf-round { + height: $btn-round-small-height; + line-height: 1; + padding: 0; + width: $btn-round-small-width; + @if $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' { + border-radius: 50%; + } + + & .sf-btn-icon { + font-size: $btn-small-round-font-size; + line-height: $btn-small-round-icon-line-height; + width: auto; + } + } + + &.sf-rtl { + & .sf-icon-right { + margin-left: $btn-small-icon-margin; + margin-right: 0; + } + + & .sf-icon-left { + margin-left: 0; + margin-right: $btn-small-icon-margin; + } + } + } + + &.sf-block { + display: block; + width: 100%; + } + } + } + + .sf-small .sf-btn, + .sf-small.sf-btn, + .sf-small .sf-css.sf-btn, + .sf-small.sf-css.sf-btn { + font-size: $btn-small-font-size; + line-height: $btn-small-text-line-height; + padding: $btn-small-padding; + &.sf-round-corner { + @if $skin-name == 'Material3' { + border-radius: 25px; + padding: $btn-small-padding; + } + } + + & .sf-btn-icon { + font-size: $btn-small-icon-font-size; + width: $btn-icon-small-width; + + &.sf-icon-left { + margin-left: $btn-small-icon-margin; + width: $btn-small-icon-width; + } + + &.sf-icon-right { + margin-right: $btn-small-icon-margin; + width: $btn-small-icon-width; + } + + &.sf-icon-top { + padding-bottom: $btn-small-icon-top-bottom-padding; + width: auto; + } + + &.sf-icon-bottom { + padding-top: $btn-small-icon-top-bottom-padding; + width: auto; + } + } + + &.sf-icon-btn { + padding: $btn-small-icon-padding; + @if $skin-name == 'fluent2' { + line-height: 14px; + } + @include mat3-border-radius; + } + + &.sf-top-icon-btn, + &.sf-bottom-icon-btn { + @include top-bottom-icon-btn; + padding: $btn-top-icon-padding; + } + + &.sf-round { + height: $btn-round-small-height; + line-height: 1; + padding: 0; + width: $btn-round-small-width; + @if $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' { + border-radius: 50%; + } + + & .sf-btn-icon { + font-size: $btn-small-round-font-size; + line-height: $btn-small-round-icon-line-height; + width: auto; + } + } + + &.sf-rtl { + & .sf-icon-right { + margin-left: $btn-small-icon-margin; + margin-right: 0; + } + + & .sf-icon-left { + margin-left: 0; + margin-right: $btn-small-icon-margin; + } + } + } + + @if $skin-name == 'fluent2' { + .sf-btn.sf-icon-btn .sf-btn-icon, + .sf-small .sf-btn.sf-icon-btn .sf-btn-icon { + font-size: 14px; + line-height: 14px; + } + } +} + +@include export-module('button-bigger') { + .sf-large.sf-small .sf-btn, + .sf-large .sf-small.sf-btn, + .sf-large.sf-small .sf-css.sf-btn, + .sf-large .sf-small.sf-css.sf-btn { + font-size: $btn-bigger-small-font-size; + line-height: $btn-bigger-small-text-line-height; + padding: $btn-bigger-small-padding; + + &.sf-round-corner { + @if $skin-name == 'Material3' { + border-radius: 25px; + padding: $btn-bigger-small-padding; + } + } + + & .sf-btn-icon { + font-size: $btn-bigger-small-icon-font-size; + width: $btn-icon-bigger-small-width; + + &.sf-icon-left { + margin-left: $btn-bigger-small-icon-margin; + width: $btn-bigger-small-icon-width; + } + + &.sf-icon-right { + margin-right: $btn-bigger-small-icon-margin; + width: $btn-bigger-small-icon-width; + } + + &.sf-icon-top { + padding-bottom: $btn-small-icon-top-bottom-padding; + width: auto; + } + + &.sf-icon-bottom { + padding-top: $btn-small-icon-top-bottom-padding; + width: auto; + } + } + + &.sf-icon-btn { + padding: $btn-bigger-small-icon-padding; + @include mat3-border-radius; + } + + &.sf-top-icon-btn, + &.sf-bottom-icon-btn { + @include top-bottom-icon-btn; + padding: $btn-top-icon-bigger-padding; + } + + &.sf-round { + height: $btn-round-bigger-small-height; + line-height: 1; + padding: 0; + width: $btn-round-bigger-small-width; + + & .sf-btn-icon { + font-size: $btn-bigger-small-round-font-size; + line-height: $btn-bigger-small-round-icon-line-height; + width: auto; + } + } + + &.sf-rtl { + & .sf-icon-right { + margin-left: $btn-bigger-small-icon-margin; + margin-right: 0; + } + + & .sf-icon-left { + margin-left: 0; + margin-right: $btn-bigger-small-icon-margin; + } + } + } + + .sf-large .sf-btn, + .sf-large.sf-btn, + .sf-large .sf-css.sf-btn, + .sf-large.sf-css.sf-btn { + font-size: $btn-bigger-font-size; + line-height: $btn-bigger-text-line-height; + padding: $btn-bigger-padding; + &.sf-round-corner { + @if $skin-name == 'Material3' { + border-radius: 25px; + padding: $btn-bigger-padding; + } + } + + & .sf-btn-icon { + font-size: $btn-bigger-icon-font-size; + width: $btn-icon-bigger-width; + + &.sf-icon-left { + margin-left: $btn-bigger-icon-margin; + width: $btn-bigger-icon-width; + } + + &.sf-icon-right { + margin-right: $btn-bigger-icon-margin; + width: $btn-bigger-icon-width; + } + + &.sf-icon-top { + padding-bottom: $btn-bigger-icon-top-bottom-padding; + width: auto; + } + + &.sf-icon-bottom { + padding-top: $btn-bigger-icon-top-bottom-padding; + width: auto; + } + } + + &.sf-icon-btn { + @if $skin-name != 'tailwind3' { + padding: $btn-bigger-icon-padding; + } + @if $skin-name == 'fluent2' { + line-height: 16px; + } + @include mat3-border-radius; + } + + &.sf-top-icon-btn, + &.sf-bottom-icon-btn { + @include top-bottom-icon-btn; + padding: $btn-top-icon-bigger-padding; + } + + &.sf-round { + height: $btn-round-bigger-height; + line-height: 1; + padding: 0; + width: $btn-round-bigger-width; + @if $skin-name == 'Material3' { + border-radius: 50%; + } + + & .sf-btn-icon { + font-size: $btn-bigger-round-font-size; + line-height: $btn-bigger-round-icon-line-height; + width: auto; + } + } + + &.sf-rtl { + & .sf-icon-right { + margin-left: $btn-bigger-icon-margin; + margin-right: 0; + } + + & .sf-icon-left { + margin-left: 0; + margin-right: $btn-bigger-icon-margin; + } + } + + &.sf-small { + font-size: $btn-bigger-small-font-size; + line-height: $btn-bigger-small-text-line-height; + padding: $btn-bigger-small-padding; + + &.sf-round-corner { + @if $skin-name == 'Material3' { + border-radius: 25px; + padding: $btn-bigger-small-padding; + } + } + + & .sf-btn-icon { + font-size: $btn-bigger-small-icon-font-size; + width: $btn-icon-bigger-small-width; + + &.sf-icon-left { + margin-left: $btn-bigger-small-icon-margin; + width: $btn-bigger-small-icon-width; + } + + &.sf-icon-right { + margin-right: $btn-bigger-small-icon-margin; + width: $btn-bigger-small-icon-width; + } + + &.sf-icon-top { + padding-bottom: $btn-small-icon-top-bottom-padding; + width: auto; + } + + &.sf-icon-bottom { + padding-top: $btn-small-icon-top-bottom-padding; + width: auto; + } + } + + &.sf-icon-btn { + padding: $btn-bigger-small-icon-padding; + @include mat3-border-radius; + } + + &.sf-top-icon-btn, + &.sf-bottom-icon-btn { + @include top-bottom-icon-btn; + padding: $btn-top-icon-bigger-padding; + } + + &.sf-round { + height: $btn-round-bigger-small-height; + line-height: 1; + padding: 0; + width: $btn-round-bigger-small-width; + @if $skin-name == 'Material3' { + border-radius: 50%; + } + + & .sf-btn-icon { + font-size: $btn-bigger-small-round-font-size; + line-height: $btn-bigger-small-round-icon-line-height; + width: auto; + } + } + + &.sf-rtl { + & .sf-icon-right { + margin-left: $btn-bigger-small-icon-margin; + margin-right: 0; + } + + & .sf-icon-left { + margin-left: 0; + margin-right: $btn-bigger-small-icon-margin; + } + } + } + } +} + diff --git a/components/buttons/styles/button/_material3-dark-definition.scss b/components/buttons/styles/button/_material3-dark-definition.scss new file mode 100644 index 0000000..356e259 --- /dev/null +++ b/components/buttons/styles/button/_material3-dark-definition.scss @@ -0,0 +1 @@ +@import './material3-definition.scss'; diff --git a/components/buttons/styles/button/_material3-definition.scss b/components/buttons/styles/button/_material3-definition.scss new file mode 100644 index 0000000..fb9e32e --- /dev/null +++ b/components/buttons/styles/button/_material3-definition.scss @@ -0,0 +1,375 @@ +//layout variables +$btn-border: 1px solid !default; +$btn-icon-margin-top: 0 !default; +$btn-icon-btn-width: 1em !default; +$btn-icon-top-bottom-padding: 8px !default; +$btn-icon-small-width: 1em !default; +$btn-icon-bigger-small-width: 1em !default; +$btn-top-icon-padding: 12px 12px !default; +$btn-top-icon-bigger-padding: 16px 16px !default; +$btn-small-icon-top-bottom-padding: 6px !default; +$btn-icon-bigger-width: 1em !default; +$btn-focus-outline-offset: 0 !default; +$btn-active-outline-offset: 0 !default; +$btn-font-weight: 500 !default; +$btn-font-size: $text-sm !default; +$btn-small-font-size: 11px !default; +$btn-border-radius: 4px !default; +$btn-text-transform: none !default; +$btn-icon-font-size: $text-lg !default; +$btn-small-icon-font-size: $text-base !default; +$btn-round-small-height: 24px !default; +$btn-round-small-width: 24px !default; +$btn-round-height: 32px !default; +$btn-round-width: 32px !default; +$btn-round-bigger-small-height: 36px !default; +$btn-round-bigger-small-width: 36px !default; +$btn-round-bigger-height: 40px !default; +$btn-round-bigger-width: 40px !default; +$btn-round-font-size: $text-lg !default; +$btn-small-round-font-size: $text-base !default; +$btn-icon-margin: -.5em !default; +$btn-small-icon-margin: -.57143em !default; +$btn-icon-width: 2em !default; +$btn-small-icon-width: 2em !default; +$btn-round-icon-line-height: 1.5em !default; +$btn-small-round-icon-line-height: 1 !default; +$btn-text-line-height: 1 !default; +$btn-small-text-line-height: 1.092 !default; +$btn-padding: 8px 16px !default; +$btn-small-padding: 5px 12px !default; +$btn-icon-padding: 7px 7px !default; +$btn-small-icon-padding: 4px 4px !default; +$btn-bigger-small-font-size: $text-sm !default; +$btn-bigger-small-text-line-height: 1.476 !default; +$btn-bigger-small-padding: 7px 20px !default; +$btn-bigger-small-icon-font-size: $text-lg !default; +$btn-bigger-small-icon-margin: -.5em !default; +$btn-bigger-small-icon-width: 2em !default; +$btn-bigger-small-round-icon-line-height: 0 !default; +$btn-bigger-small-round-font-size: $text-lg !default; +$btn-bigger-icon-margin: -.2em !default; +$btn-bigger-icon-width: 2em !default; +$btn-bigger-text-line-height: 1.286 !default; +$btn-bigger-padding: 10px 24px !default; +$btn-bigger-font-size: $text-sm !default; +$btn-bigger-icon-font-size: 22px !default; +$btn-bigger-icon-top-bottom-padding: 8px !default; +$btn-bigger-icon-padding: 11px 11px !default; +$btn-bigger-round-icon-line-height: 1.5em !default; +$btn-bigger-round-font-size: $text-lg !default; +$btn-bigger-small-icon-padding: 6px 13px !default; + +//normal +$btn-color: rgba($secondary-text-color) !default; +$btn-bgcolor: $secondary-bg-color !default; +$btn-border-color: $btn-secondary-border-color; +$btn-hover-bgcolor: $secondary-bg-color-hover !default; +$btn-hover-border-color: $secondary-border-color-hover !default; +$btn-hover-color: rgba($secondary-text-color-hover) !default; +$btn-focus-bgcolor: $secondary-bg-color-focus !default; +$btn-focus-border-color: $secondary-border-color-hover !default; +$btn-focus-color: rgba($secondary-text-color-focus) !default; +$btn-active-outline: $btn-bgcolor 0 solid !default; +$btn-focus-outline: $btn-bgcolor 0 solid !default; +$btn-focus-outline-round: rgba($white) 0 solid !default; +$btn-active-border-color: $secondary-border-color-pressed !default; +$btn-active-bgcolor: $secondary-bg-color-pressed !default; +$btn-active-color: rgba($secondary-text-color-pressed) !default; +$btn-disabled-color: $secondary-text-color-disabled !default; +$btn-disabled-bgcolor: $secondary-bg-color-disabled !default; +$btn-disabled-border-color: $secondary-border-color-disabled !default; +$btn-active-box-shadow: $shadow-sm !default; +$btn-ripple-bgcolor: rgba($secondary-text-color, .24) !default; +$btn-link-bgcolor: transparent !default; +$btn-link-border-color: transparent !default; +$btn-link-color: rgba($info-dark) !default; +$btn-link-hover-color: rgba($info-dark) !default; +$btn-link-disabled-bgcolor: transparent !default; + +//primary +$btn-primary-outline: $btn-bgcolor 0 solid !default; +$btn-primary-color: rgba($primary-text) !default; +$btn-primary-hover-color: rgba($primary-text-hover) !default; +$btn-primary-focus-color: rgba($primary-text-focus) !default; +$btn-primary-active-color: rgba($primary-text-pressed) !default; +$btn-primary-bgcolor: rgba($primary-bg-color) !default; +$btn-primary-hover-bgcolor: $primary-bg-color-hover !default; +$btn-primary-active-bgcolor: $primary-bg-color-pressed !default; +$btn-primary-border-color: rgba($primary-border-color) !default; +$btn-primary-hover-border-color: $primary-border-color-hover !default; +$btn-primary-focus-border-color: $btn-primary-border-color !default; +$btn-primary-active-border-color: rgba($primary-bg-color) !default; +$btn-primary-focus-bgcolor: $primary-bg-color-focus !default; +$btn-primary-disabled-bgcolor: $primary-bg-color-disabled !default; +$btn-primary-disabled-color: $primary-text-disabled !default; +$btn-primary-disabled-border-color: $primary-border-color-disabled !default; +$btn-ripple-primary-bgcolor: rgba($primary-text, .24) !default; + +//outline +$btn-outline-color: rgba($secondary-outline) !default; +$btn-outline-bgcolor: transparent !default; +$btn-outline-hover-bgcolor: rgba($secondary-outline, .08) !default; +$btn-outline-hover-color: rgba($secondary-outline) !default; +$btn-outline-focus-bgcolor: $btn-focus-bgcolor !default; +$btn-outline-focus-color: $btn-focus-color !default; +$btn-outline-active-color: $btn-outline-color !default; +$btn-outline-active-bgcolor: rgba($secondary-outline, .12) !default; +$btn-outline-border-color: rgba($info-outline-border) !default; +$btn-outline-hover-border-color: rgba($info-outline-border) !default; +$btn-outline-focus-border-color: $btn-outline-border-color !default; +$btn-outline-default-focus-border-color: $btn-outline-border-color !default; +$btn-outline-active-border-color: $btn-outline-border-color !default; +$btn-outline-active-box-shadow: none !default; +$btn-outline-disabled-bgcolor: $secondary-bg-color-disabled !default; +$btn-outline-disabled-border-color: $success-border-color-disabled !default; +$btn-outline-disabled-color: $secondary-text-color-disabled !default; +$btn-outline-primary-color: $primary-outline !default; +$btn-outline-primary-focus-bgcolor: $btn-primary-bgcolor !default; +$btn-outline-primary-focus-color: rgba($white) !default; +$btn-outline-success-color: $success-outline !default; +$btn-outline-warning-color: $warning-outline !default; +$btn-outline-danger-color: $danger-outline !default; +$btn-outline-info-color: $info-outline !default; +$btn-outline-primary-hover-bgcolor: rgba($btn-outline-primary-color, .08) !default; +$btn-outline-success-hover-bgcolor: rgba($btn-outline-success-color, .08) !default; +$btn-outline-warning-hover-bgcolor: rgba($btn-outline-warning-color, .08) !default; +$btn-outline-danger-hover-bgcolor: rgba($btn-outline-danger-color, .08) !default; +$btn-outline-info-hover-bgcolor: rgba($btn-outline-info-color, .08) !default; +$btn-outline-primary-active-bgcolor: rgba($btn-outline-primary-color, .12) !default; +$btn-outline-success-active-bgcolor: rgba($btn-outline-success-color, .12) !default; +$btn-outline-warning-active-bgcolor: rgba($btn-outline-warning-color, .12) !default; +$btn-outline-danger-active-bgcolor: rgba($btn-outline-danger-color, .12) !default; +$btn-outline-info-active-bgcolor: rgba($btn-outline-info-color, .12) !default; + +//flat +$btn-flat-color: rgba($secondary-text-color) !default; +$btn-flat-border: $btn-border !default; +$btn-flat-border-color: $transparent !default; +$btn-flat-hover-color: $btn-flat-color !default; +$btn-flat-focus-color: $btn-focus-color !default; +$btn-flat-active-color: $btn-active-color !default; +$btn-flat-box-shadow: none !default; +$btn-flat-active-bgcolor: $btn-active-bgcolor !default; +$btn-flat-bgcolor: $transparent !default; +$btn-flat-hover-bgcolor: rgba($secondary-text-color, .08) !default; +$btn-flat-focus-bgcolor: $btn-flat-hover-bgcolor !default; +$btn-flat-hover-border-color: none !default; +$btn-flat-active-border-color: $btn-active-border-color !default; +$btn-flat-focus-border-color: $btn-flat-hover-border-color !default; +$btn-flat-active-box-shadow: none !default; +$btn-flat-disabled-border-color: $transparent !default; +$btn-flat-disabled-bgcolor: $transparent !default; +$btn-flat-disabled-color: $btn-disabled-color !default; +$btn-ripple-flat-bgcolor: rgba($secondary-text-color, .24) !default; +$btn-ripple-flat-primary-bgcolor: rgba($primary-text, .24) !default; +$btn-ripple-flat-success-bgcolor: rgba($success-text, .24) !default; +$btn-ripple-flat-info-bgcolor: rgba($info-text, .24) !default; +$btn-ripple-flat-warning-bgcolor: rgba($warning-text, .24) !default; +$btn-ripple-flat-danger-bgcolor: rgba($danger-text, .24) !default; + +//success +$btn-success-color: rgba($success-text) !default; +$btn-success-bgcolor: rgba($success-bg-color) !default; +$btn-success-hover-bgcolor: $success-bg-color-hover !default; +$btn-success-focus-bgcolor: $success-bg-color-focus !default; +$btn-success-active-bgcolor: $success-bg-color-pressed !default; +$btn-success-border-color: rgba($success-border-color) !default; +$btn-success-hover-border-color: $success-border-color-hover !default; +$btn-success-focus-border-color: $btn-success-border-color !default; +$btn-success-active-border-color: rgba($success-bg-color) !default; +$btn-success-disabled-bgcolor: $success-bg-color-disabled !default; +$btn-success-disabled-color: $success-text-disabled !default; +$btn-success-disabled-border-color: $success-border-color-disabled !default; +$btn-success-hover-color: rgba($success-text-hover) !default; +$btn-success-focus-color: rgba($success-text-focus) !default; +$btn-ripple-success-bgcolor: rgba($success-text, .24) !default; +$btn-success-active-color: $btn-success-color !default; + +//warning +$btn-warning-bgcolor: rgba($warning-bg-color) !default; +$btn-warning-color: rgba($warning-text) !default; +$btn-warning-hover-color: rgba($warning-text-hover) !default; +$btn-warning-hover-bgcolor: $warning-bg-color-hover !default; +$btn-warning-focus-bgcolor: $warning-bg-color-focus !default; +$btn-warning-active-bgcolor: $warning-bg-color-pressed !default; +$btn-warning-border-color: rgba($warning-border-color) !default; +$btn-warning-hover-border-color: $warning-border-color-hover !default; +$btn-warning-focus-border-color: $btn-warning-border-color !default; +$btn-warning-focus-color: rgba($warning-text-focus) !default; +$btn-warning-active-color: rgba($warning-text-pressed) !default; +$btn-warning-active-border-color: rgba($warning-bg-color) !default; +$btn-warning-disabled-bgcolor: $warning-bg-color-disabled !default; +$btn-warning-disabled-color: $warning-text-disabled !default; +$btn-warning-disabled-border-color: $warning-border-color-disabled !default; +$btn-ripple-warning-bgcolor: rgba($warning-text, .24) !default; + +//danger +$btn-danger-color: rgba($danger-text) !default; +$btn-danger-bgcolor: rgba($danger-bg-color) !default; +$btn-danger-hover-bgcolor: $danger-bg-color-hover !default; +$btn-danger-focus-bgcolor: $danger-bg-color-focus !default; +$btn-danger-active-bgcolor: $danger-bg-color-pressed !default; +$btn-danger-active-color: rgba($danger-text-pressed) !default; +$btn-danger-border-color: rgba($danger-border-color) !default; +$btn-danger-hover-border-color: $danger-border-color-hover !default; +$btn-danger-focus-border-color: $btn-danger-border-color !default; +$btn-danger-active-border-color: rgba($danger-bg-color) !default; +$btn-danger-disabled-bgcolor: $danger-bg-color-disabled !default; +$btn-danger-disabled-color: $warning-text-disabled !default; +$btn-danger-disabled-border-color: $danger-border-color-disabled !default; +$btn-danger-hover-color: rgba($danger-text-hover) !default; +$btn-ripple-danger-bgcolor: rgba($danger-text, .24) !default; + +//info +$btn-info-bgcolor: rgba($info-bg-color) !default; +$btn-info-color: rgba($info-text) !default; +$btn-info-hover-bgcolor: $info-bg-color-hover !default; +$btn-info-focus-bgcolor: $info-bg-color-focus !default; +$btn-info-active-bgcolor: $info-bg-color-pressed !default; +$btn-info-border-color: rgba($info-border-color) !default; +$btn-info-hover-border-color: $info-border-color-hover !default; +$btn-info-focus-border-color: $btn-info-border-color !default; +$btn-info-active-border-color: rgba($info-bg-color) !default; +$btn-info-disabled-bgcolor: $info-bg-color-disabled !default; +$btn-info-disabled-color: $info-text-disabled !default; +$btn-info-disabled-border-color: $info-border-color-disabled !default; +$btn-info-active-color: rgba($info-text-pressed) !default; +$btn-info-hover-color: rgba($info-text-hover) !default; +$btn-ripple-info-bgcolor: rgba($info-text, .24) !default; + +//round +$btn-round-focus-color: rgba($secondary-text-color) !default; +$btn-round-active-color: rgba($secondary-text-color-pressed) !default; +$btn-round-bgcolor: $btn-bgcolor !default; +$btn-round-border-color: $btn-border-color !default; +$btn-round-color: $btn-color !default; +$btn-round-hover-bgcolor: $btn-hover-bgcolor !default; +$btn-round-hover-border-color: $btn-hover-border-color !default; +$btn-round-hover-color: $btn-hover-color !default; + +//flatprimary +$btn-flat-primary-hover-bgcolor: rgba($primary-bg-color, .08) !default; +$btn-flat-primary-border-color: $btn-flat-border-color !default; +$btn-flat-primary-hover-border-color: none !default; +$btn-flat-primary-active-border-color: $transparent !default; +$btn-flat-primary-focus-border-color: $btn-flat-primary-border-color !default; +$btn-flat-primary-disabled-border-color: $transparent !default; +$btn-flat-primary-focus-bgcolor: rgba($primary-bg-color, .12) !default; +$btn-flat-disabled-color: $secondary-text-color-disabled !default; +$btn-flat-primary-disabled-color: $primary-text-disabled !default; +$btn-flat-primary-bgcolor: $btn-flat-bgcolor !default; +$btn-flat-primary-color: rgba($primary-bg-color) !default; +$btn-flat-primary-hover-color: rgba($primary-bg-color) !default; +$btn-flat-primary-focus-color: rgba($primary-bg-color) !default; +$btn-flat-primary-active-color: rgba($primary-bg-color) !default; +$btn-flat-primary-active-bgcolor: rgba($primary-bg-color, .12) !default; + +//flatsuccess +$btn-flat-success-color: rgba($success-bg-color) !default; +$btn-flat-success-hover-color: rgba($success-bg-color) !default; +$btn-flat-success-focus-color: rgba($success-bg-color) !default; +$btn-flat-success-active-color: rgba($success-bg-color) !default; +$btn-flat-success-active-bgcolor: rgba($success-bg-color, .12) !default; +$btn-flat-success-disabled-color: $btn-success-disabled-color !default; +$btn-flat-success-bgcolor: $btn-flat-bgcolor !default; +$btn-flat-success-hover-bgcolor: rgba($success-bg-color, .08) !default; +$btn-flat-success-border-color: $transparent !default; +$btn-flat-success-hover-border-color: $transparent !default; +$btn-flat-success-active-border-color: $transparent !default; +$btn-flat-success-focus-border-color: $transparent !default; +$btn-flat-success-disabled-border-color: $transparent !default; +$btn-flat-success-focus-bgcolor: rgba($success-bg-color, .12) !default; + +//flatinfo +$btn-flat-info-bgcolor: $btn-flat-bgcolor !default; +$btn-flat-info-hover-bgcolor: rgba($info-bg-color, .08) !default; +$btn-flat-info-border-color: $btn-flat-border-color !default; +$btn-flat-info-hover-border-color: $btn-flat-info-border-color !default; +$btn-flat-info-active-border-color: $btn-flat-info-border-color !default; +$btn-flat-info-focus-border-color: $btn-flat-info-border-color !default; +$btn-flat-info-disabled-border-color: $transparent !default; +$btn-flat-info-focus-bgcolor: rgba($info-bg-color, .12) !default; +$btn-flat-info-color: rgba($info-bg-color) !default; +$btn-flat-info-disabled-color: $btn-info-disabled-color !default; +$btn-flat-info-hover-color: rgba($info-bg-color) !default; +$btn-flat-info-focus-color: rgba($info-bg-color) !default; +$btn-flat-info-active-color: rgba($info-bg-color) !default; +$btn-flat-info-active-bgcolor: rgba($info-bg-color, .12) !default; + +//flatwarning +$btn-flat-warning-bgcolor: $btn-flat-bgcolor !default; +$btn-flat-warning-hover-bgcolor: rgba($warning-bg-color, .08) !default; +$btn-flat-warning-border-color: $btn-flat-border-color !default; +$btn-flat-warning-hover-border-color: $btn-flat-warning-border-color !default; +$btn-flat-warning-active-border-color: $btn-flat-warning-border-color !default; +$btn-flat-warning-focus-border-color: $btn-flat-warning-border-color !default; +$btn-flat-warning-disabled-border-color: $transparent !default; +$btn-flat-warning-focus-bgcolor: rgba($warning-bg-color, .12) !default; +$btn-flat-warning-color: rgba($warning-bg-color) !default; +$btn-flat-warning-disabled-color: $btn-warning-disabled-color !default; +$btn-flat-warning-hover-color: rgba($warning-bg-color) !default; +$btn-flat-warning-focus-color: rgba($warning-bg-color) !default; +$btn-flat-warning-active-color: rgba($warning-bg-color) !default; +$btn-flat-warning-active-bgcolor: rgba($warning-bg-color, .12) !default; + +//flatdanger +$btn-flat-danger-bgcolor: $btn-flat-bgcolor !default; +$btn-flat-danger-hover-bgcolor: rgba($danger-bg-color, .08) !default; +$btn-flat-danger-border-color: $btn-flat-border-color !default; +$btn-flat-danger-hover-border-color: $btn-flat-danger-border-color !default; +$btn-flat-danger-active-border-color: $btn-flat-danger-border-color !default; +$btn-flat-danger-focus-border-color: $btn-flat-danger-border-color !default; +$btn-flat-danger-disabled-border-color: $transparent !default; +$btn-flat-danger-focus-bgcolor: rgba($danger-bg-color, .12) !default; +$btn-flat-danger-color: rgba($danger-bg-color) !default; +$btn-flat-danger-hover-color: rgba($danger-bg-color) !default; +$btn-flat-danger-focus-color: rgba($danger-bg-color) !default; +$btn-flat-danger-active-color: rgba($danger-bg-color) !default; +$btn-flat-danger-active-bgcolor: rgba($danger-bg-color, .12) !default; +$btn-flat-danger-disabled-color: $btn-danger-disabled-color !default; + +//outlineprimary +$btn-outline-primary-disabled-color: $primary-text-disabled !default; +$btn-outline-primary-disabled-border-color: $success-border-color-disabled !default; +$btn-outline-primary-hover-border-color: rgba($primary) !default; +$btn-outline-primary-hover-bgcolor: $btn-primary-bgcolor !default; +$btn-outline-primary-focus-border-color: rgba($primary) !default; +$btn-outline-primary-active-border-color: rgba($primary) !default; + +//outlinesuccess +$btn-outline-success-disabled-color: $success-text-disabled !default; +$btn-outline-success-disabled-border-color: $success-border-color-disabled !default; +$btn-outline-success-hover-bgcolor: $btn-success-bgcolor !default; + +//outlineinfo +$btn-outline-info-disabled-color: $info-text-disabled !default; +$btn-outline-info-disabled-border-color: $success-border-color-disabled !default; + +//outlinewarning +$btn-outline-warning-disabled-color: $warning-text-disabled !default; +$btn-outline-warning-disabled-border-color: $success-border-color-disabled !default; + +//outlinedanger +$btn-outline-danger-disabled-color: $danger-text-disabled !default; +$btn-outline-danger-disabled-border-color: $success-border-color-disabled !default; + +//size +$btn-box-shadow: $shadow-sm !default; +$btn-hover-focus-box-shadow: $shadow-md !default; +$btn-flat-primary-disabled-bgcolor: $transparent !default; +$btn-flat-success-disabled-bgcolor: $transparent !default; +$btn-flat-info-disabled-bgcolor: $transparent !default; +$btn-flat-warning-disabled-bgcolor: $transparent !default; +$btn-flat-danger-disabled-bgcolor: $transparent !default; +$btn-focus-box-shadow: none !default; + +// bootstrap5 theme variables +$btn-primary-focus-box-shadow: $shadow-md !default; +$btn-success-focus-box-shadow: $shadow-md !default; +$btn-danger-focus-box-shadow: $shadow-md !default; +$btn-info-focus-box-shadow: $shadow-md !default; +$btn-warning-focus-box-shadow: $shadow-md !default; + +//Material 3 +$btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default; diff --git a/components/buttons/styles/button/_mixin.scss b/components/buttons/styles/button/_mixin.scss new file mode 100644 index 0000000..8619278 --- /dev/null +++ b/components/buttons/styles/button/_mixin.scss @@ -0,0 +1,480 @@ +@use 'sass:color'; +@mixin button-focus { + background: $btn-focus-bgcolor; + @if $skin-name == 'Material3' { + border-image: $btn-focus-border-color; + } + @else { + border-color: $btn-focus-border-color; + } + color: $btn-focus-color; + outline: $btn-focus-outline; + outline-offset: $btn-focus-outline-offset; + @if $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' { + box-shadow: $btn-hover-focus-box-shadow; + } +} + +@mixin button-active { + background: $btn-active-bgcolor; + @if $skin-name == 'Material3' { + border-image: $btn-active-border-color; + } + @else { + border-color: $btn-active-border-color; + } + color: $btn-active-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-active-box-shadow; + } +} + +@mixin primary-focus { + background: $btn-primary-focus-bgcolor; + border-color: $btn-primary-focus-border-color; + color: $btn-primary-focus-color; + outline: $btn-primary-outline; + @if $skin-name == 'Material3' { + box-shadow: $btn-primary-focus-box-shadow; + } + @else { + @if $skin-name != 'tailwind3' { + box-shadow: $btn-hover-focus-box-shadow; + } + } +} + +@mixin primary-active { + background: $btn-primary-active-bgcolor; + border-color: $btn-primary-active-border-color; + color: $btn-primary-active-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-active-box-shadow; + } +} + +@mixin primary-disabled { + background: $btn-primary-disabled-bgcolor; + border-color: $btn-primary-disabled-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-primary-disabled-color; +} + +@mixin outline-focus { + @if $skin-name == 'Material3' { + background: $btn-outline-active-bgcolor; + border: 1px solid $btn-outline-border-color; + color: $btn-outline-color; + } + @else if $skin-name == 'fluent2' { + color: $secondary-outline-button-text-color-hover; + } + @else if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-hover-focus-box-shadow; + } + @else if $skin-name == 'tailwind3' { + background: $secondary-bg-color-focus; + border: 1px solid $secondary-border-color-focus; + color: $secondary-text-color-focus; + } +} + +@mixin outline-active { + + background: $btn-outline-active-bgcolor; + border-color: $btn-outline-active-border-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-outline-active-box-shadow; + } + color: $btn-outline-active-color; +} + +@mixin outline-primary-focus { + @if $skin-name == 'Material3' { + background: $btn-outline-primary-active-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-primary-color); + } + @if $skin-name == 'tailwind3' { + background: $primary-bg-color-focus; + border: 1px solid $primary-border-color-focus; + color: $primary-text-focus; + } +} + +@mixin outline-primary-active { + @if ($skin-name == 'bootstrap5.3') { + background: $btn-primary-bgcolor; + } + @else { + background: $btn-primary-active-bgcolor; + border-color: $btn-outline-primary-active-border-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-outline-active-box-shadow; + } + } + color: $btn-primary-active-color; + @if $skin-name == 'Material3' { + background: $btn-outline-primary-active-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-primary-color); + } +} + +@mixin outline-success-focus { + @if $skin-name == 'Material3' { + background: $btn-outline-success-active-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-success-color); + } + @else if $skin-name == 'tailwind3' { + background: $success-bg-color-focus; + border: 1px solid $success-border-color-focus; + color: $success-text-focus; + } +} + +@mixin outline-success-active { + background: $btn-success-active-bgcolor; + border-color: $btn-success-active-border-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-outline-active-box-shadow; + } + color: $btn-success-active-color; + @if $skin-name == 'Material3' { + background: $btn-outline-success-active-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-success-color); + } +} + +@mixin outline-info-focus { + @if $skin-name == 'Material3' { + background: $btn-outline-info-active-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-info-color); + } + @else if $skin-name == 'tailwind3' { + background: $info-bg-color-focus; + border: 1px solid $info-border-color-focus; + color: $info-text-focus; + } +} + +@mixin outline-info-active { + @if ($skin-name == 'bootstrap5.3') { + background: $btn-info-bgcolor; + } + @else { + background: $btn-info-active-bgcolor; + border-color: $btn-info-active-border-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-outline-active-box-shadow; + } + } + color: $btn-info-active-color; + @if $skin-name == 'Material3' { + background: $btn-outline-info-active-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-info-color); + } +} + +@mixin outline-warning-focus { + @if $skin-name == 'Material3' { + background: $btn-outline-warning-active-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-warning-color); + } + @else if $skin-name == 'tailwind3' { + background: $warning-bg-color-focus; + border: 1px solid $warning-border-color-focus; + color: $warning-text-focus; + } +} + +@mixin outline-warning-active { + background: $btn-warning-bgcolor; + border-color: transparent; + background: $btn-warning-active-bgcolor; + border-color: $btn-warning-active-border-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-outline-active-box-shadow; + } + color: $btn-warning-active-color; + @if $skin-name == 'Material3' { + background: $btn-outline-warning-active-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-warning-color); + } +} + +@mixin outline-danger-focus { + @if $skin-name == 'Material3' { + background: $btn-outline-danger-active-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-danger-color); + } + @else if $skin-name == 'tailwind3' { + background: $danger-bg-color-focus; + border: 1px solid $danger-border-color-focus; + color: $danger-text-focus; + } +} + +@mixin outline-danger-active { + background: $btn-danger-active-bgcolor; + border-color: $btn-danger-active-border-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-outline-active-box-shadow; + } + color: $btn-danger-active-color; + @if $skin-name == 'Material3' { + background: $btn-outline-danger-active-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-danger-color); + } +} + +@mixin outline-disabled { + background: $btn-outline-bgcolor; + @if $skin-name == 'bootstrap5.3' { + border-color: $btn-outline-disabled-border-color; + color: $btn-outline-disabled-color; + } + @else if $skin-name == 'fluent2' { + background: $btn-outline-disabled-bgcolor !important; /* stylelint-disable-line declaration-no-important */ + border-color: $btn-outline-disabled-border-color !important; /* stylelint-disable-line declaration-no-important */ + color: $btn-outline-disabled-color !important; /* stylelint-disable-line declaration-no-important */ + } + @else if $skin-name == 'tailwind3' { + border: 1px solid $secondary-border-color-disabled; + color: $secondary-text-color-disabled; + } + @else { + border-color: $btn-outline-primary-disabled-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-outline-primary-disabled-color; + } +} + +@mixin outline-primary-disabled { + @if $skin-name == 'bootstrap5.3' { + background: $btn-outline-primary-disabled-border-color; + } + @else { + background: $btn-outline-bgcolor; + } + border-color: $btn-outline-primary-disabled-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-outline-primary-disabled-color; +} + +@mixin outline-success-disabled { + @if $skin-name == 'bootstrap5.3' { + background: $btn-outline-success-disabled-border-color; + } + @else { + background: $btn-outline-bgcolor; + } + border-color: $btn-outline-success-disabled-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-outline-success-disabled-color; +} + +@mixin outline-info-disabled { + @if $skin-name == 'bootstrap5.3' { + background: $btn-info-disabled-border-color; + } + @else { + background: $btn-outline-bgcolor; + } + border-color: $btn-outline-info-disabled-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-outline-info-disabled-color; +} + +@mixin outline-warning-disabled { + @if $skin-name == 'bootstrap5.3' { + background: $btn-outline-warning-disabled-border-color; + } + @else { + background: $btn-outline-bgcolor; + } + border-color: $btn-outline-warning-disabled-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-outline-warning-disabled-color; +} + +@mixin outline-danger-disabled { + @if $skin-name == 'bootstrap5.3' { + background: $btn-outline-danger-disabled-border-color; + } + @else { + background: $btn-outline-bgcolor; + } + border-color: $btn-outline-danger-disabled-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-outline-danger-disabled-color; +} + +@mixin success-focus { + background: $btn-success-focus-bgcolor; + border-color: $btn-success-focus-border-color; + color: $btn-success-hover-color; + @if $skin-name == 'Material3' { + box-shadow: $btn-success-focus-box-shadow; + } + @else { + @if $skin-name != 'tailwind3' { + box-shadow: $btn-hover-focus-box-shadow; + } + } +} + +@mixin success-active { + background: $btn-success-active-bgcolor; + border-color: $btn-success-active-border-color; + color: $btn-success-active-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-active-box-shadow; + } +} + +@mixin info-focus { + background: $btn-info-focus-bgcolor; + border-color: $btn-info-focus-border-color; + color: $btn-info-hover-color; + @if $skin-name != 'tailwind3' { + box-shadow: $btn-hover-focus-box-shadow; + } +} + +@mixin info-active { + background: $btn-info-active-bgcolor; + color: $btn-info-active-color; + border-color: $btn-info-active-border-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-active-box-shadow; + } +} + +@mixin warning-focus { + background: $btn-warning-focus-bgcolor; + border-color: $btn-warning-focus-border-color; + color: $btn-warning-hover-color; + @if $skin-name == 'Material3' { + box-shadow: $btn-warning-focus-box-shadow; + } + @else { + @if $skin-name != 'tailwind3' { + box-shadow: $btn-hover-focus-box-shadow; + } + } +} + +@mixin warning-active { + background: $btn-warning-active-bgcolor; + border-color: $btn-warning-active-border-color; + color: $btn-warning-active-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-active-box-shadow; + } +} + +@mixin danger-focus { + background: $btn-danger-focus-bgcolor; + border-color: $btn-danger-focus-border-color; + color: $btn-danger-hover-color; + @if $skin-name == 'Material3' { + box-shadow: $btn-danger-focus-box-shadow; + } + @else { + @if $skin-name != 'tailwind3' { + box-shadow: $btn-hover-focus-box-shadow; + } + } +} + +@mixin danger-active { + background: $btn-danger-active-bgcolor; + border-color: $btn-danger-active-border-color; + color: $btn-danger-active-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-active-box-shadow; + } +} + +@mixin link-focus { + border-radius: 4px; + text-decoration: underline; +} + +@mixin link-hover { + border-radius: 4px; + text-decoration: underline; +} + +@mixin success-disabled { + background: $btn-success-disabled-bgcolor; + @if $skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3' { + border-color: $success-border-color-disabled; + } + @else { + border-color: $btn-disabled-border-color; + } + box-shadow: $btn-flat-box-shadow; + color: $btn-success-disabled-color; +} + +@mixin info-disabled { + background: $btn-info-disabled-bgcolor; + @if ($skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3') { + border-color: $btn-info-disabled-border-color; + } + @else { + border-color: $btn-disabled-border-color; + } + box-shadow: $btn-flat-box-shadow; + color: $btn-info-disabled-color; +} + +@mixin warning-disabled { + background: $btn-warning-disabled-bgcolor; + @if ($skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3') { + border-color: $btn-warning-disabled-border-color; + } + @else { + border-color: $btn-disabled-border-color; + } + box-shadow: $btn-flat-box-shadow; + color: $btn-warning-disabled-color; +} + +@mixin danger-disabled { + background: $btn-danger-disabled-bgcolor; + @if ($skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3') { + border-color: $btn-danger-disabled-border-color; + } + @else { + border-color: $btn-disabled-border-color; + } + box-shadow: $btn-flat-box-shadow; + color: $btn-danger-disabled-color; +} + +@mixin link-disabled { + @if $skin-name == 'bootstrap5.3' { + color: $secondary-border-color-disabled; + text-decoration: underline; + } + @else if $skin-name == 'tailwind3' { + color: $btn-link-disabled-color; + } + @else { + color: $btn-disabled-color; + } + background: $btn-link-disabled-bgcolor; + box-shadow: $btn-flat-box-shadow; + text-decoration: none; +} diff --git a/components/buttons/styles/button/_theme.scss b/components/buttons/styles/button/_theme.scss new file mode 100644 index 0000000..d5f81d1 --- /dev/null +++ b/components/buttons/styles/button/_theme.scss @@ -0,0 +1,1677 @@ +@use 'sass:color'; +@import 'mixin.scss'; +@include export-module('button-theme') { + + /* stylelint-disable property-no-vendor-prefix */ + .sf-btn, + .sf-css.sf-btn { + -webkit-tap-highlight-color: transparent; + background: $btn-bgcolor; + @if $skin-name == 'Material3' { + border-image: $btn-border-color; + } + @else { + border-color: $btn-border-color; + } + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-box-shadow; + } + color: $btn-color; + transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1); + @at-root { + &:hover { + background: $btn-hover-bgcolor; + @if $skin-name == 'Material3' { + border-image: $btn-hover-border-color; + } + @else { + border-color: $btn-hover-border-color; + } + box-shadow: $btn-hover-focus-box-shadow; + color: $btn-hover-color; + } + + &:focus { // both keyboard and focus + @include button-focus; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-bgcolor; + color: $btn-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active { + @include button-active; + } + + &.sf-active { + background: $btn-active-bgcolor; + @if $skin-name == 'Material3' { + border-image: $btn-active-border-color; + } + @else { + border-color: $btn-active-border-color; + } + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-active-box-shadow; + } + color: $btn-active-color; + @if $skin-name == 'fluent2' { + background: $secondary-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */ + border-color: $secondary-border-color-selected !important; /* stylelint-disable-line declaration-no-important */ + color: $secondary-text-color-selected !important; /* stylelint-disable-line declaration-no-important */ + } + } + + &:disabled, + &.sf-disabled { + background: $btn-disabled-bgcolor; + border-color: $btn-disabled-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-disabled-color; + } + + &.sf-disabled { + @if $skin-name == 'fluent2' or $skin-name == 'bootstrap5.3' { + opacity: 1; + } + } + + & .sf-ripple-element { + background: $btn-ripple-bgcolor; + } + + &.sf-round, + &.sf-round-edge { + background: $btn-round-bgcolor; + border-color: $btn-round-border-color; + color: $btn-round-color; + + &:hover { + background: $btn-round-hover-bgcolor; + border-color: $btn-round-hover-border-color; + color: $btn-round-hover-color; + } + + &:focus { + background: $btn-focus-bgcolor; + @if $skin-name == 'Material3' { + border-image: $btn-focus-border-color; + } + @else { + border-color: $btn-focus-border-color; + } + box-shadow: $btn-box-shadow; + color: $btn-round-focus-color; + outline: $btn-focus-outline-round; + outline-offset: $btn-focus-outline-offset; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-bgcolor; + color: $btn-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active { + background: $btn-active-bgcolor; + @if $skin-name == 'Material3' { + border-image: $btn-active-border-color; + } + @else { + border-color: $btn-active-border-color; + } + box-shadow: $btn-active-box-shadow; + color: $btn-round-active-color; + outline: $btn-active-outline; + outline-offset: $btn-active-outline-offset; + } + + &:disabled, + &.sf-disabled { + background: $btn-disabled-bgcolor; + border-color: $btn-disabled-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-disabled-color; + } + + &.sf-primary, + &.sf-filled { + &:hover { + @if $skin-name != 'fluent2' { + border-color: $btn-primary-bgcolor; + } + } + + &:focus { + outline: $btn-focus-outline-round; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-primary-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-primary-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-primary-bgcolor; + color: $btn-primary-color; + box-shadow: $btn-focus-box-shadow; + } + } + } + + &.sf-success { + &:hover { + @if $skin-name != 'fluent2' { + border-color: $btn-success-bgcolor; + } + } + + &:focus { + outline: $btn-focus-outline-round; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-success-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-success-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-success-bgcolor; + color: $btn-success-color; + box-shadow: $btn-focus-box-shadow; + } + } + } + + &.sf-info { + &:hover { + @if $skin-name != 'fluent2' { + border-color: $btn-info-bgcolor; + } + } + + &:focus { + outline: $btn-focus-outline-round; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-info-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-info-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-info-bgcolor; + color: $btn-info-color; + box-shadow: $btn-focus-box-shadow; + } + } + } + + &.sf-warning { + &:hover { + @if $skin-name != 'fluent2' { + border-color: $btn-warning-bgcolor; + } + } + + &:focus { + outline: $btn-focus-outline-round; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-warning-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-warning-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-warning-bgcolor; + color: $btn-warning-color; + box-shadow: $btn-focus-box-shadow; + } + } + } + + &.sf-danger { + &:hover { + @if $skin-name != 'fluent2' { + border-color: $btn-danger-bgcolor; + } + } + + &:focus { + outline: $btn-focus-outline-round; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-danger-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-danger-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-danger-bgcolor; + color: $btn-danger-color; + box-shadow: $btn-focus-box-shadow; + } + } + } + } + + &.sf-filled { + background: $btn-primary-bgcolor; + border-color: $btn-primary-border-color; + color: $btn-primary-color; + @if $skin-name == 'Material3' { + box-shadow: $btn-focus-box-shadow; + } + + &:hover { + background: $btn-primary-hover-bgcolor; + @if $skin-name != 'Material3' { + border-color: $btn-primary-hover-border-color; + } + @if $skin-name == 'Material3' { + box-shadow: $btn-primary-focus-box-shadow; + } + @else { + box-shadow: $btn-hover-focus-box-shadow; + } + color: $btn-primary-hover-color; + } + + &:focus { + @include primary-focus; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-primary-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + box-shadow: $btn-primary-focus-box-shadow; + border-color: $btn-keyboard-focus-border-color; + background-color: $primary-bg-color-focus; + } + @if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-primary-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-primary-bgcolor; + color: $btn-primary-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active { + @include primary-active; + } + + &.sf-active { + background: $btn-primary-active-bgcolor; + border-color: $btn-primary-active-border-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-active-box-shadow; + } + color: $btn-primary-active-color; + @if $skin-name == 'fluent2' { + background: $primary-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */ + border-color: $primary-border-color-selected !important; /* stylelint-disable-line declaration-no-important */ + color: $primary-text-selected !important; /* stylelint-disable-line declaration-no-important */ + } + } + + &:disabled, + &.sf-disabled { + @include primary-disabled; + } + + & .sf-ripple-element { + background: $btn-ripple-primary-bgcolor; + } + } + + &.sf-success { + background: $btn-success-bgcolor; + border-color: $btn-success-border-color; + color: $btn-success-color; + @if $skin-name == 'Material3' { + box-shadow: $btn-focus-box-shadow; + } + + &:hover { + background: $btn-success-hover-bgcolor; + @if $skin-name != 'Material3' { + border-color: $btn-success-hover-border-color; + } + @if $skin-name == 'Material3' { + box-shadow: $btn-primary-focus-box-shadow; + } + @else { + box-shadow: $btn-hover-focus-box-shadow; + } + color: $btn-success-hover-color; + } + + &:focus { + @include success-focus; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-success-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-success-focus-box-shadow; + background-color: $success-bg-color-focus; + color: $success-text-focus; + } + @if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-success-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-success-bgcolor; + color: $btn-success-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + @include success-active; + } + + &.sf-active { + @if $skin-name == 'fluent2' { + background: $success-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */ + border-color: $success-border-color-selected !important; /* stylelint-disable-line declaration-no-important */ + color: $success-text-pressed !important; /* stylelint-disable-line declaration-no-important */ + } + } + + &:disabled, + &.sf-disabled { + @include success-disabled; + } + + & .sf-ripple-element { + background: $btn-ripple-success-bgcolor; + } + } + + &.sf-info { + background: $btn-info-bgcolor; + border-color: $btn-info-border-color; + color: $btn-info-color; + @if $skin-name == 'Material3' { + box-shadow: $btn-focus-box-shadow; + } + + &:hover { + background: $btn-info-hover-bgcolor; + @if $skin-name != 'Material3' { + border-color: $btn-info-hover-border-color; + } + @if $skin-name == 'Material3' { + box-shadow: $btn-primary-focus-box-shadow; + } + @else { + box-shadow: $btn-hover-focus-box-shadow; + } + color: $btn-info-hover-color; + } + + &:focus { + @include info-focus; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-info-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-info-focus-box-shadow; + background-color: $info-bg-color-focus; + } + @if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-info-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-info-bgcolor; + color: $btn-info-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + @include info-active; + } + + &.sf-active { + @if $skin-name == 'fluent2' { + background: $info-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */ + border-color: $info-border-color-selected !important; /* stylelint-disable-line declaration-no-important */ + color: $btn-info-active-color !important; /* stylelint-disable-line declaration-no-important */ + } + } + + &:disabled, + &.sf-disabled { + @include info-disabled; + } + + & .sf-ripple-element { + background: $btn-ripple-info-bgcolor; + } + } + + &.sf-warning { + background: $btn-warning-bgcolor; + border-color: $btn-warning-border-color; + color: $btn-warning-color; + @if $skin-name == 'Material3' { + box-shadow: $btn-focus-box-shadow; + } + + &:hover { + background: $btn-warning-hover-bgcolor; + @if $skin-name != 'Material3' { + border-color: $btn-warning-hover-border-color; + } + @if $skin-name == 'Material3' { + box-shadow: $btn-primary-focus-box-shadow; + } + @else { + box-shadow: $btn-hover-focus-box-shadow; + } + color: $btn-warning-hover-color; + } + + &:focus { + @include warning-focus; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-warning-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-warning-focus-box-shadow; + background-color: $warning-bg-color-focus; + } + @if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-warning-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-warning-bgcolor; + color: $btn-warning-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + @include warning-active; + } + + &.sf-active { + @if $skin-name == 'fluent2' { + background: $warning-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */ + border-color: $warning-border-color-selected !important; /* stylelint-disable-line declaration-no-important */ + color: $btn-warning-active-color !important; /* stylelint-disable-line declaration-no-important */ + } + } + + &:disabled, + &.sf-disabled { + @include warning-disabled; + } + + & .sf-ripple-element { + background: $btn-ripple-warning-bgcolor; + } + } + + &.sf-danger { + background: $btn-danger-bgcolor; + border-color: $btn-danger-border-color; + color: $btn-danger-color; + @if $skin-name == 'Material3' { + box-shadow: $btn-focus-box-shadow; + } + + &:hover { + background: $btn-danger-hover-bgcolor; + @if $skin-name != 'Material3' { + border-color: $btn-danger-hover-border-color; + } + @if $skin-name == 'Material3' { + box-shadow: $btn-primary-focus-box-shadow; + } + @else { + box-shadow: $btn-hover-focus-box-shadow; + } + color: $btn-danger-hover-color; + } + + &:focus { + @include danger-focus; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-danger-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-danger-focus-box-shadow; + background-color: $danger-bg-color-focus; + color: $danger-text-focus; + } + @if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-danger-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-danger-bgcolor; + color: $btn-danger-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active { + @include danger-active; + } + + &.sf-active { + background: $btn-danger-active-bgcolor; + border-color: $btn-danger-active-border-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-active-box-shadow; + } + color: $btn-danger-active-color; + @if $skin-name == 'fluent2' { + background: $danger-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */ + border-color: $danger-border-color-selected !important; /* stylelint-disable-line declaration-no-important */ + color: $danger-text-pressed !important; /* stylelint-disable-line declaration-no-important */ + } + } + + &:disabled, + &.sf-disabled { + @include danger-disabled; + } + + & .sf-ripple-element { + background: $btn-ripple-danger-bgcolor; + } + } + + &.sf-flat { + background: $btn-flat-bgcolor; + border-color: $btn-flat-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-flat-color; + + &:hover { + background: $btn-flat-hover-bgcolor; + border-color: $btn-flat-hover-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-flat-hover-color; + } + + &:focus { + background: $btn-flat-focus-bgcolor; + border-color: $btn-flat-focus-border-color; + color: $btn-flat-focus-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-flat-box-shadow; + } + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-bgcolor; + color: $btn-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + background: $btn-flat-active-bgcolor; + border-color: $btn-flat-active-border-color; + color: $btn-flat-active-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-flat-active-box-shadow; + } + } + + &:disabled, + &.sf-disabled { + background: $btn-flat-disabled-bgcolor; + border-color: $btn-flat-disabled-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-flat-disabled-color; + } + + & .sf-ripple-element { + background: $btn-ripple-flat-bgcolor; + } + + &.sf-primary, + &.sf-filled { + background: $btn-flat-primary-bgcolor; + border-color: $btn-flat-primary-border-color; + color: $btn-flat-primary-color; + + &:hover { + background: $btn-flat-primary-hover-bgcolor; + border-color: $btn-flat-primary-hover-border-color; + color: $btn-flat-primary-hover-color; + } + + &:focus { + background: $btn-flat-primary-focus-bgcolor; + border-color: $btn-flat-primary-focus-border-color; + color: $btn-flat-primary-focus-color; + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-primary-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + color: $btn-primary-color; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-primary-focus-box-shadow; + background-color: $primary-bg-color-focus; + } + @if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-primary-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-primary-bgcolor; + color: $btn-primary-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + background: $btn-flat-primary-active-bgcolor; + border-color: $btn-flat-primary-active-border-color; + color: $btn-flat-primary-active-color; + } + + &:disabled, + &.sf-disabled { + background: $btn-flat-primary-disabled-bgcolor; + border-color: $btn-flat-primary-disabled-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-flat-primary-disabled-color; + } + + & .sf-ripple-element { + background: $btn-ripple-flat-primary-bgcolor; + } + } + + &.sf-success { + background: $btn-flat-success-bgcolor; + border-color: $btn-flat-success-border-color; + color: $btn-flat-success-color; + + &:hover { + background: $btn-flat-success-hover-bgcolor; + border-color: $btn-flat-success-hover-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-flat-success-hover-color; + } + + &:focus { + background: $btn-flat-success-focus-bgcolor; + border-color: $btn-flat-success-focus-border-color; + color: $btn-flat-success-focus-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-flat-box-shadow; + } + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-success-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + color: $btn-success-color; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-success-focus-box-shadow; + background-color: $success-bg-color-focus; + color: $success-text-focus; + } + @if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-success-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-success-bgcolor; + color: $btn-success-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + background: $btn-flat-success-active-bgcolor; + border-color: $btn-flat-success-active-border-color; + color: $btn-flat-success-active-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-flat-active-box-shadow; + } + } + + &:disabled, + &.sf-disabled { + background: $btn-flat-success-disabled-bgcolor; + border-color: $btn-flat-success-disabled-border-color; + color: $btn-flat-success-disabled-color; + } + + & .sf-ripple-element { + background: $btn-ripple-flat-success-bgcolor; + } + } + + &.sf-info { + background: $btn-flat-info-bgcolor; + border-color: $btn-flat-info-border-color; + color: $btn-flat-info-color; + + &:hover { + background: $btn-flat-info-hover-bgcolor; + border-color: $btn-flat-info-hover-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-flat-info-hover-color; + } + + &:focus { + background: $btn-flat-info-focus-bgcolor; + border-color: $btn-flat-info-focus-border-color; + color: $btn-flat-info-focus-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-flat-box-shadow; + } + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-info-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + color: $btn-info-color; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-info-focus-box-shadow; + background-color: $info-bg-color-focus; + } + @if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-info-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-info-bgcolor; + color: $btn-info-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + background: $btn-flat-info-active-bgcolor; + border-color: $btn-flat-info-active-border-color; + color: $btn-flat-info-active-color; + @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' { + box-shadow: $btn-flat-active-box-shadow; + } + } + + &:disabled, + &.sf-disabled { + background: $btn-flat-info-disabled-bgcolor; + border-color: $btn-flat-info-disabled-border-color; + color: $btn-flat-info-disabled-color; + } + + & .sf-ripple-element { + background: $btn-ripple-flat-info-bgcolor; + } + } + + &.sf-warning { + background: $btn-flat-warning-bgcolor; + border-color: $btn-flat-warning-border-color; + color: $btn-flat-warning-color; + + &:hover { + background: $btn-flat-warning-hover-bgcolor; + border-color: $btn-flat-warning-hover-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-flat-warning-hover-color; + } + + &:focus { + background: $btn-flat-warning-focus-bgcolor; + border-color: $btn-flat-warning-focus-border-color; + color: $btn-flat-warning-focus-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-flat-box-shadow; + } + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-warning-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + color: $btn-warning-color; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-warning-focus-box-shadow; + background-color: $warning-bg-color-focus; + } + @if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-warning-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-warning-bgcolor; + color: $btn-warning-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + background: $btn-flat-warning-active-bgcolor; + border-color: $btn-flat-warning-active-border-color; + color: $btn-flat-warning-active-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-flat-active-box-shadow; + } + } + + &:disabled, + &.sf-disabled { + background: $btn-flat-warning-disabled-bgcolor; + border-color: $btn-flat-warning-disabled-border-color; + color: $btn-flat-warning-disabled-color; + } + + & .sf-ripple-element { + background: $btn-ripple-flat-warning-bgcolor; + } + } + + &.sf-danger { + background: $btn-flat-danger-bgcolor; + border-color: $btn-flat-danger-border-color; + color: $btn-flat-danger-color; + + &:hover { + background: $btn-flat-danger-hover-bgcolor; + border-color: $btn-flat-danger-hover-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-flat-danger-hover-color; + } + + &:focus { + background: $btn-flat-danger-focus-bgcolor; + border-color: $btn-flat-danger-focus-border-color; + color: $btn-flat-danger-focus-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-flat-box-shadow; + } + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + background: $btn-danger-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + color: $btn-danger-color; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-danger-focus-box-shadow; + background-color: $danger-bg-color-focus; + color: $danger-text-focus; + } + @if $skin-name == 'bootstrap5.3' { + box-shadow: $btn-danger-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $btn-danger-bgcolor; + color: $btn-danger-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + background: $btn-flat-danger-active-bgcolor; + border-color: $btn-flat-danger-active-border-color; + color: $btn-flat-danger-active-color; + @if $skin-name != 'bootstrap5.3' { + box-shadow: $btn-flat-active-box-shadow; + } + } + + &:disabled, + &.sf-disabled { + background: $btn-flat-danger-disabled-bgcolor; + border-color: $btn-flat-danger-disabled-border-color; + color: $btn-flat-danger-disabled-color; + } + + & .sf-ripple-element { + background: $btn-ripple-flat-danger-bgcolor; + } + } + } + + &.sf-outlined { + background: $btn-outline-bgcolor; + border-color: $btn-outline-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-outline-color; + @if $skin-name == 'Material3' { + border: 1px solid; + } + + &:hover { + background: $btn-outline-hover-bgcolor; + border-color: $btn-outline-hover-border-color; + box-shadow: $btn-flat-box-shadow; + color: $btn-outline-hover-color; + } + + &:focus { + @include outline-focus; + } + + &:focus:not(:focus-visible) { //mouse click + @if $skin-name == 'fluent2' { + background: transparent; + border-color: $secondary-border-color-hover; + color: $secondary-outline-button-text-color-pressed; + } + @if $skin-name == 'bootstrap5.3' { + background: $btn-outline-active-bgcolor; + color: $btn-outline-active-color; + } + } + + &:focus-visible { // only for keybord + @if $skin-name == 'bootstrap5.3' { + background-color: $secondary-bg-color-focus; + color: $secondary-text-color-focus; + box-shadow: $btn-focus-box-shadow; + } + @if $skin-name == 'Material3' { + background: $btn-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $transparent; + color: $btn-color; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + @include outline-active; + @if $skin-name == 'fluent2' { + background: transparent; + color: $secondary-outline-button-text-color-pressed !important; /* stylelint-disable-line declaration-no-important */ + border-color: $btn-outline-active-border-color !important; /* stylelint-disable-line declaration-no-important */ + outline: 2px solid $secondary-outline-button-text-color-pressed; + } + } + + &.sf-active { + @if $skin-name == 'fluent2' { + background: transparent !important; /* stylelint-disable-line declaration-no-important */ + border-color: $btn-outline-active-border-color !important; /* stylelint-disable-line declaration-no-important */ + outline: 2px solid $secondary-outline-button-text-color-pressed; + } + } + + &:disabled, + &.sf-disabled { + @include outline-disabled; + } + + &.sf-primary, + &.sf-filled { + background: $btn-outline-bgcolor; + @if $skin-name == 'Material3' { + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-primary-color); + } + @else { + border-color: $btn-outline-primary-color; + color: $btn-outline-primary-color; + } + + &:hover { + @if $skin-name == 'Material3' { + background: $btn-outline-primary-hover-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-primary-color); + } + @else if $skin-name == 'fluent2' { + background: $btn-outline-success-hover-bgcolor; + border-color: $btn-outline-primary-hover-border-color; + color: $btn-primary-hover-bgcolor; + } + @else { + background: $btn-primary-hover-bgcolor; + border-color: $btn-outline-primary-hover-border-color; + color: $btn-primary-hover-color; + } + } + + &:focus { + @include outline-primary-focus; + } + + &:focus:not(:focus-visible) { //mouse click + @if $skin-name == 'fluent2' { + background: transparent; + border-color: $primary-border-color-hover; + color: $primary-border-color-hover; + } + + @if $skin-name == 'bootstrap5.3' { + background: $btn-outline-primary-focus-bgcolor; + color: $btn-outline-active-color; + } + } + + &:focus-visible { // only for keybord + @if $skin-name == 'bootstrap5.3' { + background-color: $primary-bg-color-focus; + color: $primary-text-color; + box-shadow: $btn-primary-focus-box-shadow; + } + @if $skin-name == 'Material3' { + background: $btn-primary-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + color: $btn-primary-color; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-primary-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $transparent; + color: $btn-primary-bgcolor; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + @include outline-primary-active; + @if $skin-name == 'fluent2' { + background: transparent; + color: $primary-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */ + border-color: $btn-outline-primary-active-border-color !important; /* stylelint-disable-line declaration-no-important */ + outline: 2px solid $primary-bg-color-pressed; + } + } + + &.sf-active { + @if $skin-name == 'fluent2' { + background: transparent !important; /* stylelint-disable-line declaration-no-important */ + color: $primary-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */ + border-color: $btn-outline-primary-active-border-color !important; /* stylelint-disable-line declaration-no-important */ + } + } + + &:disabled, + &.sf-disabled { + @include outline-primary-disabled; + } + } + + &.sf-success { + background: $btn-outline-bgcolor; + @if $skin-name == 'bootstrap5.3' { + border-color: $success-outline; + color: $success-outline; + } + @if $skin-name == 'Material3' { + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-success-color); + } + @else { + border-color: $btn-success-bgcolor; + color: $btn-success-bgcolor; + } + + &:hover { + @if $skin-name == 'Material3' { + background: $btn-outline-success-hover-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-success-color); + } + @else if $skin-name == 'fluent2' { + background: $btn-outline-success-hover-bgcolor; + border-color: $btn-success-hover-border-color; + color: $btn-success-hover-bgcolor; + } + @else { + background: $btn-success-hover-bgcolor; + border-color: $btn-success-hover-border-color; + color: $btn-success-color; + } + } + + &:focus { + @include outline-success-focus; + } + + &:focus:not(:focus-visible) { //mouse click + @if $skin-name == 'fluent2' { + background: transparent; + border-color: $success-border-color-hover; + color: $success-border-color-hover; + } + + @if $skin-name == 'bootstrap5.3' { + background: $btn-success-bgcolor; + color: $btn-success-color; + } + } + + &:focus-visible { // only for keybord + @if $skin-name == 'bootstrap5.3' { + background-color: $success-bg-color-focus; + color: $success-text-focus; + box-shadow: $btn-success-focus-box-shadow; + } + @if $skin-name == 'Material3' { + background: $btn-success-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + color: $btn-success-color; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-success-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $transparent; + color: $btn-success-bgcolor; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + @include outline-success-active; + @if $skin-name == 'fluent2' { + background: transparent; + color: $success-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */ + border-color: $btn-success-active-border-color !important; /* stylelint-disable-line declaration-no-important */ + outline: 2px solid $success-bg-color-pressed; + } + } + + &.sf-active { + @if $skin-name == 'fluent2' { + background: transparent !important; /* stylelint-disable-line declaration-no-important */ + border-color: $success-border-color-selected !important; /* stylelint-disable-line declaration-no-important */ + } + } + + &:disabled, + &.sf-disabled { + @include outline-success-disabled; + } + } + + &.sf-info { + background: $btn-outline-bgcolor; + @if $skin-name == 'bootstrap5.3' { + border-color: $info-outline; + color: $info-outline; + } + @if $skin-name == 'Material3' { + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-info-color); + } + @else { + border-color: $btn-info-bgcolor; + color: $btn-info-bgcolor; + } + + &:hover { + @if $skin-name == 'Material3' { + background: $btn-outline-info-hover-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-info-color); + } + @else if $skin-name == 'fluent2' { + background: $btn-outline-info-hover-bgcolor; + border-color: $btn-info-hover-border-color; + color: $btn-info-hover-bgcolor; + } + @else { + background: $btn-info-hover-bgcolor; + border-color: $btn-info-hover-border-color; + color: $btn-info-color; + } + } + + &:focus { + @include outline-info-focus; + } + + &:focus:not(:focus-visible) { //mouse click + @if $skin-name == 'fluent2' { + background: transparent; + border-color: $info-bg-color-hover; + color: $info-bg-color-hover; + } + + @if $skin-name == 'bootstrap5.3' { + background: $btn-info-bgcolor; + color: $btn-info-color; + } + } + + &:focus-visible { // only for keybord + @if $skin-name == 'bootstrap5.3' { + background-color: $info-bg-color-focus; + color: $info-text-focus; + box-shadow: $btn-info-focus-box-shadow; + } + @if $skin-name == 'Material3' { + background: $btn-info-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + color: $btn-info-color; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-info-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $transparent; + color: $btn-info-bgcolor; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + @include outline-info-active; + @if $skin-name == 'fluent2' { + background: transparent; + color: $info-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */ + border-color: $btn-info-active-border-color !important; /* stylelint-disable-line declaration-no-important */ + outline: 2px solid $info-bg-color-pressed; + } + } + + &.sf-active { + @if $skin-name == 'fluent2' { + background: transparent !important; /* stylelint-disable-line declaration-no-important */ + border-color: $info-border-color-selected !important; /* stylelint-disable-line declaration-no-important */ + } + } + + &:disabled, + &.sf-disabled { + @include outline-info-disabled; + } + } + + &.sf-warning { + background: $btn-outline-bgcolor; + @if $skin-name == 'bootstrap5.3' { + border-color: $warning-outline; + color: $warning-outline; + } + @if $skin-name == 'Material3' { + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-warning-color); + } + @else { + border-color: $btn-warning-bgcolor; + color: $btn-warning-bgcolor; + } + + &:hover { + @if $skin-name == 'Material3' { + background: $btn-outline-warning-hover-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-warning-color); + } + @else if $skin-name == 'fluent2' { + background: $btn-outline-warning-hover-bgcolor; + border-color: $btn-warning-hover-border-color; + color: $btn-warning-hover-bgcolor; + } + @else { + background: $btn-warning-hover-bgcolor; + border-color: $btn-warning-hover-border-color; + color: $btn-warning-color; + } + } + + &:focus { + @include outline-warning-focus; + } + + &:focus:not(:focus-visible) { //mouse click + @if $skin-name == 'fluent2' { + background: transparent; + border-color: $warning-border-color-hover; + color: $warning-border-color-hover; + } + + @if $skin-name == 'bootstrap5.3' { + background: $btn-warning-bgcolor; + color: $btn-warning-color; + } + } + + &:focus-visible { // only for keybord + @if $skin-name == 'bootstrap5.3' { + background-color: $warning-bg-color-focus; + color: $warning-text-focus; + box-shadow: $btn-warning-focus-box-shadow; + } + @if $skin-name == 'Material3' { + background: $btn-warning-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + color: $btn-warning-color; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-warning-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $transparent; + color: $btn-warning-bgcolor; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + @include outline-warning-active; + @if $skin-name == 'fluent2' { + background: transparent; + color: $warning-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */ + border-color: $btn-warning-active-border-color !important; /* stylelint-disable-line declaration-no-important */ + outline: 2px solid $warning-bg-color-pressed; + } + } + + &.sf-active { + @if $skin-name == 'fluent2' { + background: transparent !important; /* stylelint-disable-line declaration-no-important */ + border-color: $warning-border-color-selected !important; /* stylelint-disable-line declaration-no-important */ + } + } + + &:disabled, + &.sf-disabled { + @include outline-warning-disabled; + } + } + + &.sf-danger { + background: $btn-outline-bgcolor; + @if $skin-name == 'bootstrap5.3' { + border-color: $danger-outline; + color: $danger-outline; + } + @if $skin-name == 'Material3' { + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-danger-color); + } + @else { + border-color: $btn-danger-bgcolor; + color: $btn-danger-bgcolor; + } + + &:hover { + @if $skin-name == 'Material3' { + background: $btn-outline-danger-hover-bgcolor; + border: 1px solid $btn-outline-border-color; + color: rgba($btn-outline-danger-color); + } + @if $skin-name == 'fluent2' { + background: $btn-outline-danger-hover-bgcolor; + border-color: $btn-danger-hover-border-color; + color: $btn-danger-hover-bgcolor; + } + @else { + background: $btn-danger-hover-bgcolor; + border-color: $btn-danger-hover-border-color; + color: $btn-danger-color; + } + } + + &:focus { + @include outline-danger-focus; + } + + &:focus:not(:focus-visible) { //mouse click + @if $skin-name == 'fluent2' { + background: transparent; + border-color: $danger-border-color-hover; + color: $danger-border-color-hover; + } + + @if $skin-name == 'bootstrap5.3' { + background: $btn-danger-bgcolor; + color: $btn-danger-color; + } + } + + &:focus-visible { // only for keybord + @if $skin-name == 'bootstrap5.3' { + background-color: $danger-bg-color-focus; + color: $danger-text-focus; + box-shadow: $btn-danger-focus-box-shadow; + } + @if $skin-name == 'Material3' { + background: $btn-danger-active-bgcolor; + box-shadow: $btn-keyboard-focus-box-shadow; + color: $btn-danger-color; + } + @if $skin-name == 'fluent2' { + border-color: $btn-keyboard-focus-border-color; + box-shadow: $btn-danger-focus-box-shadow; + } + @if $skin-name == 'tailwind3' { + background: $transparent; + color: $btn-danger-bgcolor; + box-shadow: $btn-focus-box-shadow; + } + } + + &:active, + &.sf-active { + @include outline-danger-active; + @if $skin-name == 'fluent2' { + background: transparent; + color: $danger-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */ + border-color: $btn-danger-active-border-color !important; /* stylelint-disable-line declaration-no-important */ + outline: 2px solid $danger-bg-color-pressed; + } + } + + &.sf-active { + @if $skin-name == 'fluent2' { + background: transparent !important; /* stylelint-disable-line declaration-no-important */ + border-color: $danger-border-color-selected !important; /* stylelint-disable-line declaration-no-important */ + } + } + + &:disabled, + &.sf-disabled { + @include outline-danger-disabled; + } + } + } + + &.sf-link { + background: $btn-link-bgcolor; + border-color: $btn-link-border-color; + border-radius: 0; + box-shadow: none; + color: $btn-link-color; + + &:hover { + @include link-hover; + } + + &:focus { + @include link-focus; + } + + &:focus:not(:focus-visible) { + outline: none !important; /* stylelint-disable-line declaration-no-important */ + } + + &:focus-visible { // only for keybord + @if $skin-name == 'Material3' { + box-shadow: $btn-keyboard-focus-box-shadow; + } + @if $skin-name == 'fluent2' { + text-decoration-color: $btn-link-focus-underline-color !important; /* stylelint-disable-line declaration-no-important */ + text-decoration: underline; + text-decoration-style: double; + } + } + + &:active, + &.sf-active { + @if $skin-name == 'tailwind3' { + color: $btn-link-active-color; + text-decoration: underline; + } + } + + &:disabled { + @include link-disabled; + } + } + + &.sf-inherit { + color: inherit; + background: inherit; + border-color: transparent; + box-shadow: none; + + &:hover, + &:focus, + &:active, + &.sf-active { + background: rgba(transparent, .056); + border-color: transparent; + box-shadow: none; + color: inherit; + outline: none; + } + + &:disabled { + background: inherit; + color: inherit; + border-color: transparent; + box-shadow: none; + opacity: .5; + } + } + } + } +} + +@if $skin-name == 'bootstrap5.3' { + .sf-btn:not(.sf-outlined) { + &:disabled, + &.sf-disabled { + border-color: transparent !important; /* stylelint-disable-line declaration-no-important */ + } + } +} diff --git a/components/buttons/styles/button/material3-dark.css b/components/buttons/styles/button/material3-dark.css new file mode 100644 index 0000000..2efa98b --- /dev/null +++ b/components/buttons/styles/button/material3-dark.css @@ -0,0 +1,1635 @@ +.sf-btn, +.sf-css.sf-btn { + /* stylelint-disable property-no-vendor-prefix */ + position: relative; + -webkit-font-smoothing: antialiased; + border: 1px solid; + border-radius: 4px; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; + justify-content: center; + line-height: 1; + outline: none; + padding: 8px 16px; + text-align: center; + text-decoration: none; + text-transform: none; + user-select: none; + vertical-align: middle; + white-space: nowrap; + letter-spacing: 0.15px; +} +.sf-btn:disabled, +.sf-css.sf-btn:disabled { + cursor: default; +} +.sf-btn:hover, .sf-btn:focus, +.sf-css.sf-btn:hover, +.sf-css.sf-btn:focus { + text-decoration: none; +} +.sf-btn::-moz-focus-inner, +.sf-css.sf-btn::-moz-focus-inner { + border: 0; + padding: 0; +} +.sf-btn .sf-btn-icon, +.sf-css.sf-btn .sf-btn-icon { + display: inline-block; + font-size: 18px; + margin-top: 0; + vertical-align: middle; + width: 1em; + line-height: 1px; +} +.sf-btn .sf-btn-icon.sf-icon-left, +.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.5em; + width: 2em; +} +.sf-btn .sf-btn-icon.sf-icon-right, +.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + width: 2em; + margin-right: -0.5em; +} +.sf-btn .sf-btn-icon.sf-icon-top, +.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 8px; + display: block; + margin-top: 0; + width: auto; +} +.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 8px; + display: block; + margin-top: 0; + width: auto; +} +.sf-btn .sf-btn-icon path, +.sf-css.sf-btn .sf-btn-icon path { + fill-rule: evenodd; + clip-rule: evenodd; +} +.sf-btn.sf-icon-btn, +.sf-css.sf-btn.sf-icon-btn { + padding: 7px 7px; + border-radius: 4px; +} +.sf-btn.sf-top-icon-btn, .sf-btn.sf-bottom-icon-btn, +.sf-css.sf-btn.sf-top-icon-btn, +.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 12px 12px; +} +.sf-btn.sf-round, +.sf-css.sf-btn.sf-round { + border-radius: 50%; + height: 32px; + line-height: 1; + padding: 0; + width: 32px; +} +.sf-btn.sf-round .sf-btn-icon, +.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 1.5em; + margin-top: 0; + width: auto; +} +.sf-btn.sf-rounded, +.sf-css.sf-btn.sf-rounded { + border-radius: 40px; +} +.sf-btn.sf-round-corner, +.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 8px 16px; +} +.sf-btn.sf-rtl .sf-icon-right, +.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.5em; + margin-right: 0; +} +.sf-btn.sf-rtl .sf-icon-left, +.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.5em; +} +.sf-btn.sf-flat, +.sf-css.sf-btn.sf-flat { + border: 1px solid; +} +.sf-btn.sf-small, +.sf-css.sf-btn.sf-small { + font-size: 11px; + line-height: 1.092; + padding: 5px 12px; +} +.sf-btn.sf-small.sf-round-corner, +.sf-css.sf-btn.sf-small.sf-round-corner { + border-radius: 25px; + padding: 5px 12px; +} +.sf-btn.sf-small .sf-btn-icon, +.sf-css.sf-btn.sf-small .sf-btn-icon { + font-size: 16px; + width: 1em; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-left { + margin-left: -0.57143em; + width: 2em; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-right { + margin-right: -0.57143em; + width: 2em; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-btn.sf-small.sf-icon-btn, +.sf-css.sf-btn.sf-small.sf-icon-btn { + padding: 4px 4px; + border-radius: 4px; +} +.sf-btn.sf-small.sf-top-icon-btn, .sf-btn.sf-small.sf-bottom-icon-btn, +.sf-css.sf-btn.sf-small.sf-top-icon-btn, +.sf-css.sf-btn.sf-small.sf-bottom-icon-btn { + line-height: 1; + padding: 12px 12px; +} +.sf-btn.sf-small.sf-round, +.sf-css.sf-btn.sf-small.sf-round { + height: 24px; + line-height: 1; + padding: 0; + width: 24px; + border-radius: 50%; +} +.sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-css.sf-btn.sf-small.sf-round .sf-btn-icon { + font-size: 16px; + line-height: 1; + width: auto; +} +.sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-right { + margin-left: -0.57143em; + margin-right: 0; +} +.sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.57143em; +} +.sf-btn.sf-block, +.sf-css.sf-btn.sf-block { + display: block; + width: 100%; +} +.sf-small .sf-btn, +.sf-small.sf-btn, +.sf-small .sf-css.sf-btn, +.sf-small.sf-css.sf-btn { + font-size: 11px; + line-height: 1.092; + padding: 5px 12px; +} +.sf-small .sf-btn.sf-round-corner, +.sf-small.sf-btn.sf-round-corner, +.sf-small .sf-css.sf-btn.sf-round-corner, +.sf-small.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 5px 12px; +} +.sf-small .sf-btn .sf-btn-icon, +.sf-small.sf-btn .sf-btn-icon, +.sf-small .sf-css.sf-btn .sf-btn-icon, +.sf-small.sf-css.sf-btn .sf-btn-icon { + font-size: 16px; + width: 1em; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-left, +.sf-small.sf-btn .sf-btn-icon.sf-icon-left, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-left, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.57143em; + width: 2em; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-right, +.sf-small.sf-btn .sf-btn-icon.sf-icon-right, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-right, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + margin-right: -0.57143em; + width: 2em; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-top, +.sf-small.sf-btn .sf-btn-icon.sf-icon-top, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-top, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-small.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-small .sf-btn.sf-icon-btn, +.sf-small.sf-btn.sf-icon-btn, +.sf-small .sf-css.sf-btn.sf-icon-btn, +.sf-small.sf-css.sf-btn.sf-icon-btn { + padding: 4px 4px; + border-radius: 4px; +} +.sf-small .sf-btn.sf-top-icon-btn, .sf-small .sf-btn.sf-bottom-icon-btn, +.sf-small.sf-btn.sf-top-icon-btn, +.sf-small.sf-btn.sf-bottom-icon-btn, +.sf-small .sf-css.sf-btn.sf-top-icon-btn, +.sf-small .sf-css.sf-btn.sf-bottom-icon-btn, +.sf-small.sf-css.sf-btn.sf-top-icon-btn, +.sf-small.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 12px 12px; +} +.sf-small .sf-btn.sf-round, +.sf-small.sf-btn.sf-round, +.sf-small .sf-css.sf-btn.sf-round, +.sf-small.sf-css.sf-btn.sf-round { + height: 24px; + line-height: 1; + padding: 0; + width: 24px; + border-radius: 50%; +} +.sf-small .sf-btn.sf-round .sf-btn-icon, +.sf-small.sf-btn.sf-round .sf-btn-icon, +.sf-small .sf-css.sf-btn.sf-round .sf-btn-icon, +.sf-small.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 16px; + line-height: 1; + width: auto; +} +.sf-small .sf-btn.sf-rtl .sf-icon-right, +.sf-small.sf-btn.sf-rtl .sf-icon-right, +.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-right, +.sf-small.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.57143em; + margin-right: 0; +} +.sf-small .sf-btn.sf-rtl .sf-icon-left, +.sf-small.sf-btn.sf-rtl .sf-icon-left, +.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-left, +.sf-small.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.57143em; +} +.sf-large.sf-small .sf-btn, +.sf-large .sf-small.sf-btn, +.sf-large.sf-small .sf-css.sf-btn, +.sf-large .sf-small.sf-css.sf-btn { + font-size: 14px; + line-height: 1.476; + padding: 7px 20px; +} +.sf-large.sf-small .sf-btn.sf-round-corner, +.sf-large .sf-small.sf-btn.sf-round-corner, +.sf-large.sf-small .sf-css.sf-btn.sf-round-corner, +.sf-large .sf-small.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 7px 20px; +} +.sf-large.sf-small .sf-btn .sf-btn-icon, +.sf-large .sf-small.sf-btn .sf-btn-icon, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon { + font-size: 18px; + width: 1em; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-left, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.5em; + width: 2em; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-right, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + margin-right: -0.5em; + width: 2em; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-top, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-large.sf-small .sf-btn.sf-icon-btn, +.sf-large .sf-small.sf-btn.sf-icon-btn, +.sf-large.sf-small .sf-css.sf-btn.sf-icon-btn, +.sf-large .sf-small.sf-css.sf-btn.sf-icon-btn { + padding: 6px 13px; + border-radius: 4px; +} +.sf-large.sf-small .sf-btn.sf-top-icon-btn, .sf-large.sf-small .sf-btn.sf-bottom-icon-btn, +.sf-large .sf-small.sf-btn.sf-top-icon-btn, +.sf-large .sf-small.sf-btn.sf-bottom-icon-btn, +.sf-large.sf-small .sf-css.sf-btn.sf-top-icon-btn, +.sf-large.sf-small .sf-css.sf-btn.sf-bottom-icon-btn, +.sf-large .sf-small.sf-css.sf-btn.sf-top-icon-btn, +.sf-large .sf-small.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 16px 16px; +} +.sf-large.sf-small .sf-btn.sf-round, +.sf-large .sf-small.sf-btn.sf-round, +.sf-large.sf-small .sf-css.sf-btn.sf-round, +.sf-large .sf-small.sf-css.sf-btn.sf-round { + height: 36px; + line-height: 1; + padding: 0; + width: 36px; +} +.sf-large.sf-small .sf-btn.sf-round .sf-btn-icon, +.sf-large .sf-small.sf-btn.sf-round .sf-btn-icon, +.sf-large.sf-small .sf-css.sf-btn.sf-round .sf-btn-icon, +.sf-large .sf-small.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 0; + width: auto; +} +.sf-large.sf-small .sf-btn.sf-rtl .sf-icon-right, +.sf-large .sf-small.sf-btn.sf-rtl .sf-icon-right, +.sf-large.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-right, +.sf-large .sf-small.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.5em; + margin-right: 0; +} +.sf-large.sf-small .sf-btn.sf-rtl .sf-icon-left, +.sf-large .sf-small.sf-btn.sf-rtl .sf-icon-left, +.sf-large.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-left, +.sf-large .sf-small.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.5em; +} +.sf-large .sf-btn, +.sf-large.sf-btn, +.sf-large .sf-css.sf-btn, +.sf-large.sf-css.sf-btn { + font-size: 14px; + line-height: 1.286; + padding: 10px 24px; +} +.sf-large .sf-btn.sf-round-corner, +.sf-large.sf-btn.sf-round-corner, +.sf-large .sf-css.sf-btn.sf-round-corner, +.sf-large.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 10px 24px; +} +.sf-large .sf-btn .sf-btn-icon, +.sf-large.sf-btn .sf-btn-icon, +.sf-large .sf-css.sf-btn .sf-btn-icon, +.sf-large.sf-css.sf-btn .sf-btn-icon { + font-size: 22px; + width: 1em; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-left, +.sf-large.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.2em; + width: 2em; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-right, +.sf-large.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + margin-right: -0.2em; + width: 2em; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-top, +.sf-large.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 8px; + width: auto; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 8px; + width: auto; +} +.sf-large .sf-btn.sf-icon-btn, +.sf-large.sf-btn.sf-icon-btn, +.sf-large .sf-css.sf-btn.sf-icon-btn, +.sf-large.sf-css.sf-btn.sf-icon-btn { + padding: 11px 11px; + border-radius: 4px; +} +.sf-large .sf-btn.sf-top-icon-btn, .sf-large .sf-btn.sf-bottom-icon-btn, +.sf-large.sf-btn.sf-top-icon-btn, +.sf-large.sf-btn.sf-bottom-icon-btn, +.sf-large .sf-css.sf-btn.sf-top-icon-btn, +.sf-large .sf-css.sf-btn.sf-bottom-icon-btn, +.sf-large.sf-css.sf-btn.sf-top-icon-btn, +.sf-large.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 16px 16px; +} +.sf-large .sf-btn.sf-round, +.sf-large.sf-btn.sf-round, +.sf-large .sf-css.sf-btn.sf-round, +.sf-large.sf-css.sf-btn.sf-round { + height: 40px; + line-height: 1; + padding: 0; + width: 40px; + border-radius: 50%; +} +.sf-large .sf-btn.sf-round .sf-btn-icon, +.sf-large.sf-btn.sf-round .sf-btn-icon, +.sf-large .sf-css.sf-btn.sf-round .sf-btn-icon, +.sf-large.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 1.5em; + width: auto; +} +.sf-large .sf-btn.sf-rtl .sf-icon-right, +.sf-large.sf-btn.sf-rtl .sf-icon-right, +.sf-large .sf-css.sf-btn.sf-rtl .sf-icon-right, +.sf-large.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.2em; + margin-right: 0; +} +.sf-large .sf-btn.sf-rtl .sf-icon-left, +.sf-large.sf-btn.sf-rtl .sf-icon-left, +.sf-large .sf-css.sf-btn.sf-rtl .sf-icon-left, +.sf-large.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.2em; +} +.sf-large .sf-btn.sf-small, +.sf-large.sf-btn.sf-small, +.sf-large .sf-css.sf-btn.sf-small, +.sf-large.sf-css.sf-btn.sf-small { + font-size: 14px; + line-height: 1.476; + padding: 7px 20px; +} +.sf-large .sf-btn.sf-small.sf-round-corner, +.sf-large.sf-btn.sf-small.sf-round-corner, +.sf-large .sf-css.sf-btn.sf-small.sf-round-corner, +.sf-large.sf-css.sf-btn.sf-small.sf-round-corner { + border-radius: 25px; + padding: 7px 20px; +} +.sf-large .sf-btn.sf-small .sf-btn-icon, +.sf-large.sf-btn.sf-small .sf-btn-icon, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon { + font-size: 18px; + width: 1em; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-left { + margin-left: -0.5em; + width: 2em; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-right { + margin-right: -0.5em; + width: 2em; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-large .sf-btn.sf-small.sf-icon-btn, +.sf-large.sf-btn.sf-small.sf-icon-btn, +.sf-large .sf-css.sf-btn.sf-small.sf-icon-btn, +.sf-large.sf-css.sf-btn.sf-small.sf-icon-btn { + padding: 6px 13px; + border-radius: 4px; +} +.sf-large .sf-btn.sf-small.sf-top-icon-btn, .sf-large .sf-btn.sf-small.sf-bottom-icon-btn, +.sf-large.sf-btn.sf-small.sf-top-icon-btn, +.sf-large.sf-btn.sf-small.sf-bottom-icon-btn, +.sf-large .sf-css.sf-btn.sf-small.sf-top-icon-btn, +.sf-large .sf-css.sf-btn.sf-small.sf-bottom-icon-btn, +.sf-large.sf-css.sf-btn.sf-small.sf-top-icon-btn, +.sf-large.sf-css.sf-btn.sf-small.sf-bottom-icon-btn { + line-height: 1; + padding: 16px 16px; +} +.sf-large .sf-btn.sf-small.sf-round, +.sf-large.sf-btn.sf-small.sf-round, +.sf-large .sf-css.sf-btn.sf-small.sf-round, +.sf-large.sf-css.sf-btn.sf-small.sf-round { + height: 36px; + line-height: 1; + padding: 0; + width: 36px; + border-radius: 50%; +} +.sf-large .sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-large.sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-large .sf-css.sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-large.sf-css.sf-btn.sf-small.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 0; + width: auto; +} +.sf-large .sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-large.sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-large .sf-css.sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-large.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-right { + margin-left: -0.5em; + margin-right: 0; +} +.sf-large .sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-large.sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-large .sf-css.sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-large.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.5em; +} +/* stylelint-disable property-no-vendor-prefix */ +.sf-btn, +.sf-css.sf-btn { + -webkit-tap-highlight-color: transparent; + background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-surface), 0), rgba(var(--color-sf-surface), 0)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.sf-btn:hover, +.sf-css.sf-btn:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn:focus, +.sf-css.sf-btn:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + color: rgba(var(--color-sf-on-surface)); + outline: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)) 0 solid; + outline-offset: 0; + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn:focus-visible, +.sf-css.sf-btn:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn:active, +.sf-css.sf-btn:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-active, +.sf-css.sf-btn.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn:disabled, .sf-btn.sf-disabled, +.sf-css.sf-btn:disabled, +.sf-css.sf-btn.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn .sf-ripple-element, +.sf-css.sf-btn .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.24); +} +.sf-btn.sf-round, .sf-btn.sf-round-edge, +.sf-css.sf-btn.sf-round, +.sf-css.sf-btn.sf-round-edge { + background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 0), rgba(var(--color-sf-surface), 0)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-round:hover, .sf-btn.sf-round-edge:hover, +.sf-css.sf-btn.sf-round:hover, +.sf-css.sf-btn.sf-round-edge:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-round:focus, .sf-btn.sf-round-edge:focus, +.sf-css.sf-btn.sf-round:focus, +.sf-css.sf-btn.sf-round-edge:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); + outline: rgba(var(--color-sf-white)) 0 solid; + outline-offset: 0; +} +.sf-btn.sf-round:focus-visible, .sf-btn.sf-round-edge:focus-visible, +.sf-css.sf-btn.sf-round:focus-visible, +.sf-css.sf-btn.sf-round-edge:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-round:active, .sf-btn.sf-round-edge:active, +.sf-css.sf-btn.sf-round:active, +.sf-css.sf-btn.sf-round-edge:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); + outline: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)) 0 solid; + outline-offset: 0; +} +.sf-btn.sf-round:disabled, .sf-btn.sf-round.sf-disabled, .sf-btn.sf-round-edge:disabled, .sf-btn.sf-round-edge.sf-disabled, +.sf-css.sf-btn.sf-round:disabled, +.sf-css.sf-btn.sf-round.sf-disabled, +.sf-css.sf-btn.sf-round-edge:disabled, +.sf-css.sf-btn.sf-round-edge.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-round.sf-primary:hover, .sf-btn.sf-round.sf-filled:hover, .sf-btn.sf-round-edge.sf-primary:hover, .sf-btn.sf-round-edge.sf-filled:hover, +.sf-css.sf-btn.sf-round.sf-primary:hover, +.sf-css.sf-btn.sf-round.sf-filled:hover, +.sf-css.sf-btn.sf-round-edge.sf-primary:hover, +.sf-css.sf-btn.sf-round-edge.sf-filled:hover { + border-color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-round.sf-primary:focus, .sf-btn.sf-round.sf-filled:focus, .sf-btn.sf-round-edge.sf-primary:focus, .sf-btn.sf-round-edge.sf-filled:focus, +.sf-css.sf-btn.sf-round.sf-primary:focus, +.sf-css.sf-btn.sf-round.sf-filled:focus, +.sf-css.sf-btn.sf-round-edge.sf-primary:focus, +.sf-css.sf-btn.sf-round-edge.sf-filled:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-primary:focus-visible, .sf-btn.sf-round.sf-filled:focus-visible, .sf-btn.sf-round-edge.sf-primary:focus-visible, .sf-btn.sf-round-edge.sf-filled:focus-visible, +.sf-css.sf-btn.sf-round.sf-primary:focus-visible, +.sf-css.sf-btn.sf-round.sf-filled:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-primary:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-round.sf-success:hover, .sf-btn.sf-round-edge.sf-success:hover, +.sf-css.sf-btn.sf-round.sf-success:hover, +.sf-css.sf-btn.sf-round-edge.sf-success:hover { + border-color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-round.sf-success:focus, .sf-btn.sf-round-edge.sf-success:focus, +.sf-css.sf-btn.sf-round.sf-success:focus, +.sf-css.sf-btn.sf-round-edge.sf-success:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-success:focus-visible, .sf-btn.sf-round-edge.sf-success:focus-visible, +.sf-css.sf-btn.sf-round.sf-success:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-round.sf-info:hover, .sf-btn.sf-round-edge.sf-info:hover, +.sf-css.sf-btn.sf-round.sf-info:hover, +.sf-css.sf-btn.sf-round-edge.sf-info:hover { + border-color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-round.sf-info:focus, .sf-btn.sf-round-edge.sf-info:focus, +.sf-css.sf-btn.sf-round.sf-info:focus, +.sf-css.sf-btn.sf-round-edge.sf-info:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-info:focus-visible, .sf-btn.sf-round-edge.sf-info:focus-visible, +.sf-css.sf-btn.sf-round.sf-info:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-round.sf-warning:hover, .sf-btn.sf-round-edge.sf-warning:hover, +.sf-css.sf-btn.sf-round.sf-warning:hover, +.sf-css.sf-btn.sf-round-edge.sf-warning:hover { + border-color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-round.sf-warning:focus, .sf-btn.sf-round-edge.sf-warning:focus, +.sf-css.sf-btn.sf-round.sf-warning:focus, +.sf-css.sf-btn.sf-round-edge.sf-warning:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-warning:focus-visible, .sf-btn.sf-round-edge.sf-warning:focus-visible, +.sf-css.sf-btn.sf-round.sf-warning:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-round.sf-danger:hover, .sf-btn.sf-round-edge.sf-danger:hover, +.sf-css.sf-btn.sf-round.sf-danger:hover, +.sf-css.sf-btn.sf-round-edge.sf-danger:hover { + border-color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-round.sf-danger:focus, .sf-btn.sf-round-edge.sf-danger:focus, +.sf-css.sf-btn.sf-round.sf-danger:focus, +.sf-css.sf-btn.sf-round-edge.sf-danger:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-danger:focus-visible, .sf-btn.sf-round-edge.sf-danger:focus-visible, +.sf-css.sf-btn.sf-round.sf-danger:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-filled, +.sf-css.sf-btn.sf-filled { + background: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: none; +} +.sf-btn.sf-filled:hover, +.sf-css.sf-btn.sf-filled:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-filled:focus, +.sf-css.sf-btn.sf-filled:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + outline: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)) 0 solid; + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-filled:focus-visible, +.sf-css.sf-btn.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-filled:active, +.sf-css.sf-btn.sf-filled:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-filled.sf-active, +.sf-css.sf-btn.sf-filled.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-filled:disabled, .sf-btn.sf-filled.sf-disabled, +.sf-css.sf-btn.sf-filled:disabled, +.sf-css.sf-btn.sf-filled.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-filled .sf-ripple-element, +.sf-css.sf-btn.sf-filled .sf-ripple-element { + background: rgba(var(--color-sf-on-primary), 0.24); +} +.sf-btn.sf-success, +.sf-css.sf-btn.sf-success { + background: rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: none; +} +.sf-btn.sf-success:hover, +.sf-css.sf-btn.sf-success:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-success-text)); +} +.sf-btn.sf-success:focus, +.sf-css.sf-btn.sf-success:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-success:focus-visible, +.sf-css.sf-btn.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-success:active, .sf-btn.sf-success.sf-active, +.sf-css.sf-btn.sf-success:active, +.sf-css.sf-btn.sf-success.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-success:disabled, .sf-btn.sf-success.sf-disabled, +.sf-css.sf-btn.sf-success:disabled, +.sf-css.sf-btn.sf-success.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-success .sf-ripple-element, +.sf-css.sf-btn.sf-success .sf-ripple-element { + background: rgba(var(--color-sf-success-text), 0.24); +} +.sf-btn.sf-info, +.sf-css.sf-btn.sf-info { + background: rgba(var(--color-sf-info)); + border-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + box-shadow: none; +} +.sf-btn.sf-info:hover, +.sf-css.sf-btn.sf-info:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-info-text)); +} +.sf-btn.sf-info:focus, +.sf-css.sf-btn.sf-info:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + border-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-info:focus-visible, +.sf-css.sf-btn.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-info:active, .sf-btn.sf-info.sf-active, +.sf-css.sf-btn.sf-info:active, +.sf-css.sf-btn.sf-info.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + border-color: rgba(var(--color-sf-info)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-info:disabled, .sf-btn.sf-info.sf-disabled, +.sf-css.sf-btn.sf-info:disabled, +.sf-css.sf-btn.sf-info.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-info .sf-ripple-element, +.sf-css.sf-btn.sf-info .sf-ripple-element { + background: rgba(var(--color-sf-info-text), 0.24); +} +.sf-btn.sf-warning, +.sf-css.sf-btn.sf-warning { + background: rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: none; +} +.sf-btn.sf-warning:hover, +.sf-css.sf-btn.sf-warning:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-warning-text)); +} +.sf-btn.sf-warning:focus, +.sf-css.sf-btn.sf-warning:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-warning:focus-visible, +.sf-css.sf-btn.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-warning:active, .sf-btn.sf-warning.sf-active, +.sf-css.sf-btn.sf-warning:active, +.sf-css.sf-btn.sf-warning.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-warning:disabled, .sf-btn.sf-warning.sf-disabled, +.sf-css.sf-btn.sf-warning:disabled, +.sf-css.sf-btn.sf-warning.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-warning .sf-ripple-element, +.sf-css.sf-btn.sf-warning .sf-ripple-element { + background: rgba(var(--color-sf-warning-text), 0.24); +} +.sf-btn.sf-danger, +.sf-css.sf-btn.sf-danger { + background: rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: none; +} +.sf-btn.sf-danger:hover, +.sf-css.sf-btn.sf-danger:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-danger:focus, +.sf-css.sf-btn.sf-danger:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-danger:focus-visible, +.sf-css.sf-btn.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-danger:active, +.sf-css.sf-btn.sf-danger:active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-danger.sf-active, +.sf-css.sf-btn.sf-danger.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-danger:disabled, .sf-btn.sf-danger.sf-disabled, +.sf-css.sf-btn.sf-danger:disabled, +.sf-css.sf-btn.sf-danger.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-danger .sf-ripple-element, +.sf-css.sf-btn.sf-danger .sf-ripple-element { + background: rgba(var(--color-sf-danger-text), 0.24); +} +.sf-btn.sf-flat, +.sf-css.sf-btn.sf-flat { + background: transparent; + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-flat:hover, +.sf-css.sf-btn.sf-flat:hover { + background: rgba(var(--color-sf-on-surface), 0.08); + border-color: none; + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-flat:focus, +.sf-css.sf-btn.sf-flat:focus { + background: rgba(var(--color-sf-on-surface), 0.08); + border-color: none; + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-btn.sf-flat:focus-visible, +.sf-css.sf-btn.sf-flat:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-flat:active, .sf-btn.sf-flat.sf-active, +.sf-css.sf-btn.sf-flat:active, +.sf-css.sf-btn.sf-flat.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-btn.sf-flat:disabled, .sf-btn.sf-flat.sf-disabled, +.sf-css.sf-btn.sf-flat:disabled, +.sf-css.sf-btn.sf-flat.sf-disabled { + background: transparent; + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat .sf-ripple-element, +.sf-css.sf-btn.sf-flat .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.24); +} +.sf-btn.sf-flat.sf-primary, .sf-btn.sf-flat.sf-filled, +.sf-css.sf-btn.sf-flat.sf-primary, +.sf-css.sf-btn.sf-flat.sf-filled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:hover, .sf-btn.sf-flat.sf-filled:hover, +.sf-css.sf-btn.sf-flat.sf-primary:hover, +.sf-css.sf-btn.sf-flat.sf-filled:hover { + background: rgba(var(--color-sf-primary), 0.08); + border-color: none; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:focus, .sf-btn.sf-flat.sf-filled:focus, +.sf-css.sf-btn.sf-flat.sf-primary:focus, +.sf-css.sf-btn.sf-flat.sf-filled:focus { + background: rgba(var(--color-sf-primary), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:focus-visible, .sf-btn.sf-flat.sf-filled:focus-visible, +.sf-css.sf-btn.sf-flat.sf-primary:focus-visible, +.sf-css.sf-btn.sf-flat.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-flat.sf-primary:active, .sf-btn.sf-flat.sf-primary.sf-active, .sf-btn.sf-flat.sf-filled:active, .sf-btn.sf-flat.sf-filled.sf-active, +.sf-css.sf-btn.sf-flat.sf-primary:active, +.sf-css.sf-btn.sf-flat.sf-primary.sf-active, +.sf-css.sf-btn.sf-flat.sf-filled:active, +.sf-css.sf-btn.sf-flat.sf-filled.sf-active { + background: rgba(var(--color-sf-primary), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:disabled, .sf-btn.sf-flat.sf-primary.sf-disabled, .sf-btn.sf-flat.sf-filled:disabled, .sf-btn.sf-flat.sf-filled.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-primary:disabled, +.sf-css.sf-btn.sf-flat.sf-primary.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-filled:disabled, +.sf-css.sf-btn.sf-flat.sf-filled.sf-disabled { + background: transparent; + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-primary .sf-ripple-element, .sf-btn.sf-flat.sf-filled .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-primary .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-filled .sf-ripple-element { + background: rgba(var(--color-sf-on-primary), 0.24); +} +.sf-btn.sf-flat.sf-success, +.sf-css.sf-btn.sf-flat.sf-success { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-flat.sf-success:hover, +.sf-css.sf-btn.sf-flat.sf-success:hover { + background: rgba(var(--color-sf-success), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-flat.sf-success:focus, +.sf-css.sf-btn.sf-flat.sf-success:focus { + background: rgba(var(--color-sf-success), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-success)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-success:focus-visible, +.sf-css.sf-btn.sf-flat.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-success-text)); +} +.sf-btn.sf-flat.sf-success:active, .sf-btn.sf-flat.sf-success.sf-active, +.sf-css.sf-btn.sf-flat.sf-success:active, +.sf-css.sf-btn.sf-flat.sf-success.sf-active { + background: rgba(var(--color-sf-success), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-success)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-success:disabled, .sf-btn.sf-flat.sf-success.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-success:disabled, +.sf-css.sf-btn.sf-flat.sf-success.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-success .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-success .sf-ripple-element { + background: rgba(var(--color-sf-success-text), 0.24); +} +.sf-btn.sf-flat.sf-info, +.sf-css.sf-btn.sf-flat.sf-info { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-flat.sf-info:hover, +.sf-css.sf-btn.sf-flat.sf-info:hover { + background: rgba(var(--color-sf-info), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-flat.sf-info:focus, +.sf-css.sf-btn.sf-flat.sf-info:focus { + background: rgba(var(--color-sf-info), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-info)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-info:focus-visible, +.sf-css.sf-btn.sf-flat.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-info-text)); +} +.sf-btn.sf-flat.sf-info:active, .sf-btn.sf-flat.sf-info.sf-active, +.sf-css.sf-btn.sf-flat.sf-info:active, +.sf-css.sf-btn.sf-flat.sf-info.sf-active { + background: rgba(var(--color-sf-info), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-info)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-info:disabled, .sf-btn.sf-flat.sf-info.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-info:disabled, +.sf-css.sf-btn.sf-flat.sf-info.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-info .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-info .sf-ripple-element { + background: rgba(var(--color-sf-info-text), 0.24); +} +.sf-btn.sf-flat.sf-warning, +.sf-css.sf-btn.sf-flat.sf-warning { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-flat.sf-warning:hover, +.sf-css.sf-btn.sf-flat.sf-warning:hover { + background: rgba(var(--color-sf-warning), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-flat.sf-warning:focus, +.sf-css.sf-btn.sf-flat.sf-warning:focus { + background: rgba(var(--color-sf-warning), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-warning)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-warning:focus-visible, +.sf-css.sf-btn.sf-flat.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-warning-text)); +} +.sf-btn.sf-flat.sf-warning:active, .sf-btn.sf-flat.sf-warning.sf-active, +.sf-css.sf-btn.sf-flat.sf-warning:active, +.sf-css.sf-btn.sf-flat.sf-warning.sf-active { + background: rgba(var(--color-sf-warning), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-warning)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-warning:disabled, .sf-btn.sf-flat.sf-warning.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-warning:disabled, +.sf-css.sf-btn.sf-flat.sf-warning.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-warning .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-warning .sf-ripple-element { + background: rgba(var(--color-sf-warning-text), 0.24); +} +.sf-btn.sf-flat.sf-danger, +.sf-css.sf-btn.sf-flat.sf-danger { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-flat.sf-danger:hover, +.sf-css.sf-btn.sf-flat.sf-danger:hover { + background: rgba(var(--color-sf-error), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-flat.sf-danger:focus, +.sf-css.sf-btn.sf-flat.sf-danger:focus { + background: rgba(var(--color-sf-error), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-error)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-danger:focus-visible, +.sf-css.sf-btn.sf-flat.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-flat.sf-danger:active, .sf-btn.sf-flat.sf-danger.sf-active, +.sf-css.sf-btn.sf-flat.sf-danger:active, +.sf-css.sf-btn.sf-flat.sf-danger.sf-active { + background: rgba(var(--color-sf-error), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-error)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-danger:disabled, .sf-btn.sf-flat.sf-danger.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-danger:disabled, +.sf-css.sf-btn.sf-flat.sf-danger.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-danger .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-danger .sf-ripple-element { + background: rgba(var(--color-sf-danger-text), 0.24); +} +.sf-btn.sf-outlined, +.sf-css.sf-btn.sf-outlined { + background: transparent; + border-color: rgba(var(--color-sf-outline)); + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); + border: 1px solid; +} +.sf-btn.sf-outlined:hover, +.sf-css.sf-btn.sf-outlined:hover { + background: rgba(var(--color-sf-on-surface), 0.08); + border-color: rgba(var(--color-sf-outline)); + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-outlined:focus, +.sf-css.sf-btn.sf-outlined:focus { + background: rgba(var(--color-sf-on-surface), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-outlined:focus-visible, +.sf-css.sf-btn.sf-outlined:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-outlined:active, .sf-btn.sf-outlined.sf-active, +.sf-css.sf-btn.sf-outlined:active, +.sf-css.sf-btn.sf-outlined.sf-active { + background: rgba(var(--color-sf-on-surface), 0.12); + border-color: rgba(var(--color-sf-outline)); + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-outlined:disabled, .sf-btn.sf-outlined.sf-disabled, +.sf-css.sf-btn.sf-outlined:disabled, +.sf-css.sf-btn.sf-outlined.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-primary, .sf-btn.sf-outlined.sf-filled, +.sf-css.sf-btn.sf-outlined.sf-primary, +.sf-css.sf-btn.sf-outlined.sf-filled { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:hover, .sf-btn.sf-outlined.sf-filled:hover, +.sf-css.sf-btn.sf-outlined.sf-primary:hover, +.sf-css.sf-btn.sf-outlined.sf-filled:hover { + background: rgba(var(--color-sf-primary), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:focus, .sf-btn.sf-outlined.sf-filled:focus, +.sf-css.sf-btn.sf-outlined.sf-primary:focus, +.sf-css.sf-btn.sf-outlined.sf-filled:focus { + background: rgba(var(--color-sf-primary), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:focus-visible, .sf-btn.sf-outlined.sf-filled:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-primary:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-outlined.sf-primary:active, .sf-btn.sf-outlined.sf-primary.sf-active, .sf-btn.sf-outlined.sf-filled:active, .sf-btn.sf-outlined.sf-filled.sf-active, +.sf-css.sf-btn.sf-outlined.sf-primary:active, +.sf-css.sf-btn.sf-outlined.sf-primary.sf-active, +.sf-css.sf-btn.sf-outlined.sf-filled:active, +.sf-css.sf-btn.sf-outlined.sf-filled.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; + color: rgba(var(--color-sf-on-primary)); + background: rgba(var(--color-sf-primary), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:disabled, .sf-btn.sf-outlined.sf-primary.sf-disabled, .sf-btn.sf-outlined.sf-filled:disabled, .sf-btn.sf-outlined.sf-filled.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-primary:disabled, +.sf-css.sf-btn.sf-outlined.sf-primary.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-filled:disabled, +.sf-css.sf-btn.sf-outlined.sf-filled.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-success, +.sf-css.sf-btn.sf-outlined.sf-success { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:hover, +.sf-css.sf-btn.sf-outlined.sf-success:hover { + background: rgba(var(--color-sf-success), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:focus, +.sf-css.sf-btn.sf-outlined.sf-success:focus { + background: rgba(var(--color-sf-success), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-success-text)); +} +.sf-btn.sf-outlined.sf-success:active, .sf-btn.sf-outlined.sf-success.sf-active, +.sf-css.sf-btn.sf-outlined.sf-success:active, +.sf-css.sf-btn.sf-outlined.sf-success.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + box-shadow: none; + color: rgba(var(--color-sf-success-text)); + background: rgba(var(--color-sf-success), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:disabled, .sf-btn.sf-outlined.sf-success.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-success:disabled, +.sf-css.sf-btn.sf-outlined.sf-success.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-info, +.sf-css.sf-btn.sf-outlined.sf-info { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:hover, +.sf-css.sf-btn.sf-outlined.sf-info:hover { + background: rgba(var(--color-sf-info), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:focus, +.sf-css.sf-btn.sf-outlined.sf-info:focus { + background: rgba(var(--color-sf-info), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-info-text)); +} +.sf-btn.sf-outlined.sf-info:active, .sf-btn.sf-outlined.sf-info.sf-active, +.sf-css.sf-btn.sf-outlined.sf-info:active, +.sf-css.sf-btn.sf-outlined.sf-info.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-color: rgba(var(--color-sf-info)); + box-shadow: none; + color: rgba(var(--color-sf-info-text)); + background: rgba(var(--color-sf-info), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:disabled, .sf-btn.sf-outlined.sf-info.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-info:disabled, +.sf-css.sf-btn.sf-outlined.sf-info.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-warning, +.sf-css.sf-btn.sf-outlined.sf-warning { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:hover, +.sf-css.sf-btn.sf-outlined.sf-warning:hover { + background: rgba(var(--color-sf-warning), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:focus, +.sf-css.sf-btn.sf-outlined.sf-warning:focus { + background: rgba(var(--color-sf-warning), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-warning-text)); +} +.sf-btn.sf-outlined.sf-warning:active, .sf-btn.sf-outlined.sf-warning.sf-active, +.sf-css.sf-btn.sf-outlined.sf-warning:active, +.sf-css.sf-btn.sf-outlined.sf-warning.sf-active { + background: rgba(var(--color-sf-warning)); + border-color: transparent; + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + box-shadow: none; + color: rgba(var(--color-sf-warning-text)); + background: rgba(var(--color-sf-warning), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:disabled, .sf-btn.sf-outlined.sf-warning.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-warning:disabled, +.sf-css.sf-btn.sf-outlined.sf-warning.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-danger, +.sf-css.sf-btn.sf-outlined.sf-danger { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-outlined.sf-danger:hover, +.sf-css.sf-btn.sf-outlined.sf-danger:hover { + background: rgba(var(--color-sf-error), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-outlined.sf-danger:focus, +.sf-css.sf-btn.sf-outlined.sf-danger:focus { + background: rgba(var(--color-sf-error), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-outlined.sf-danger:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-outlined.sf-danger:active, .sf-btn.sf-outlined.sf-danger.sf-active, +.sf-css.sf-btn.sf-outlined.sf-danger:active, +.sf-css.sf-btn.sf-outlined.sf-danger.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + box-shadow: none; + color: rgba(var(--color-sf-danger-text)); + background: rgba(var(--color-sf-error), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-outlined.sf-danger:disabled, .sf-btn.sf-outlined.sf-danger.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-danger:disabled, +.sf-css.sf-btn.sf-outlined.sf-danger.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-link, +.sf-css.sf-btn.sf-link { + background: transparent; + border-color: transparent; + border-radius: 0; + box-shadow: none; + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-link:hover, +.sf-css.sf-btn.sf-link:hover { + border-radius: 4px; + text-decoration: underline; +} +.sf-btn.sf-link:focus, +.sf-css.sf-btn.sf-link:focus { + border-radius: 4px; + text-decoration: underline; +} +.sf-btn.sf-link:focus:not(:focus-visible), +.sf-css.sf-btn.sf-link:focus:not(:focus-visible) { + outline: none !important; /* stylelint-disable-line declaration-no-important */ +} +.sf-btn.sf-link:focus-visible, +.sf-css.sf-btn.sf-link:focus-visible { + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-link:disabled, +.sf-css.sf-btn.sf-link:disabled { + color: rgba(var(--color-sf-on-surface), 0.38); + background: transparent; + box-shadow: none; + text-decoration: none; +} +.sf-btn.sf-inherit, +.sf-css.sf-btn.sf-inherit { + color: inherit; + background: inherit; + border-color: transparent; + box-shadow: none; +} +.sf-btn.sf-inherit:hover, .sf-btn.sf-inherit:focus, .sf-btn.sf-inherit:active, .sf-btn.sf-inherit.sf-active, +.sf-css.sf-btn.sf-inherit:hover, +.sf-css.sf-btn.sf-inherit:focus, +.sf-css.sf-btn.sf-inherit:active, +.sf-css.sf-btn.sf-inherit.sf-active { + background: rgba(0, 0, 0, 0.056); + border-color: transparent; + box-shadow: none; + color: inherit; + outline: none; +} +.sf-btn.sf-inherit:disabled, +.sf-css.sf-btn.sf-inherit:disabled { + background: inherit; + color: inherit; + border-color: transparent; + box-shadow: none; + opacity: 0.5; +} \ No newline at end of file diff --git a/components/buttons/styles/button/material3-dark.scss b/components/buttons/styles/button/material3-dark.scss new file mode 100644 index 0000000..bc1eba0 --- /dev/null +++ b/components/buttons/styles/button/material3-dark.scss @@ -0,0 +1,3 @@ +@import 'react-base/styles/definition/material3-dark.scss'; +@import 'material3-dark-definition.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/button/material3.css b/components/buttons/styles/button/material3.css new file mode 100644 index 0000000..4983c5f --- /dev/null +++ b/components/buttons/styles/button/material3.css @@ -0,0 +1,1689 @@ +.sf-dark-mode { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 208, 188, 255; + --color-sf-primary-container: 79, 55, 139; + --color-sf-secondary: 204, 194, 220; + --color-sf-secondary-container: 74, 68, 88; + --color-sf-tertiary: 239, 184, 200; + --color-sf-tertiary-container: 99, 59, 72; + --color-sf-surface: 28, 27, 31; + --color-sf-surface-variant: 73, 69, 79; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 55, 30, 115; + --color-sf-on-primary-container: 234, 221, 255; + --color-sf-on-secondary: 51, 45, 65; + --color-sf-on-secondary-container: 232, 222, 248; + --color-sf-on-tertiary: 73, 37, 50; + --color-sf-on-tertiary-containe: 255, 216, 228; + --color-sf-on-surface: 230, 225, 229; + --color-sf-on-surface-variant: 202, 196, 208; + --color-sf-on-background: 230, 225, 229; + --color-sf-outline: 147, 143, 153; + --color-sf-outline-variant: 68, 71, 70; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 208, 188, 255; + --color-sf-inverse-surface: 230, 225, 229; + --color-sf-inverse-on-surface: 49, 48, 51; + --color-sf-inverse-primary: 103, 80, 164; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 242, 184, 181; + --color-sf-error-container: 140, 29, 24; + --color-sf-on-error: 96, 20, 16; + --color-sf-on-error-container: 249, 222, 220; + --color-sf-success: 83, 202, 23; + --color-sf-success-container: 22, 62, 2; + --color-sf-on-success: 13, 39, 0; + --color-sf-on-success-container: 183, 250, 150; + --color-sf-info: 71, 172, 251; + --color-sf-info-container: 0, 67, 120; + --color-sf-on-info: 0, 51, 91; + --color-sf-on-info-container: 173, 219, 255; + --color-sf-warning: 245, 180, 130; + --color-sf-warning-container: 123, 65, 0; + --color-sf-on-warning: 99, 52, 0; + --color-sf-on-warning-container: 255, 220, 193; + --color-sf-spreadsheet-gridline: 231, 224, 236; + --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff; + --color-sf-success-text: 0, 0, 0; + --color-sf-warning-text: 0, 0, 0; + --color-sf-info-text: 0, 0, 0; + --color-sf-danger-text: 0, 0, 0; + --color-sf-diagram-palette-background: var(--color-sf-inverse-surface); + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary); +} +.sf-btn, +.sf-css.sf-btn { + /* stylelint-disable property-no-vendor-prefix */ + position: relative; + -webkit-font-smoothing: antialiased; + border: 1px solid; + border-radius: 4px; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; + justify-content: center; + line-height: 1; + outline: none; + padding: 8px 16px; + text-align: center; + text-decoration: none; + text-transform: none; + user-select: none; + vertical-align: middle; + white-space: nowrap; + letter-spacing: 0.15px; +} +.sf-btn:disabled, +.sf-css.sf-btn:disabled { + cursor: default; +} +.sf-btn:hover, .sf-btn:focus, +.sf-css.sf-btn:hover, +.sf-css.sf-btn:focus { + text-decoration: none; +} +.sf-btn::-moz-focus-inner, +.sf-css.sf-btn::-moz-focus-inner { + border: 0; + padding: 0; +} +.sf-btn .sf-btn-icon, +.sf-css.sf-btn .sf-btn-icon { + display: inline-block; + font-size: 18px; + margin-top: 0; + vertical-align: middle; + width: 1em; + line-height: 1px; +} +.sf-btn .sf-btn-icon.sf-icon-left, +.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.5em; + width: 2em; +} +.sf-btn .sf-btn-icon.sf-icon-right, +.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + width: 2em; + margin-right: -0.5em; +} +.sf-btn .sf-btn-icon.sf-icon-top, +.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 8px; + display: block; + margin-top: 0; + width: auto; +} +.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 8px; + display: block; + margin-top: 0; + width: auto; +} +.sf-btn .sf-btn-icon path, +.sf-css.sf-btn .sf-btn-icon path { + fill-rule: evenodd; + clip-rule: evenodd; +} +.sf-btn.sf-icon-btn, +.sf-css.sf-btn.sf-icon-btn { + padding: 7px 7px; + border-radius: 4px; +} +.sf-btn.sf-top-icon-btn, .sf-btn.sf-bottom-icon-btn, +.sf-css.sf-btn.sf-top-icon-btn, +.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 12px 12px; +} +.sf-btn.sf-round, +.sf-css.sf-btn.sf-round { + border-radius: 50%; + height: 32px; + line-height: 1; + padding: 0; + width: 32px; +} +.sf-btn.sf-round .sf-btn-icon, +.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 1.5em; + margin-top: 0; + width: auto; +} +.sf-btn.sf-rounded, +.sf-css.sf-btn.sf-rounded { + border-radius: 40px; +} +.sf-btn.sf-round-corner, +.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 8px 16px; +} +.sf-btn.sf-rtl .sf-icon-right, +.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.5em; + margin-right: 0; +} +.sf-btn.sf-rtl .sf-icon-left, +.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.5em; +} +.sf-btn.sf-flat, +.sf-css.sf-btn.sf-flat { + border: 1px solid; +} +.sf-btn.sf-small, +.sf-css.sf-btn.sf-small { + font-size: 11px; + line-height: 1.092; + padding: 5px 12px; +} +.sf-btn.sf-small.sf-round-corner, +.sf-css.sf-btn.sf-small.sf-round-corner { + border-radius: 25px; + padding: 5px 12px; +} +.sf-btn.sf-small .sf-btn-icon, +.sf-css.sf-btn.sf-small .sf-btn-icon { + font-size: 16px; + width: 1em; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-left { + margin-left: -0.57143em; + width: 2em; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-right { + margin-right: -0.57143em; + width: 2em; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-btn.sf-small.sf-icon-btn, +.sf-css.sf-btn.sf-small.sf-icon-btn { + padding: 4px 4px; + border-radius: 4px; +} +.sf-btn.sf-small.sf-top-icon-btn, .sf-btn.sf-small.sf-bottom-icon-btn, +.sf-css.sf-btn.sf-small.sf-top-icon-btn, +.sf-css.sf-btn.sf-small.sf-bottom-icon-btn { + line-height: 1; + padding: 12px 12px; +} +.sf-btn.sf-small.sf-round, +.sf-css.sf-btn.sf-small.sf-round { + height: 24px; + line-height: 1; + padding: 0; + width: 24px; + border-radius: 50%; +} +.sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-css.sf-btn.sf-small.sf-round .sf-btn-icon { + font-size: 16px; + line-height: 1; + width: auto; +} +.sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-right { + margin-left: -0.57143em; + margin-right: 0; +} +.sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.57143em; +} +.sf-btn.sf-block, +.sf-css.sf-btn.sf-block { + display: block; + width: 100%; +} +.sf-small .sf-btn, +.sf-small.sf-btn, +.sf-small .sf-css.sf-btn, +.sf-small.sf-css.sf-btn { + font-size: 11px; + line-height: 1.092; + padding: 5px 12px; +} +.sf-small .sf-btn.sf-round-corner, +.sf-small.sf-btn.sf-round-corner, +.sf-small .sf-css.sf-btn.sf-round-corner, +.sf-small.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 5px 12px; +} +.sf-small .sf-btn .sf-btn-icon, +.sf-small.sf-btn .sf-btn-icon, +.sf-small .sf-css.sf-btn .sf-btn-icon, +.sf-small.sf-css.sf-btn .sf-btn-icon { + font-size: 16px; + width: 1em; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-left, +.sf-small.sf-btn .sf-btn-icon.sf-icon-left, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-left, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.57143em; + width: 2em; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-right, +.sf-small.sf-btn .sf-btn-icon.sf-icon-right, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-right, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + margin-right: -0.57143em; + width: 2em; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-top, +.sf-small.sf-btn .sf-btn-icon.sf-icon-top, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-top, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-small.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-small .sf-btn.sf-icon-btn, +.sf-small.sf-btn.sf-icon-btn, +.sf-small .sf-css.sf-btn.sf-icon-btn, +.sf-small.sf-css.sf-btn.sf-icon-btn { + padding: 4px 4px; + border-radius: 4px; +} +.sf-small .sf-btn.sf-top-icon-btn, .sf-small .sf-btn.sf-bottom-icon-btn, +.sf-small.sf-btn.sf-top-icon-btn, +.sf-small.sf-btn.sf-bottom-icon-btn, +.sf-small .sf-css.sf-btn.sf-top-icon-btn, +.sf-small .sf-css.sf-btn.sf-bottom-icon-btn, +.sf-small.sf-css.sf-btn.sf-top-icon-btn, +.sf-small.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 12px 12px; +} +.sf-small .sf-btn.sf-round, +.sf-small.sf-btn.sf-round, +.sf-small .sf-css.sf-btn.sf-round, +.sf-small.sf-css.sf-btn.sf-round { + height: 24px; + line-height: 1; + padding: 0; + width: 24px; + border-radius: 50%; +} +.sf-small .sf-btn.sf-round .sf-btn-icon, +.sf-small.sf-btn.sf-round .sf-btn-icon, +.sf-small .sf-css.sf-btn.sf-round .sf-btn-icon, +.sf-small.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 16px; + line-height: 1; + width: auto; +} +.sf-small .sf-btn.sf-rtl .sf-icon-right, +.sf-small.sf-btn.sf-rtl .sf-icon-right, +.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-right, +.sf-small.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.57143em; + margin-right: 0; +} +.sf-small .sf-btn.sf-rtl .sf-icon-left, +.sf-small.sf-btn.sf-rtl .sf-icon-left, +.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-left, +.sf-small.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.57143em; +} +.sf-large.sf-small .sf-btn, +.sf-large .sf-small.sf-btn, +.sf-large.sf-small .sf-css.sf-btn, +.sf-large .sf-small.sf-css.sf-btn { + font-size: 14px; + line-height: 1.476; + padding: 7px 20px; +} +.sf-large.sf-small .sf-btn.sf-round-corner, +.sf-large .sf-small.sf-btn.sf-round-corner, +.sf-large.sf-small .sf-css.sf-btn.sf-round-corner, +.sf-large .sf-small.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 7px 20px; +} +.sf-large.sf-small .sf-btn .sf-btn-icon, +.sf-large .sf-small.sf-btn .sf-btn-icon, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon { + font-size: 18px; + width: 1em; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-left, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.5em; + width: 2em; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-right, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + margin-right: -0.5em; + width: 2em; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-top, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-large.sf-small .sf-btn.sf-icon-btn, +.sf-large .sf-small.sf-btn.sf-icon-btn, +.sf-large.sf-small .sf-css.sf-btn.sf-icon-btn, +.sf-large .sf-small.sf-css.sf-btn.sf-icon-btn { + padding: 6px 13px; + border-radius: 4px; +} +.sf-large.sf-small .sf-btn.sf-top-icon-btn, .sf-large.sf-small .sf-btn.sf-bottom-icon-btn, +.sf-large .sf-small.sf-btn.sf-top-icon-btn, +.sf-large .sf-small.sf-btn.sf-bottom-icon-btn, +.sf-large.sf-small .sf-css.sf-btn.sf-top-icon-btn, +.sf-large.sf-small .sf-css.sf-btn.sf-bottom-icon-btn, +.sf-large .sf-small.sf-css.sf-btn.sf-top-icon-btn, +.sf-large .sf-small.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 16px 16px; +} +.sf-large.sf-small .sf-btn.sf-round, +.sf-large .sf-small.sf-btn.sf-round, +.sf-large.sf-small .sf-css.sf-btn.sf-round, +.sf-large .sf-small.sf-css.sf-btn.sf-round { + height: 36px; + line-height: 1; + padding: 0; + width: 36px; +} +.sf-large.sf-small .sf-btn.sf-round .sf-btn-icon, +.sf-large .sf-small.sf-btn.sf-round .sf-btn-icon, +.sf-large.sf-small .sf-css.sf-btn.sf-round .sf-btn-icon, +.sf-large .sf-small.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 0; + width: auto; +} +.sf-large.sf-small .sf-btn.sf-rtl .sf-icon-right, +.sf-large .sf-small.sf-btn.sf-rtl .sf-icon-right, +.sf-large.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-right, +.sf-large .sf-small.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.5em; + margin-right: 0; +} +.sf-large.sf-small .sf-btn.sf-rtl .sf-icon-left, +.sf-large .sf-small.sf-btn.sf-rtl .sf-icon-left, +.sf-large.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-left, +.sf-large .sf-small.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.5em; +} +.sf-large .sf-btn, +.sf-large.sf-btn, +.sf-large .sf-css.sf-btn, +.sf-large.sf-css.sf-btn { + font-size: 14px; + line-height: 1.286; + padding: 10px 24px; +} +.sf-large .sf-btn.sf-round-corner, +.sf-large.sf-btn.sf-round-corner, +.sf-large .sf-css.sf-btn.sf-round-corner, +.sf-large.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 10px 24px; +} +.sf-large .sf-btn .sf-btn-icon, +.sf-large.sf-btn .sf-btn-icon, +.sf-large .sf-css.sf-btn .sf-btn-icon, +.sf-large.sf-css.sf-btn .sf-btn-icon { + font-size: 22px; + width: 1em; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-left, +.sf-large.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.2em; + width: 2em; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-right, +.sf-large.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + margin-right: -0.2em; + width: 2em; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-top, +.sf-large.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 8px; + width: auto; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 8px; + width: auto; +} +.sf-large .sf-btn.sf-icon-btn, +.sf-large.sf-btn.sf-icon-btn, +.sf-large .sf-css.sf-btn.sf-icon-btn, +.sf-large.sf-css.sf-btn.sf-icon-btn { + padding: 11px 11px; + border-radius: 4px; +} +.sf-large .sf-btn.sf-top-icon-btn, .sf-large .sf-btn.sf-bottom-icon-btn, +.sf-large.sf-btn.sf-top-icon-btn, +.sf-large.sf-btn.sf-bottom-icon-btn, +.sf-large .sf-css.sf-btn.sf-top-icon-btn, +.sf-large .sf-css.sf-btn.sf-bottom-icon-btn, +.sf-large.sf-css.sf-btn.sf-top-icon-btn, +.sf-large.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 16px 16px; +} +.sf-large .sf-btn.sf-round, +.sf-large.sf-btn.sf-round, +.sf-large .sf-css.sf-btn.sf-round, +.sf-large.sf-css.sf-btn.sf-round { + height: 40px; + line-height: 1; + padding: 0; + width: 40px; + border-radius: 50%; +} +.sf-large .sf-btn.sf-round .sf-btn-icon, +.sf-large.sf-btn.sf-round .sf-btn-icon, +.sf-large .sf-css.sf-btn.sf-round .sf-btn-icon, +.sf-large.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 1.5em; + width: auto; +} +.sf-large .sf-btn.sf-rtl .sf-icon-right, +.sf-large.sf-btn.sf-rtl .sf-icon-right, +.sf-large .sf-css.sf-btn.sf-rtl .sf-icon-right, +.sf-large.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.2em; + margin-right: 0; +} +.sf-large .sf-btn.sf-rtl .sf-icon-left, +.sf-large.sf-btn.sf-rtl .sf-icon-left, +.sf-large .sf-css.sf-btn.sf-rtl .sf-icon-left, +.sf-large.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.2em; +} +.sf-large .sf-btn.sf-small, +.sf-large.sf-btn.sf-small, +.sf-large .sf-css.sf-btn.sf-small, +.sf-large.sf-css.sf-btn.sf-small { + font-size: 14px; + line-height: 1.476; + padding: 7px 20px; +} +.sf-large .sf-btn.sf-small.sf-round-corner, +.sf-large.sf-btn.sf-small.sf-round-corner, +.sf-large .sf-css.sf-btn.sf-small.sf-round-corner, +.sf-large.sf-css.sf-btn.sf-small.sf-round-corner { + border-radius: 25px; + padding: 7px 20px; +} +.sf-large .sf-btn.sf-small .sf-btn-icon, +.sf-large.sf-btn.sf-small .sf-btn-icon, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon { + font-size: 18px; + width: 1em; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-left { + margin-left: -0.5em; + width: 2em; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-right { + margin-right: -0.5em; + width: 2em; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-large .sf-btn.sf-small.sf-icon-btn, +.sf-large.sf-btn.sf-small.sf-icon-btn, +.sf-large .sf-css.sf-btn.sf-small.sf-icon-btn, +.sf-large.sf-css.sf-btn.sf-small.sf-icon-btn { + padding: 6px 13px; + border-radius: 4px; +} +.sf-large .sf-btn.sf-small.sf-top-icon-btn, .sf-large .sf-btn.sf-small.sf-bottom-icon-btn, +.sf-large.sf-btn.sf-small.sf-top-icon-btn, +.sf-large.sf-btn.sf-small.sf-bottom-icon-btn, +.sf-large .sf-css.sf-btn.sf-small.sf-top-icon-btn, +.sf-large .sf-css.sf-btn.sf-small.sf-bottom-icon-btn, +.sf-large.sf-css.sf-btn.sf-small.sf-top-icon-btn, +.sf-large.sf-css.sf-btn.sf-small.sf-bottom-icon-btn { + line-height: 1; + padding: 16px 16px; +} +.sf-large .sf-btn.sf-small.sf-round, +.sf-large.sf-btn.sf-small.sf-round, +.sf-large .sf-css.sf-btn.sf-small.sf-round, +.sf-large.sf-css.sf-btn.sf-small.sf-round { + height: 36px; + line-height: 1; + padding: 0; + width: 36px; + border-radius: 50%; +} +.sf-large .sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-large.sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-large .sf-css.sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-large.sf-css.sf-btn.sf-small.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 0; + width: auto; +} +.sf-large .sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-large.sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-large .sf-css.sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-large.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-right { + margin-left: -0.5em; + margin-right: 0; +} +.sf-large .sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-large.sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-large .sf-css.sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-large.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.5em; +} +/* stylelint-disable property-no-vendor-prefix */ +.sf-btn, +.sf-css.sf-btn { + -webkit-tap-highlight-color: transparent; + background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-surface), 0), rgba(var(--color-sf-surface), 0)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.sf-btn:hover, +.sf-css.sf-btn:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn:focus, +.sf-css.sf-btn:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + color: rgba(var(--color-sf-on-surface)); + outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid; + outline-offset: 0; + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn:focus-visible, +.sf-css.sf-btn:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn:active, +.sf-css.sf-btn:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-active, +.sf-css.sf-btn.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn:disabled, .sf-btn.sf-disabled, +.sf-css.sf-btn:disabled, +.sf-css.sf-btn.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn .sf-ripple-element, +.sf-css.sf-btn .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.24); +} +.sf-btn.sf-round, .sf-btn.sf-round-edge, +.sf-css.sf-btn.sf-round, +.sf-css.sf-btn.sf-round-edge { + background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 0), rgba(var(--color-sf-surface), 0)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-round:hover, .sf-btn.sf-round-edge:hover, +.sf-css.sf-btn.sf-round:hover, +.sf-css.sf-btn.sf-round-edge:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-round:focus, .sf-btn.sf-round-edge:focus, +.sf-css.sf-btn.sf-round:focus, +.sf-css.sf-btn.sf-round-edge:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); + outline: rgba(var(--color-sf-white)) 0 solid; + outline-offset: 0; +} +.sf-btn.sf-round:focus-visible, .sf-btn.sf-round-edge:focus-visible, +.sf-css.sf-btn.sf-round:focus-visible, +.sf-css.sf-btn.sf-round-edge:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-round:active, .sf-btn.sf-round-edge:active, +.sf-css.sf-btn.sf-round:active, +.sf-css.sf-btn.sf-round-edge:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); + outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid; + outline-offset: 0; +} +.sf-btn.sf-round:disabled, .sf-btn.sf-round.sf-disabled, .sf-btn.sf-round-edge:disabled, .sf-btn.sf-round-edge.sf-disabled, +.sf-css.sf-btn.sf-round:disabled, +.sf-css.sf-btn.sf-round.sf-disabled, +.sf-css.sf-btn.sf-round-edge:disabled, +.sf-css.sf-btn.sf-round-edge.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-round.sf-primary:hover, .sf-btn.sf-round.sf-filled:hover, .sf-btn.sf-round-edge.sf-primary:hover, .sf-btn.sf-round-edge.sf-filled:hover, +.sf-css.sf-btn.sf-round.sf-primary:hover, +.sf-css.sf-btn.sf-round.sf-filled:hover, +.sf-css.sf-btn.sf-round-edge.sf-primary:hover, +.sf-css.sf-btn.sf-round-edge.sf-filled:hover { + border-color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-round.sf-primary:focus, .sf-btn.sf-round.sf-filled:focus, .sf-btn.sf-round-edge.sf-primary:focus, .sf-btn.sf-round-edge.sf-filled:focus, +.sf-css.sf-btn.sf-round.sf-primary:focus, +.sf-css.sf-btn.sf-round.sf-filled:focus, +.sf-css.sf-btn.sf-round-edge.sf-primary:focus, +.sf-css.sf-btn.sf-round-edge.sf-filled:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-primary:focus-visible, .sf-btn.sf-round.sf-filled:focus-visible, .sf-btn.sf-round-edge.sf-primary:focus-visible, .sf-btn.sf-round-edge.sf-filled:focus-visible, +.sf-css.sf-btn.sf-round.sf-primary:focus-visible, +.sf-css.sf-btn.sf-round.sf-filled:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-primary:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-round.sf-success:hover, .sf-btn.sf-round-edge.sf-success:hover, +.sf-css.sf-btn.sf-round.sf-success:hover, +.sf-css.sf-btn.sf-round-edge.sf-success:hover { + border-color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-round.sf-success:focus, .sf-btn.sf-round-edge.sf-success:focus, +.sf-css.sf-btn.sf-round.sf-success:focus, +.sf-css.sf-btn.sf-round-edge.sf-success:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-success:focus-visible, .sf-btn.sf-round-edge.sf-success:focus-visible, +.sf-css.sf-btn.sf-round.sf-success:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-round.sf-info:hover, .sf-btn.sf-round-edge.sf-info:hover, +.sf-css.sf-btn.sf-round.sf-info:hover, +.sf-css.sf-btn.sf-round-edge.sf-info:hover { + border-color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-round.sf-info:focus, .sf-btn.sf-round-edge.sf-info:focus, +.sf-css.sf-btn.sf-round.sf-info:focus, +.sf-css.sf-btn.sf-round-edge.sf-info:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-info:focus-visible, .sf-btn.sf-round-edge.sf-info:focus-visible, +.sf-css.sf-btn.sf-round.sf-info:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-round.sf-warning:hover, .sf-btn.sf-round-edge.sf-warning:hover, +.sf-css.sf-btn.sf-round.sf-warning:hover, +.sf-css.sf-btn.sf-round-edge.sf-warning:hover { + border-color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-round.sf-warning:focus, .sf-btn.sf-round-edge.sf-warning:focus, +.sf-css.sf-btn.sf-round.sf-warning:focus, +.sf-css.sf-btn.sf-round-edge.sf-warning:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-warning:focus-visible, .sf-btn.sf-round-edge.sf-warning:focus-visible, +.sf-css.sf-btn.sf-round.sf-warning:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-round.sf-danger:hover, .sf-btn.sf-round-edge.sf-danger:hover, +.sf-css.sf-btn.sf-round.sf-danger:hover, +.sf-css.sf-btn.sf-round-edge.sf-danger:hover { + border-color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-round.sf-danger:focus, .sf-btn.sf-round-edge.sf-danger:focus, +.sf-css.sf-btn.sf-round.sf-danger:focus, +.sf-css.sf-btn.sf-round-edge.sf-danger:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-danger:focus-visible, .sf-btn.sf-round-edge.sf-danger:focus-visible, +.sf-css.sf-btn.sf-round.sf-danger:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-filled, +.sf-css.sf-btn.sf-filled { + background: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: none; +} +.sf-btn.sf-filled:hover, +.sf-css.sf-btn.sf-filled:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-filled:focus, +.sf-css.sf-btn.sf-filled:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid; + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-filled:focus-visible, +.sf-css.sf-btn.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-filled:active, +.sf-css.sf-btn.sf-filled:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-filled.sf-active, +.sf-css.sf-btn.sf-filled.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-filled:disabled, .sf-btn.sf-filled.sf-disabled, +.sf-css.sf-btn.sf-filled:disabled, +.sf-css.sf-btn.sf-filled.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-filled .sf-ripple-element, +.sf-css.sf-btn.sf-filled .sf-ripple-element { + background: rgba(var(--color-sf-on-primary), 0.24); +} +.sf-btn.sf-success, +.sf-css.sf-btn.sf-success { + background: rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: none; +} +.sf-btn.sf-success:hover, +.sf-css.sf-btn.sf-success:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-success-text)); +} +.sf-btn.sf-success:focus, +.sf-css.sf-btn.sf-success:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-success:focus-visible, +.sf-css.sf-btn.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-success:active, .sf-btn.sf-success.sf-active, +.sf-css.sf-btn.sf-success:active, +.sf-css.sf-btn.sf-success.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-success:disabled, .sf-btn.sf-success.sf-disabled, +.sf-css.sf-btn.sf-success:disabled, +.sf-css.sf-btn.sf-success.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-success .sf-ripple-element, +.sf-css.sf-btn.sf-success .sf-ripple-element { + background: rgba(var(--color-sf-success-text), 0.24); +} +.sf-btn.sf-info, +.sf-css.sf-btn.sf-info { + background: rgba(var(--color-sf-info)); + border-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + box-shadow: none; +} +.sf-btn.sf-info:hover, +.sf-css.sf-btn.sf-info:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-info-text)); +} +.sf-btn.sf-info:focus, +.sf-css.sf-btn.sf-info:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + border-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-info:focus-visible, +.sf-css.sf-btn.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-info:active, .sf-btn.sf-info.sf-active, +.sf-css.sf-btn.sf-info:active, +.sf-css.sf-btn.sf-info.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + border-color: rgba(var(--color-sf-info)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-info:disabled, .sf-btn.sf-info.sf-disabled, +.sf-css.sf-btn.sf-info:disabled, +.sf-css.sf-btn.sf-info.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-info .sf-ripple-element, +.sf-css.sf-btn.sf-info .sf-ripple-element { + background: rgba(var(--color-sf-info-text), 0.24); +} +.sf-btn.sf-warning, +.sf-css.sf-btn.sf-warning { + background: rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: none; +} +.sf-btn.sf-warning:hover, +.sf-css.sf-btn.sf-warning:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-warning-text)); +} +.sf-btn.sf-warning:focus, +.sf-css.sf-btn.sf-warning:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-warning:focus-visible, +.sf-css.sf-btn.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-warning:active, .sf-btn.sf-warning.sf-active, +.sf-css.sf-btn.sf-warning:active, +.sf-css.sf-btn.sf-warning.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-warning:disabled, .sf-btn.sf-warning.sf-disabled, +.sf-css.sf-btn.sf-warning:disabled, +.sf-css.sf-btn.sf-warning.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-warning .sf-ripple-element, +.sf-css.sf-btn.sf-warning .sf-ripple-element { + background: rgba(var(--color-sf-warning-text), 0.24); +} +.sf-btn.sf-danger, +.sf-css.sf-btn.sf-danger { + background: rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: none; +} +.sf-btn.sf-danger:hover, +.sf-css.sf-btn.sf-danger:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-danger:focus, +.sf-css.sf-btn.sf-danger:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-danger:focus-visible, +.sf-css.sf-btn.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-danger:active, +.sf-css.sf-btn.sf-danger:active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-danger.sf-active, +.sf-css.sf-btn.sf-danger.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-danger:disabled, .sf-btn.sf-danger.sf-disabled, +.sf-css.sf-btn.sf-danger:disabled, +.sf-css.sf-btn.sf-danger.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-danger .sf-ripple-element, +.sf-css.sf-btn.sf-danger .sf-ripple-element { + background: rgba(var(--color-sf-danger-text), 0.24); +} +.sf-btn.sf-flat, +.sf-css.sf-btn.sf-flat { + background: transparent; + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-flat:hover, +.sf-css.sf-btn.sf-flat:hover { + background: rgba(var(--color-sf-on-surface), 0.08); + border-color: none; + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-flat:focus, +.sf-css.sf-btn.sf-flat:focus { + background: rgba(var(--color-sf-on-surface), 0.08); + border-color: none; + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-btn.sf-flat:focus-visible, +.sf-css.sf-btn.sf-flat:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-flat:active, .sf-btn.sf-flat.sf-active, +.sf-css.sf-btn.sf-flat:active, +.sf-css.sf-btn.sf-flat.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-btn.sf-flat:disabled, .sf-btn.sf-flat.sf-disabled, +.sf-css.sf-btn.sf-flat:disabled, +.sf-css.sf-btn.sf-flat.sf-disabled { + background: transparent; + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat .sf-ripple-element, +.sf-css.sf-btn.sf-flat .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.24); +} +.sf-btn.sf-flat.sf-primary, .sf-btn.sf-flat.sf-filled, +.sf-css.sf-btn.sf-flat.sf-primary, +.sf-css.sf-btn.sf-flat.sf-filled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:hover, .sf-btn.sf-flat.sf-filled:hover, +.sf-css.sf-btn.sf-flat.sf-primary:hover, +.sf-css.sf-btn.sf-flat.sf-filled:hover { + background: rgba(var(--color-sf-primary), 0.08); + border-color: none; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:focus, .sf-btn.sf-flat.sf-filled:focus, +.sf-css.sf-btn.sf-flat.sf-primary:focus, +.sf-css.sf-btn.sf-flat.sf-filled:focus { + background: rgba(var(--color-sf-primary), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:focus-visible, .sf-btn.sf-flat.sf-filled:focus-visible, +.sf-css.sf-btn.sf-flat.sf-primary:focus-visible, +.sf-css.sf-btn.sf-flat.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-flat.sf-primary:active, .sf-btn.sf-flat.sf-primary.sf-active, .sf-btn.sf-flat.sf-filled:active, .sf-btn.sf-flat.sf-filled.sf-active, +.sf-css.sf-btn.sf-flat.sf-primary:active, +.sf-css.sf-btn.sf-flat.sf-primary.sf-active, +.sf-css.sf-btn.sf-flat.sf-filled:active, +.sf-css.sf-btn.sf-flat.sf-filled.sf-active { + background: rgba(var(--color-sf-primary), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:disabled, .sf-btn.sf-flat.sf-primary.sf-disabled, .sf-btn.sf-flat.sf-filled:disabled, .sf-btn.sf-flat.sf-filled.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-primary:disabled, +.sf-css.sf-btn.sf-flat.sf-primary.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-filled:disabled, +.sf-css.sf-btn.sf-flat.sf-filled.sf-disabled { + background: transparent; + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-primary .sf-ripple-element, .sf-btn.sf-flat.sf-filled .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-primary .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-filled .sf-ripple-element { + background: rgba(var(--color-sf-on-primary), 0.24); +} +.sf-btn.sf-flat.sf-success, +.sf-css.sf-btn.sf-flat.sf-success { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-flat.sf-success:hover, +.sf-css.sf-btn.sf-flat.sf-success:hover { + background: rgba(var(--color-sf-success), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-flat.sf-success:focus, +.sf-css.sf-btn.sf-flat.sf-success:focus { + background: rgba(var(--color-sf-success), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-success)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-success:focus-visible, +.sf-css.sf-btn.sf-flat.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-success-text)); +} +.sf-btn.sf-flat.sf-success:active, .sf-btn.sf-flat.sf-success.sf-active, +.sf-css.sf-btn.sf-flat.sf-success:active, +.sf-css.sf-btn.sf-flat.sf-success.sf-active { + background: rgba(var(--color-sf-success), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-success)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-success:disabled, .sf-btn.sf-flat.sf-success.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-success:disabled, +.sf-css.sf-btn.sf-flat.sf-success.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-success .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-success .sf-ripple-element { + background: rgba(var(--color-sf-success-text), 0.24); +} +.sf-btn.sf-flat.sf-info, +.sf-css.sf-btn.sf-flat.sf-info { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-flat.sf-info:hover, +.sf-css.sf-btn.sf-flat.sf-info:hover { + background: rgba(var(--color-sf-info), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-flat.sf-info:focus, +.sf-css.sf-btn.sf-flat.sf-info:focus { + background: rgba(var(--color-sf-info), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-info)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-info:focus-visible, +.sf-css.sf-btn.sf-flat.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-info-text)); +} +.sf-btn.sf-flat.sf-info:active, .sf-btn.sf-flat.sf-info.sf-active, +.sf-css.sf-btn.sf-flat.sf-info:active, +.sf-css.sf-btn.sf-flat.sf-info.sf-active { + background: rgba(var(--color-sf-info), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-info)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-info:disabled, .sf-btn.sf-flat.sf-info.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-info:disabled, +.sf-css.sf-btn.sf-flat.sf-info.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-info .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-info .sf-ripple-element { + background: rgba(var(--color-sf-info-text), 0.24); +} +.sf-btn.sf-flat.sf-warning, +.sf-css.sf-btn.sf-flat.sf-warning { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-flat.sf-warning:hover, +.sf-css.sf-btn.sf-flat.sf-warning:hover { + background: rgba(var(--color-sf-warning), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-flat.sf-warning:focus, +.sf-css.sf-btn.sf-flat.sf-warning:focus { + background: rgba(var(--color-sf-warning), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-warning)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-warning:focus-visible, +.sf-css.sf-btn.sf-flat.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-warning-text)); +} +.sf-btn.sf-flat.sf-warning:active, .sf-btn.sf-flat.sf-warning.sf-active, +.sf-css.sf-btn.sf-flat.sf-warning:active, +.sf-css.sf-btn.sf-flat.sf-warning.sf-active { + background: rgba(var(--color-sf-warning), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-warning)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-warning:disabled, .sf-btn.sf-flat.sf-warning.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-warning:disabled, +.sf-css.sf-btn.sf-flat.sf-warning.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-warning .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-warning .sf-ripple-element { + background: rgba(var(--color-sf-warning-text), 0.24); +} +.sf-btn.sf-flat.sf-danger, +.sf-css.sf-btn.sf-flat.sf-danger { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-flat.sf-danger:hover, +.sf-css.sf-btn.sf-flat.sf-danger:hover { + background: rgba(var(--color-sf-error), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-flat.sf-danger:focus, +.sf-css.sf-btn.sf-flat.sf-danger:focus { + background: rgba(var(--color-sf-error), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-error)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-danger:focus-visible, +.sf-css.sf-btn.sf-flat.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-flat.sf-danger:active, .sf-btn.sf-flat.sf-danger.sf-active, +.sf-css.sf-btn.sf-flat.sf-danger:active, +.sf-css.sf-btn.sf-flat.sf-danger.sf-active { + background: rgba(var(--color-sf-error), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-error)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-danger:disabled, .sf-btn.sf-flat.sf-danger.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-danger:disabled, +.sf-css.sf-btn.sf-flat.sf-danger.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-danger .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-danger .sf-ripple-element { + background: rgba(var(--color-sf-danger-text), 0.24); +} +.sf-btn.sf-outlined, +.sf-css.sf-btn.sf-outlined { + background: transparent; + border-color: rgba(var(--color-sf-outline)); + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); + border: 1px solid; +} +.sf-btn.sf-outlined:hover, +.sf-css.sf-btn.sf-outlined:hover { + background: rgba(var(--color-sf-on-surface), 0.08); + border-color: rgba(var(--color-sf-outline)); + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-outlined:focus, +.sf-css.sf-btn.sf-outlined:focus { + background: rgba(var(--color-sf-on-surface), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-outlined:focus-visible, +.sf-css.sf-btn.sf-outlined:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-outlined:active, .sf-btn.sf-outlined.sf-active, +.sf-css.sf-btn.sf-outlined:active, +.sf-css.sf-btn.sf-outlined.sf-active { + background: rgba(var(--color-sf-on-surface), 0.12); + border-color: rgba(var(--color-sf-outline)); + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-outlined:disabled, .sf-btn.sf-outlined.sf-disabled, +.sf-css.sf-btn.sf-outlined:disabled, +.sf-css.sf-btn.sf-outlined.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-primary, .sf-btn.sf-outlined.sf-filled, +.sf-css.sf-btn.sf-outlined.sf-primary, +.sf-css.sf-btn.sf-outlined.sf-filled { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:hover, .sf-btn.sf-outlined.sf-filled:hover, +.sf-css.sf-btn.sf-outlined.sf-primary:hover, +.sf-css.sf-btn.sf-outlined.sf-filled:hover { + background: rgba(var(--color-sf-primary), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:focus, .sf-btn.sf-outlined.sf-filled:focus, +.sf-css.sf-btn.sf-outlined.sf-primary:focus, +.sf-css.sf-btn.sf-outlined.sf-filled:focus { + background: rgba(var(--color-sf-primary), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:focus-visible, .sf-btn.sf-outlined.sf-filled:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-primary:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-outlined.sf-primary:active, .sf-btn.sf-outlined.sf-primary.sf-active, .sf-btn.sf-outlined.sf-filled:active, .sf-btn.sf-outlined.sf-filled.sf-active, +.sf-css.sf-btn.sf-outlined.sf-primary:active, +.sf-css.sf-btn.sf-outlined.sf-primary.sf-active, +.sf-css.sf-btn.sf-outlined.sf-filled:active, +.sf-css.sf-btn.sf-outlined.sf-filled.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; + color: rgba(var(--color-sf-on-primary)); + background: rgba(var(--color-sf-primary), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:disabled, .sf-btn.sf-outlined.sf-primary.sf-disabled, .sf-btn.sf-outlined.sf-filled:disabled, .sf-btn.sf-outlined.sf-filled.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-primary:disabled, +.sf-css.sf-btn.sf-outlined.sf-primary.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-filled:disabled, +.sf-css.sf-btn.sf-outlined.sf-filled.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-success, +.sf-css.sf-btn.sf-outlined.sf-success { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:hover, +.sf-css.sf-btn.sf-outlined.sf-success:hover { + background: rgba(var(--color-sf-success), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:focus, +.sf-css.sf-btn.sf-outlined.sf-success:focus { + background: rgba(var(--color-sf-success), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-success-text)); +} +.sf-btn.sf-outlined.sf-success:active, .sf-btn.sf-outlined.sf-success.sf-active, +.sf-css.sf-btn.sf-outlined.sf-success:active, +.sf-css.sf-btn.sf-outlined.sf-success.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + box-shadow: none; + color: rgba(var(--color-sf-success-text)); + background: rgba(var(--color-sf-success), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:disabled, .sf-btn.sf-outlined.sf-success.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-success:disabled, +.sf-css.sf-btn.sf-outlined.sf-success.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-info, +.sf-css.sf-btn.sf-outlined.sf-info { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:hover, +.sf-css.sf-btn.sf-outlined.sf-info:hover { + background: rgba(var(--color-sf-info), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:focus, +.sf-css.sf-btn.sf-outlined.sf-info:focus { + background: rgba(var(--color-sf-info), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-info-text)); +} +.sf-btn.sf-outlined.sf-info:active, .sf-btn.sf-outlined.sf-info.sf-active, +.sf-css.sf-btn.sf-outlined.sf-info:active, +.sf-css.sf-btn.sf-outlined.sf-info.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-color: rgba(var(--color-sf-info)); + box-shadow: none; + color: rgba(var(--color-sf-info-text)); + background: rgba(var(--color-sf-info), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:disabled, .sf-btn.sf-outlined.sf-info.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-info:disabled, +.sf-css.sf-btn.sf-outlined.sf-info.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-warning, +.sf-css.sf-btn.sf-outlined.sf-warning { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:hover, +.sf-css.sf-btn.sf-outlined.sf-warning:hover { + background: rgba(var(--color-sf-warning), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:focus, +.sf-css.sf-btn.sf-outlined.sf-warning:focus { + background: rgba(var(--color-sf-warning), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-warning-text)); +} +.sf-btn.sf-outlined.sf-warning:active, .sf-btn.sf-outlined.sf-warning.sf-active, +.sf-css.sf-btn.sf-outlined.sf-warning:active, +.sf-css.sf-btn.sf-outlined.sf-warning.sf-active { + background: rgba(var(--color-sf-warning)); + border-color: transparent; + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + box-shadow: none; + color: rgba(var(--color-sf-warning-text)); + background: rgba(var(--color-sf-warning), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:disabled, .sf-btn.sf-outlined.sf-warning.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-warning:disabled, +.sf-css.sf-btn.sf-outlined.sf-warning.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-danger, +.sf-css.sf-btn.sf-outlined.sf-danger { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-outlined.sf-danger:hover, +.sf-css.sf-btn.sf-outlined.sf-danger:hover { + background: rgba(var(--color-sf-error), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-outlined.sf-danger:focus, +.sf-css.sf-btn.sf-outlined.sf-danger:focus { + background: rgba(var(--color-sf-error), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-outlined.sf-danger:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-outlined.sf-danger:active, .sf-btn.sf-outlined.sf-danger.sf-active, +.sf-css.sf-btn.sf-outlined.sf-danger:active, +.sf-css.sf-btn.sf-outlined.sf-danger.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + box-shadow: none; + color: rgba(var(--color-sf-danger-text)); + background: rgba(var(--color-sf-error), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-outlined.sf-danger:disabled, .sf-btn.sf-outlined.sf-danger.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-danger:disabled, +.sf-css.sf-btn.sf-outlined.sf-danger.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-link, +.sf-css.sf-btn.sf-link { + background: transparent; + border-color: transparent; + border-radius: 0; + box-shadow: none; + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-link:hover, +.sf-css.sf-btn.sf-link:hover { + border-radius: 4px; + text-decoration: underline; +} +.sf-btn.sf-link:focus, +.sf-css.sf-btn.sf-link:focus { + border-radius: 4px; + text-decoration: underline; +} +.sf-btn.sf-link:focus:not(:focus-visible), +.sf-css.sf-btn.sf-link:focus:not(:focus-visible) { + outline: none !important; /* stylelint-disable-line declaration-no-important */ +} +.sf-btn.sf-link:focus-visible, +.sf-css.sf-btn.sf-link:focus-visible { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-link:disabled, +.sf-css.sf-btn.sf-link:disabled { + color: rgba(var(--color-sf-on-surface), 0.38); + background: transparent; + box-shadow: none; + text-decoration: none; +} +.sf-btn.sf-inherit, +.sf-css.sf-btn.sf-inherit { + color: inherit; + background: inherit; + border-color: transparent; + box-shadow: none; +} +.sf-btn.sf-inherit:hover, .sf-btn.sf-inherit:focus, .sf-btn.sf-inherit:active, .sf-btn.sf-inherit.sf-active, +.sf-css.sf-btn.sf-inherit:hover, +.sf-css.sf-btn.sf-inherit:focus, +.sf-css.sf-btn.sf-inherit:active, +.sf-css.sf-btn.sf-inherit.sf-active { + background: rgba(0, 0, 0, 0.056); + border-color: transparent; + box-shadow: none; + color: inherit; + outline: none; +} +.sf-btn.sf-inherit:disabled, +.sf-css.sf-btn.sf-inherit:disabled { + background: inherit; + color: inherit; + border-color: transparent; + box-shadow: none; + opacity: 0.5; +} \ No newline at end of file diff --git a/components/buttons/styles/button/material3.scss b/components/buttons/styles/button/material3.scss new file mode 100644 index 0000000..3130aa3 --- /dev/null +++ b/components/buttons/styles/button/material3.scss @@ -0,0 +1,3 @@ +@import 'react-base/styles/definition/material3.scss'; +@import 'material3-definition.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/check-box/_all.scss b/components/buttons/styles/check-box/_all.scss new file mode 100644 index 0000000..f4d67e8 --- /dev/null +++ b/components/buttons/styles/check-box/_all.scss @@ -0,0 +1 @@ +@import 'layout.scss'; diff --git a/components/buttons/styles/check-box/_layout.scss b/components/buttons/styles/check-box/_layout.scss new file mode 100644 index 0000000..493c058 --- /dev/null +++ b/components/buttons/styles/check-box/_layout.scss @@ -0,0 +1,460 @@ +@mixin ripple-container { + bottom: $cbox-ripple-small-size; + height: $cbox-ripple-small-height; + left: $cbox-ripple-small-size; + right: $cbox-ripple-small-size; + top: $cbox-ripple-small-size; + width: $cbox-ripple-small-width; +} + +@include export-module('checkbox-layout') { + .sf-checkbox-wrapper, + .sf-css.sf-checkbox-wrapper { + cursor: pointer; + display: inline-block; + line-height: 1; + outline: none; + user-select: none; + @if $skin-name == 'fluent2' { + border-radius: 4px; + border: 1px solid transparent; + line-height: 0; + } + @at-root { + & label { + cursor: pointer; + display: inline-block; + line-height: 0; + margin: 0; + position: relative; + white-space: nowrap; + } + + &:hover { + & .sf-ripple-container { + @if $skin-name == 'Material3' { + background: $cbox-ripple-bgcolor; + } + &.sf-ripple-check { + @if $skin-name == 'Material3' { + background: $cbox-checked-ripple-bgcolo; + } + } + } + + & .sf-frame { + background-color: $cbox-hover-bgcolor; + border-color: $cbox-hover-border-color; + + &.sf-check { + background-color: $cbox-checkmark-hover-bgcolor; + border-color: $cbox-checkmark-hover-border-color; + color: $cbox-checkmark-hover-color; + } + + &.sf-stop { + @if $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' { + background-color: $cbox-checkmark-hover-bgcolor; + border-color: $cbox-checkmark-hover-border-color; + } + @else if $skin-name == 'fluent2' { + border-color: $cbox-checkmark-hover-border-color; + } + @else { + color: $cbox-indeterminate-hover-color; + } + @if $skin-name == 'fluent2' { + color: $primary-bg-color-hover; + } + @if $skin-name == 'tailwind3' { + background-color: $cbox-focussed-checkmark-bgcolor; + border-color: $cbox-indeterminate-border-color; + } + } + } + + & .sf-label { + color: $cbox-hover-color; + } + } + + + &:focus, + &.sf-focus { + & .sf-ripple-container { + background-color: $cbox-key-focussed-bgcolor; + + &.sf-ripple-check { + background-color: $cbox-checked-ripple-bgcolo; + } + } + + & .sf-frame, + & .sf-frame.sf-check { + outline: $cbox-focus-outline; + outline-offset: $cbox-focus-outline-offset; + } + + & .sf-frame { + & { + box-shadow: $cbox-focussed-box-shadow; + } + @if $skin-name == 'bootstrap5.3' { + & { + border-color: $border-focus; + } + } + } + @if $skin-name == 'fluent2' { + & { + border-radius: 4px; + box-shadow: $shadow-focus-ring1; + } + } + } + + &:active { + & .sf-frame { + @if $skin-name == 'bootstrap5.3' { + box-shadow: $cbox-focussed-box-shadow; + border-color: $border-focus !important; /* stylelint-disable-line declaration-no-important */ + background-color: $content-bg-color-pressed; + } + @if $skin-name == 'tailwind3' { + box-shadow: $cbox-focussed-box-shadow; + } + } + + & .sf-ripple-element { + background: $cbox-ripple-bgcolor; + } + + & .sf-ripple-check { + & .sf-ripple-element { + background: $cbox-checked-ripple-bgcolo; + } + } + } + + & .sf-ripple-check { + & .sf-ripple-element { + background: $cbox-ripple-bgcolor; + } + } + + & .sf-ripple-container { + border-radius: 50%; + bottom: $cbox-ripple-size; + height: $cbox-ripple-height; + left: $cbox-ripple-size; + pointer-events: none; + position: absolute; + right: $cbox-ripple-size; + top: $cbox-ripple-size; + width: $cbox-ripple-width; + z-index: 1; + + & .sf-ripple-element { + @if $skin-name == 'Material3' { + border-radius: 50%; + } + } + } + + & .sf-ripple-element { + background: $cbox-checked-ripple-bgcolo; + } + + & .sf-label { + color: $cbox-color; + cursor: pointer; + display: inline-block; + font-family: $font-family; + font-size: $cbox-font-size; + font-weight: normal; + line-height: $cbox-height; + user-select: none; + vertical-align: middle; + white-space: normal; + @if $skin-name == 'tailwind3' { + font-weight: $font-weight-medium; + } + } + + & .sf-checkbox { + height: 1px; + opacity: 0; + position: absolute; + width: 1px; + + +.sf-label { + @if $skin-name == 'fluent2' { + margin: 6px 4px 6px 8px; + } + @else { + margin-right: $cbox-margin; + } + } + } + + & .sf-checkbox { + &:focus, + &:active { + +.sf-frame { + background-color: $cbox-focussed-bgcolor; + border-color: $cbox-focussed-border-color; + box-shadow: $cbox-focussed-box-shadow; + + &.sf-check { + background-color: $cbox-focussed-checkmark-bgcolor; + border-color: $cbox-focussed-checkmark-border-color; + box-shadow: $cbox-focussed-box-shadow; + color: $cbox-focussed-checkmark-color; + } + + &.sf-stop { + background-color: $cbox-focussed-checkmark-bgcolor; + border-color: $cbox-focussed-checkmark-border-color; + box-shadow: $cbox-focussed-box-shadow; + color: $cbox-indeterminate-hover-color; + } + } + } + } + + & .sf-frame { + background-color: $cbox-bgcolor; + border-color: $cbox-border-color; + border: $cbox-border; + border-radius: $cbox-border-radius; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + font-family: 'e-icons'; + height: $cbox-height; + padding: $cbox-padding; + text-align: center; + vertical-align: middle; + width: $cbox-width; + @if $skin-name == 'fluent2' { + margin: 7.2px 8px; + } + + +.sf-label { + @if $skin-name == 'fluent2' { + margin: 6px 8px 6px 4px; + } + @else { + margin-left: $cbox-margin; + } + } + + +.sf-ripple-container { + left: auto; + } + + &.sf-check { + background-color: $cbox-checkmark-bgcolor; + border-color: $cbox-checkmark-border-color; + color: $cbox-checkmark-color; + } + + &.sf-stop { + background-color: $cbox-indeterminate-bgcolor; + border-color: $cbox-indeterminate-border-color; + color: $cbox-indeterminate-color; + } + } + + & .sf-check { + font-size: $cbox-check-fontsize; + } + + & .sf-stop { + font-size: $cbox-indeterminate-fontsize; + } + + &.sf-checkbox-disabled { + cursor: default; + pointer-events: none; + @if $skin-name == 'bootstrap5.3' { + opacity: .5; + } + + & .sf-frame { + cursor: default; + background-color: $cbox-disabled-bgcolor; + @if $skin-name == 'Material3' { + border: $cbox-border $cbox-disabled-border-color; + } + @else { + border-color: $cbox-disabled-border-color; + } + color: $cbox-disabled-color; + + &.sf-check { + background-color: $cbox-checkmark-disabled-bgcolor; + @if $skin-name == 'Material3' { + border: none; + border-color: $cbox-checkmark-disabled-border-color; + line-height: 14px; + } + @else { + border-color: $cbox-checkmark-disabled-border-color; + } + color: $cbox-checkmark-disabled-color; + } + + &.sf-stop { + background-color: $cbox-indeterminate-disabled-bgcolor; + @if $skin-name == 'Material3' { + border: none; + border: $cbox-indeterminate-disabled-border-color; + line-height: 14px; + } + @else { + border-color: $cbox-indeterminate-disabled-border-color; + } + color: $cbox-indeterminate-disabled-color; + } + } + + & .sf-label { + color: $cbox-disabled-color; + cursor: default; + } + } + + &.sf-rtl { + .sf-ripple-container { + right: $cbox-ripple-size; + } + + & .sf-frame { + @if $skin-name != 'fluent2' { + margin: 0; + } + + &:hover { + background-color: $cbox-hover-bgcolor; + border-color: $cbox-hover-border-color; + } + + + .sf-ripple-container { + left: $cbox-ripple-size; + right: auto; + } + } + + & .sf-label { + @if $skin-name == 'fluent2' { + margin: 6px 4px 6px 8px; + } + @else { + margin-left: 0; + margin-right: $cbox-margin; + } + + +.sf-frame { + @if $skin-name != 'fluent2' { + margin: 0; + } + } + } + + & .sf-checkbox { + +.sf-label { + @if $skin-name == 'fluent2' { + margin: 6px 4px 6px 8px; + } + @else { + margin-left: $cbox-margin; + margin-right: 0; + } + } + } + } + + &.sf-small { + & .sf-frame { + height: $cbox-small-height; + line-height: $cbox-small-lineheight; + width: $cbox-small-width; + } + + & .sf-check { + font-size: $cbox-small-check-fontsize; + } + + & .sf-stop { + font-size: $cbox-small-indeterminate-fontsize; + line-height: $cbox-small-indeterminate-lineheight; + } + + & .sf-label { + font-size: $cbox-small-font-size; + line-height: $cbox-small-height; + } + + & .sf-ripple-container { + @include ripple-container; + } + } + + &:hover .sf-checkbox:focus + .sf-frame.sf-check { + @if $theme-name == 'fluent2-highcontrast' { + background-color: $primary-border-color-hover !important; /* stylelint-disable-line declaration-no-important */ + border-color: $primary-border-color-hover !important; /* stylelint-disable-line declaration-no-important */ + } + } + } + } + + .sf-css.sf-checkbox-wrapper { + & .sf-ripple-container { + right: $cbox-ripple-size; + top: -4.5px; + } + } + + .sf-checkbox-wrapper[readonly] { + pointer-events: none; + } + + .sf-small .sf-checkbox-wrapper, + .sf-small.sf-checkbox-wrapper, + .sf-small .sf-css.sf-checkbox-wrapper, + .sf-small.sf-css.sf-checkbox-wrapper { + & .sf-frame { + height: $cbox-small-height; + line-height: $cbox-small-lineheight; + width: $cbox-small-width; + @if $skin-name == 'fluent2' { + margin: 6.2px 8px; + } + + &:hover { + background-color: $cbox-hover-bgcolor; + border-color: $cbox-hover-border-color; + } + } + + & .sf-check { + font-size: $cbox-small-check-fontsize; + } + + & .sf-stop { + font-size: $cbox-small-indeterminate-fontsize; + line-height: $cbox-small-indeterminate-lineheight; + } + + & .sf-label { + font-size: $cbox-small-font-size; + line-height: $cbox-small-height; + } + + & .sf-ripple-container { + @include ripple-container; + } + } +} diff --git a/components/buttons/styles/check-box/_material3-dark-definition.scss b/components/buttons/styles/check-box/_material3-dark-definition.scss new file mode 100644 index 0000000..356e259 --- /dev/null +++ b/components/buttons/styles/check-box/_material3-dark-definition.scss @@ -0,0 +1 @@ +@import './material3-definition.scss'; diff --git a/components/buttons/styles/check-box/_material3-definition.scss b/components/buttons/styles/check-box/_material3-definition.scss new file mode 100644 index 0000000..8a7ea46 --- /dev/null +++ b/components/buttons/styles/check-box/_material3-definition.scss @@ -0,0 +1,68 @@ +$cbox-border: 2px solid !default; +$cbox-font-size: 14px !default; +$cbox-height: 16px !default; +$cbox-border-radius: 2px !default; +$cbox-check-fontsize: 10px !default; +$cbox-indeterminate-fontsize: 10px !default; +$cbox-indeterminate-lineheight: 11px !default; +$cbox-lineheight: 11px !default; +$cbox-margin: 8px !default; +$cbox-padding: 0 !default; +$cbox-ripple-size: -9.5px !default; +$cbox-ripple-height: 34px !default; +$cbox-ripple-width: 34px !default; +$cbox-ripple-small-size: -5px !default; +$cbox-ripple-small-height: 24px !default; +$cbox-ripple-small-width: 24px !default; +$cbox-ripple-bigger-size: -11px !default; +$cbox-ripple-bigger-height: 40px !default; +$cbox-ripple-bigger-width: 40px !default; +$cbox-ripple-bigger-small-size: -10px !default; +$cbox-ripple-bigger-small-height: 36px !default; +$cbox-ripple-bigger-small-width: 36px !default; +$cbox-small-check-fontsize: 8px !default; +$cbox-small-font-size: 10px !default; +$cbox-small-height: $text-sm !default; +$cbox-small-indeterminate-fontsize: 8px !default; +$cbox-small-indeterminate-lineheight: 11px !default; +$cbox-small-lineheight: 11px !default; +$cbox-small-width: $text-sm !default; +$cbox-width: 16px !default; +$cbox-focus-outline-offset: 0 !default; +$cbox-focus-outline: rgba($primary, .25) !default; +$cbox-border-color: rgba($content-text-color) !default; +$cbox-bgcolor: $transparent !default; +$cbox-checkmark-bgcolor: rgba($primary) !default; +$cbox-checkmark-border-color: rgba($primary) !default; +$cbox-checkmark-color: rgba($primary-text-color) !default; +$cbox-checked-ripple-bgcolo: rgba($primary, .08) !default; +$cbox-checkmark-disabled-bgcolor: rgba($content-text-color, .38) !default; +$cbox-checkmark-disabled-border-color: rgba($content-text-color, .38) !default; +$cbox-checkmark-disabled-color: rgba($primary-text-color) !default; +$cbox-checkmark-hover-bgcolor: rgba($primary) !default; +$cbox-checkmark-hover-border-color: rgba($primary) !default; +$cbox-checkmark-hover-color: rgba($primary-text-color) !default; +$cbox-color: rgba($content-text-color) !default; +$cbox-disabled-bgcolor: $transparent !default; +$cbox-disabled-border-color: rgba($content-text-color, .38) !default; +$cbox-disabled-color: $content-text-color-disabled !default; +$cbox-focussed-box-shadow: none !default; +$cbox-hover-bgcolor: $transparent !default; +$cbox-hover-border-color: rgba($content-text-color) !default; +$cbox-hover-color: rgba($content-text-color) !default; +$cbox-indeterminate-bgcolor: rgba($primary) !default; +$cbox-indeterminate-border-color: rgba($primary) !default; +$cbox-indeterminate-color: rgba($primary-text-color) !default; +$cbox-indeterminate-content: '\e7d6' !default; +$cbox-indeterminate-disabled-bgcolor: rgba($content-text-color, .38) !default; +$cbox-indeterminate-disabled-border-color: rgba($content-text-color, .38) !default; +$cbox-indeterminate-disabled-color: rgba($primary-text-color) !default; +$cbox-indeterminate-hover-color: rgba($primary-text-color) !default; +$cbox-key-focussed-bgcolor: rgba($content-text-color, .12) !default; +$cbox-ripple-bgcolor: rgba($content-text-color, .08) !default; +$cbox-focussed-bgcolor: $cbox-hover-bgcolor !default; +$cbox-focussed-border-color: $primary-border-color-pressed !default; +$cbox-focussed-checkmark-bgcolor: rgba($primary-bg-color) !default; +$cbox-focussed-checkmark-border-color: rgba($primary-bg-color) !default; +$cbox-focussed-checkmark-color: rgba($primary-text-color) !default; +$cbox-border-style: solid !default; diff --git a/components/buttons/styles/check-box/material3-dark.css b/components/buttons/styles/check-box/material3-dark.css new file mode 100644 index 0000000..42678c4 --- /dev/null +++ b/components/buttons/styles/check-box/material3-dark.css @@ -0,0 +1,339 @@ +.sf-checkbox-wrapper, +.sf-css.sf-checkbox-wrapper { + cursor: pointer; + display: inline-block; + line-height: 1; + outline: none; + user-select: none; +} +.sf-checkbox-wrapper label, +.sf-css.sf-checkbox-wrapper label { + cursor: pointer; + display: inline-block; + line-height: 0; + margin: 0; + position: relative; + white-space: nowrap; +} +.sf-checkbox-wrapper:hover .sf-ripple-container, +.sf-css.sf-checkbox-wrapper:hover .sf-ripple-container { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-checkbox-wrapper:hover .sf-ripple-container.sf-ripple-check, +.sf-css.sf-checkbox-wrapper:hover .sf-ripple-container.sf-ripple-check { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper:hover .sf-frame, +.sf-css.sf-checkbox-wrapper:hover .sf-frame { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-checkbox-wrapper:hover .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper:hover .sf-frame.sf-check { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper:hover .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper:hover .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-checkbox-wrapper:hover .sf-label, +.sf-css.sf-checkbox-wrapper:hover .sf-label { + color: rgba(var(--color-sf-on-surface)); +} +.sf-checkbox-wrapper:focus .sf-ripple-container, .sf-checkbox-wrapper.sf-focus .sf-ripple-container, +.sf-css.sf-checkbox-wrapper:focus .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-checkbox-wrapper:focus .sf-ripple-container.sf-ripple-check, .sf-checkbox-wrapper.sf-focus .sf-ripple-container.sf-ripple-check, +.sf-css.sf-checkbox-wrapper:focus .sf-ripple-container.sf-ripple-check, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-ripple-container.sf-ripple-check { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper:focus .sf-frame, .sf-checkbox-wrapper:focus .sf-frame.sf-check, .sf-checkbox-wrapper.sf-focus .sf-frame, .sf-checkbox-wrapper.sf-focus .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper:focus .sf-frame, +.sf-css.sf-checkbox-wrapper:focus .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-frame.sf-check { + outline: rgba(var(--color-sf-primary), 0.25); + outline-offset: 0; +} +.sf-checkbox-wrapper:focus .sf-frame, .sf-checkbox-wrapper.sf-focus .sf-frame, +.sf-css.sf-checkbox-wrapper:focus .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-frame { + box-shadow: none; +} +.sf-checkbox-wrapper:active .sf-ripple-element, +.sf-css.sf-checkbox-wrapper:active .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-checkbox-wrapper:active .sf-ripple-check .sf-ripple-element, +.sf-css.sf-checkbox-wrapper:active .sf-ripple-check .sf-ripple-element { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper .sf-ripple-check .sf-ripple-element, +.sf-css.sf-checkbox-wrapper .sf-ripple-check .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-checkbox-wrapper .sf-ripple-container, +.sf-css.sf-checkbox-wrapper .sf-ripple-container { + border-radius: 50%; + bottom: -9.5px; + height: 34px; + left: -9.5px; + pointer-events: none; + position: absolute; + right: -9.5px; + top: -9.5px; + width: 34px; + z-index: 1; +} +.sf-checkbox-wrapper .sf-ripple-container .sf-ripple-element, +.sf-css.sf-checkbox-wrapper .sf-ripple-container .sf-ripple-element { + border-radius: 50%; +} +.sf-checkbox-wrapper .sf-ripple-element, +.sf-css.sf-checkbox-wrapper .sf-ripple-element { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper .sf-label, +.sf-css.sf-checkbox-wrapper .sf-label { + color: rgba(var(--color-sf-on-surface)); + cursor: pointer; + display: inline-block; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: normal; + line-height: 16px; + user-select: none; + vertical-align: middle; + white-space: normal; +} +.sf-checkbox-wrapper .sf-checkbox, +.sf-css.sf-checkbox-wrapper .sf-checkbox { + height: 1px; + opacity: 0; + position: absolute; + width: 1px; +} +.sf-checkbox-wrapper .sf-checkbox + .sf-label, +.sf-css.sf-checkbox-wrapper .sf-checkbox + .sf-label { + margin-right: 8px; +} +.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame, .sf-checkbox-wrapper .sf-checkbox:active + .sf-frame, +.sf-css.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame, +.sf-css.sf-checkbox-wrapper .sf-checkbox:active + .sf-frame { + background-color: transparent; + border-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: none; +} +.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-check, .sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-check { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-stop, .sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-frame, +.sf-css.sf-checkbox-wrapper .sf-frame { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); + border: 2px solid; + border-radius: 2px; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + font-family: "e-icons"; + height: 16px; + padding: 0; + text-align: center; + vertical-align: middle; + width: 16px; +} +.sf-checkbox-wrapper .sf-frame + .sf-label, +.sf-css.sf-checkbox-wrapper .sf-frame + .sf-label { + margin-left: 8px; +} +.sf-checkbox-wrapper .sf-frame + .sf-ripple-container, +.sf-css.sf-checkbox-wrapper .sf-frame + .sf-ripple-container { + left: auto; +} +.sf-checkbox-wrapper .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper .sf-frame.sf-check { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-check, +.sf-css.sf-checkbox-wrapper .sf-check { + font-size: 10px; +} +.sf-checkbox-wrapper .sf-stop, +.sf-css.sf-checkbox-wrapper .sf-stop { + font-size: 10px; +} +.sf-checkbox-wrapper.sf-checkbox-disabled, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled { + cursor: default; + pointer-events: none; +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame { + cursor: default; + background-color: transparent; + border: 2px solid rgba(var(--color-sf-on-surface), 0.38); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-check { + background-color: rgba(var(--color-sf-on-surface), 0.38); + border: none; + border-color: rgba(var(--color-sf-on-surface), 0.38); + line-height: 14px; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-on-surface), 0.38); + border: none; + border: rgba(var(--color-sf-on-surface), 0.38); + line-height: 14px; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-label, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-label { + color: rgba(var(--color-sf-on-surface), 0.38); + cursor: default; +} +.sf-checkbox-wrapper.sf-rtl .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-ripple-container { + right: -9.5px; +} +.sf-checkbox-wrapper.sf-rtl .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-frame { + margin: 0; +} +.sf-checkbox-wrapper.sf-rtl .sf-frame:hover, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-frame:hover { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-checkbox-wrapper.sf-rtl .sf-frame + .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-frame + .sf-ripple-container { + left: -9.5px; + right: auto; +} +.sf-checkbox-wrapper.sf-rtl .sf-label, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-label { + margin-left: 0; + margin-right: 8px; +} +.sf-checkbox-wrapper.sf-rtl .sf-label + .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-label + .sf-frame { + margin: 0; +} +.sf-checkbox-wrapper.sf-rtl .sf-checkbox + .sf-label, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-checkbox + .sf-label { + margin-left: 8px; + margin-right: 0; +} +.sf-checkbox-wrapper.sf-small .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-small .sf-frame { + height: 14px; + line-height: 11px; + width: 14px; +} +.sf-checkbox-wrapper.sf-small .sf-check, +.sf-css.sf-checkbox-wrapper.sf-small .sf-check { + font-size: 8px; +} +.sf-checkbox-wrapper.sf-small .sf-stop, +.sf-css.sf-checkbox-wrapper.sf-small .sf-stop { + font-size: 8px; + line-height: 11px; +} +.sf-checkbox-wrapper.sf-small .sf-label, +.sf-css.sf-checkbox-wrapper.sf-small .sf-label { + font-size: 10px; + line-height: 14px; +} +.sf-checkbox-wrapper.sf-small .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-small .sf-ripple-container { + bottom: -5px; + height: 24px; + left: -5px; + right: -5px; + top: -5px; + width: 24px; +} +.sf-css.sf-checkbox-wrapper .sf-ripple-container { + right: -9.5px; + top: -4.5px; +} +.sf-checkbox-wrapper[readonly] { + pointer-events: none; +} +.sf-small .sf-checkbox-wrapper .sf-frame, +.sf-small.sf-checkbox-wrapper .sf-frame, +.sf-small .sf-css.sf-checkbox-wrapper .sf-frame, +.sf-small.sf-css.sf-checkbox-wrapper .sf-frame { + height: 14px; + line-height: 11px; + width: 14px; +} +.sf-small .sf-checkbox-wrapper .sf-frame:hover, +.sf-small.sf-checkbox-wrapper .sf-frame:hover, +.sf-small .sf-css.sf-checkbox-wrapper .sf-frame:hover, +.sf-small.sf-css.sf-checkbox-wrapper .sf-frame:hover { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-small .sf-checkbox-wrapper .sf-check, +.sf-small.sf-checkbox-wrapper .sf-check, +.sf-small .sf-css.sf-checkbox-wrapper .sf-check, +.sf-small.sf-css.sf-checkbox-wrapper .sf-check { + font-size: 8px; +} +.sf-small .sf-checkbox-wrapper .sf-stop, +.sf-small.sf-checkbox-wrapper .sf-stop, +.sf-small .sf-css.sf-checkbox-wrapper .sf-stop, +.sf-small.sf-css.sf-checkbox-wrapper .sf-stop { + font-size: 8px; + line-height: 11px; +} +.sf-small .sf-checkbox-wrapper .sf-label, +.sf-small.sf-checkbox-wrapper .sf-label, +.sf-small .sf-css.sf-checkbox-wrapper .sf-label, +.sf-small.sf-css.sf-checkbox-wrapper .sf-label { + font-size: 10px; + line-height: 14px; +} +.sf-small .sf-checkbox-wrapper .sf-ripple-container, +.sf-small.sf-checkbox-wrapper .sf-ripple-container, +.sf-small .sf-css.sf-checkbox-wrapper .sf-ripple-container, +.sf-small.sf-css.sf-checkbox-wrapper .sf-ripple-container { + bottom: -5px; + height: 24px; + left: -5px; + right: -5px; + top: -5px; + width: 24px; +} \ No newline at end of file diff --git a/components/buttons/styles/check-box/material3-dark.scss b/components/buttons/styles/check-box/material3-dark.scss new file mode 100644 index 0000000..bc1eba0 --- /dev/null +++ b/components/buttons/styles/check-box/material3-dark.scss @@ -0,0 +1,3 @@ +@import 'react-base/styles/definition/material3-dark.scss'; +@import 'material3-dark-definition.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/check-box/material3.css b/components/buttons/styles/check-box/material3.css new file mode 100644 index 0000000..85de1fc --- /dev/null +++ b/components/buttons/styles/check-box/material3.css @@ -0,0 +1,393 @@ +.sf-dark-mode { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 208, 188, 255; + --color-sf-primary-container: 79, 55, 139; + --color-sf-secondary: 204, 194, 220; + --color-sf-secondary-container: 74, 68, 88; + --color-sf-tertiary: 239, 184, 200; + --color-sf-tertiary-container: 99, 59, 72; + --color-sf-surface: 28, 27, 31; + --color-sf-surface-variant: 73, 69, 79; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 55, 30, 115; + --color-sf-on-primary-container: 234, 221, 255; + --color-sf-on-secondary: 51, 45, 65; + --color-sf-on-secondary-container: 232, 222, 248; + --color-sf-on-tertiary: 73, 37, 50; + --color-sf-on-tertiary-containe: 255, 216, 228; + --color-sf-on-surface: 230, 225, 229; + --color-sf-on-surface-variant: 202, 196, 208; + --color-sf-on-background: 230, 225, 229; + --color-sf-outline: 147, 143, 153; + --color-sf-outline-variant: 68, 71, 70; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 208, 188, 255; + --color-sf-inverse-surface: 230, 225, 229; + --color-sf-inverse-on-surface: 49, 48, 51; + --color-sf-inverse-primary: 103, 80, 164; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 242, 184, 181; + --color-sf-error-container: 140, 29, 24; + --color-sf-on-error: 96, 20, 16; + --color-sf-on-error-container: 249, 222, 220; + --color-sf-success: 83, 202, 23; + --color-sf-success-container: 22, 62, 2; + --color-sf-on-success: 13, 39, 0; + --color-sf-on-success-container: 183, 250, 150; + --color-sf-info: 71, 172, 251; + --color-sf-info-container: 0, 67, 120; + --color-sf-on-info: 0, 51, 91; + --color-sf-on-info-container: 173, 219, 255; + --color-sf-warning: 245, 180, 130; + --color-sf-warning-container: 123, 65, 0; + --color-sf-on-warning: 99, 52, 0; + --color-sf-on-warning-container: 255, 220, 193; + --color-sf-spreadsheet-gridline: 231, 224, 236; + --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff; + --color-sf-success-text: 0, 0, 0; + --color-sf-warning-text: 0, 0, 0; + --color-sf-info-text: 0, 0, 0; + --color-sf-danger-text: 0, 0, 0; + --color-sf-diagram-palette-background: var(--color-sf-inverse-surface); + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary); +} +.sf-checkbox-wrapper, +.sf-css.sf-checkbox-wrapper { + cursor: pointer; + display: inline-block; + line-height: 1; + outline: none; + user-select: none; +} +.sf-checkbox-wrapper label, +.sf-css.sf-checkbox-wrapper label { + cursor: pointer; + display: inline-block; + line-height: 0; + margin: 0; + position: relative; + white-space: nowrap; +} +.sf-checkbox-wrapper:hover .sf-ripple-container, +.sf-css.sf-checkbox-wrapper:hover .sf-ripple-container { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-checkbox-wrapper:hover .sf-ripple-container.sf-ripple-check, +.sf-css.sf-checkbox-wrapper:hover .sf-ripple-container.sf-ripple-check { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper:hover .sf-frame, +.sf-css.sf-checkbox-wrapper:hover .sf-frame { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-checkbox-wrapper:hover .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper:hover .sf-frame.sf-check { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper:hover .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper:hover .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-checkbox-wrapper:hover .sf-label, +.sf-css.sf-checkbox-wrapper:hover .sf-label { + color: rgba(var(--color-sf-on-surface)); +} +.sf-checkbox-wrapper:focus .sf-ripple-container, .sf-checkbox-wrapper.sf-focus .sf-ripple-container, +.sf-css.sf-checkbox-wrapper:focus .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-checkbox-wrapper:focus .sf-ripple-container.sf-ripple-check, .sf-checkbox-wrapper.sf-focus .sf-ripple-container.sf-ripple-check, +.sf-css.sf-checkbox-wrapper:focus .sf-ripple-container.sf-ripple-check, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-ripple-container.sf-ripple-check { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper:focus .sf-frame, .sf-checkbox-wrapper:focus .sf-frame.sf-check, .sf-checkbox-wrapper.sf-focus .sf-frame, .sf-checkbox-wrapper.sf-focus .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper:focus .sf-frame, +.sf-css.sf-checkbox-wrapper:focus .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-frame.sf-check { + outline: rgba(var(--color-sf-primary), 0.25); + outline-offset: 0; +} +.sf-checkbox-wrapper:focus .sf-frame, .sf-checkbox-wrapper.sf-focus .sf-frame, +.sf-css.sf-checkbox-wrapper:focus .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-frame { + box-shadow: none; +} +.sf-checkbox-wrapper:active .sf-ripple-element, +.sf-css.sf-checkbox-wrapper:active .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-checkbox-wrapper:active .sf-ripple-check .sf-ripple-element, +.sf-css.sf-checkbox-wrapper:active .sf-ripple-check .sf-ripple-element { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper .sf-ripple-check .sf-ripple-element, +.sf-css.sf-checkbox-wrapper .sf-ripple-check .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-checkbox-wrapper .sf-ripple-container, +.sf-css.sf-checkbox-wrapper .sf-ripple-container { + border-radius: 50%; + bottom: -9.5px; + height: 34px; + left: -9.5px; + pointer-events: none; + position: absolute; + right: -9.5px; + top: -9.5px; + width: 34px; + z-index: 1; +} +.sf-checkbox-wrapper .sf-ripple-container .sf-ripple-element, +.sf-css.sf-checkbox-wrapper .sf-ripple-container .sf-ripple-element { + border-radius: 50%; +} +.sf-checkbox-wrapper .sf-ripple-element, +.sf-css.sf-checkbox-wrapper .sf-ripple-element { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper .sf-label, +.sf-css.sf-checkbox-wrapper .sf-label { + color: rgba(var(--color-sf-on-surface)); + cursor: pointer; + display: inline-block; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: normal; + line-height: 16px; + user-select: none; + vertical-align: middle; + white-space: normal; +} +.sf-checkbox-wrapper .sf-checkbox, +.sf-css.sf-checkbox-wrapper .sf-checkbox { + height: 1px; + opacity: 0; + position: absolute; + width: 1px; +} +.sf-checkbox-wrapper .sf-checkbox + .sf-label, +.sf-css.sf-checkbox-wrapper .sf-checkbox + .sf-label { + margin-right: 8px; +} +.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame, .sf-checkbox-wrapper .sf-checkbox:active + .sf-frame, +.sf-css.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame, +.sf-css.sf-checkbox-wrapper .sf-checkbox:active + .sf-frame { + background-color: transparent; + border-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: none; +} +.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-check, .sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-check { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-stop, .sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-frame, +.sf-css.sf-checkbox-wrapper .sf-frame { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); + border: 2px solid; + border-radius: 2px; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + font-family: "e-icons"; + height: 16px; + padding: 0; + text-align: center; + vertical-align: middle; + width: 16px; +} +.sf-checkbox-wrapper .sf-frame + .sf-label, +.sf-css.sf-checkbox-wrapper .sf-frame + .sf-label { + margin-left: 8px; +} +.sf-checkbox-wrapper .sf-frame + .sf-ripple-container, +.sf-css.sf-checkbox-wrapper .sf-frame + .sf-ripple-container { + left: auto; +} +.sf-checkbox-wrapper .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper .sf-frame.sf-check { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-check, +.sf-css.sf-checkbox-wrapper .sf-check { + font-size: 10px; +} +.sf-checkbox-wrapper .sf-stop, +.sf-css.sf-checkbox-wrapper .sf-stop { + font-size: 10px; +} +.sf-checkbox-wrapper.sf-checkbox-disabled, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled { + cursor: default; + pointer-events: none; +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame { + cursor: default; + background-color: transparent; + border: 2px solid rgba(var(--color-sf-on-surface), 0.38); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-check { + background-color: rgba(var(--color-sf-on-surface), 0.38); + border: none; + border-color: rgba(var(--color-sf-on-surface), 0.38); + line-height: 14px; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-on-surface), 0.38); + border: none; + border: rgba(var(--color-sf-on-surface), 0.38); + line-height: 14px; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-label, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-label { + color: rgba(var(--color-sf-on-surface), 0.38); + cursor: default; +} +.sf-checkbox-wrapper.sf-rtl .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-ripple-container { + right: -9.5px; +} +.sf-checkbox-wrapper.sf-rtl .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-frame { + margin: 0; +} +.sf-checkbox-wrapper.sf-rtl .sf-frame:hover, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-frame:hover { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-checkbox-wrapper.sf-rtl .sf-frame + .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-frame + .sf-ripple-container { + left: -9.5px; + right: auto; +} +.sf-checkbox-wrapper.sf-rtl .sf-label, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-label { + margin-left: 0; + margin-right: 8px; +} +.sf-checkbox-wrapper.sf-rtl .sf-label + .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-label + .sf-frame { + margin: 0; +} +.sf-checkbox-wrapper.sf-rtl .sf-checkbox + .sf-label, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-checkbox + .sf-label { + margin-left: 8px; + margin-right: 0; +} +.sf-checkbox-wrapper.sf-small .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-small .sf-frame { + height: 14px; + line-height: 11px; + width: 14px; +} +.sf-checkbox-wrapper.sf-small .sf-check, +.sf-css.sf-checkbox-wrapper.sf-small .sf-check { + font-size: 8px; +} +.sf-checkbox-wrapper.sf-small .sf-stop, +.sf-css.sf-checkbox-wrapper.sf-small .sf-stop { + font-size: 8px; + line-height: 11px; +} +.sf-checkbox-wrapper.sf-small .sf-label, +.sf-css.sf-checkbox-wrapper.sf-small .sf-label { + font-size: 10px; + line-height: 14px; +} +.sf-checkbox-wrapper.sf-small .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-small .sf-ripple-container { + bottom: -5px; + height: 24px; + left: -5px; + right: -5px; + top: -5px; + width: 24px; +} +.sf-css.sf-checkbox-wrapper .sf-ripple-container { + right: -9.5px; + top: -4.5px; +} +.sf-checkbox-wrapper[readonly] { + pointer-events: none; +} +.sf-small .sf-checkbox-wrapper .sf-frame, +.sf-small.sf-checkbox-wrapper .sf-frame, +.sf-small .sf-css.sf-checkbox-wrapper .sf-frame, +.sf-small.sf-css.sf-checkbox-wrapper .sf-frame { + height: 14px; + line-height: 11px; + width: 14px; +} +.sf-small .sf-checkbox-wrapper .sf-frame:hover, +.sf-small.sf-checkbox-wrapper .sf-frame:hover, +.sf-small .sf-css.sf-checkbox-wrapper .sf-frame:hover, +.sf-small.sf-css.sf-checkbox-wrapper .sf-frame:hover { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-small .sf-checkbox-wrapper .sf-check, +.sf-small.sf-checkbox-wrapper .sf-check, +.sf-small .sf-css.sf-checkbox-wrapper .sf-check, +.sf-small.sf-css.sf-checkbox-wrapper .sf-check { + font-size: 8px; +} +.sf-small .sf-checkbox-wrapper .sf-stop, +.sf-small.sf-checkbox-wrapper .sf-stop, +.sf-small .sf-css.sf-checkbox-wrapper .sf-stop, +.sf-small.sf-css.sf-checkbox-wrapper .sf-stop { + font-size: 8px; + line-height: 11px; +} +.sf-small .sf-checkbox-wrapper .sf-label, +.sf-small.sf-checkbox-wrapper .sf-label, +.sf-small .sf-css.sf-checkbox-wrapper .sf-label, +.sf-small.sf-css.sf-checkbox-wrapper .sf-label { + font-size: 10px; + line-height: 14px; +} +.sf-small .sf-checkbox-wrapper .sf-ripple-container, +.sf-small.sf-checkbox-wrapper .sf-ripple-container, +.sf-small .sf-css.sf-checkbox-wrapper .sf-ripple-container, +.sf-small.sf-css.sf-checkbox-wrapper .sf-ripple-container { + bottom: -5px; + height: 24px; + left: -5px; + right: -5px; + top: -5px; + width: 24px; +} \ No newline at end of file diff --git a/components/buttons/styles/check-box/material3.scss b/components/buttons/styles/check-box/material3.scss new file mode 100644 index 0000000..3130aa3 --- /dev/null +++ b/components/buttons/styles/check-box/material3.scss @@ -0,0 +1,3 @@ +@import 'react-base/styles/definition/material3.scss'; +@import 'material3-definition.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/chips/_all.scss b/components/buttons/styles/chips/_all.scss new file mode 100644 index 0000000..a0fe77d --- /dev/null +++ b/components/buttons/styles/chips/_all.scss @@ -0,0 +1,2 @@ +@import 'layout.scss'; +@import 'theme.scss'; diff --git a/components/buttons/styles/chips/_layout.scss b/components/buttons/styles/chips/_layout.scss new file mode 100644 index 0000000..1b2e4b6 --- /dev/null +++ b/components/buttons/styles/chips/_layout.scss @@ -0,0 +1,189 @@ +@mixin align-chip($border-radius, $font-size, $margin, $line-height) { + border-radius: $border-radius; + font-size: $font-size; + margin: $margin; + align-items: center; + justify-content: center; + line-height: $line-height; +} + +@mixin icon-style($height, $width) { + background-size: cover; + display: flex; + overflow: hidden; + height: $height; + width: $width; +} + +@include export-module('chip-layout') { + .sf-chip-list { + display: flex; + padding: $chip-list-padding; + + &.sf-chip, + .sf-chip { + -webkit-tap-highlight-color: transparent; + border: $chip-border-size solid; + @include align-chip($chip-border-radius, $chip-font-size, $chip-margin, $chip-line-height); + box-shadow: $chip-box-shadow; + box-sizing: border-box; + cursor: pointer; + display: inline-flex; + font-weight: $chip-font-weight; + height: $chip-height; + outline: none; + overflow: hidden; + padding: $chip-padding; + position: relative; + transition: box-shadow 300ms cubic-bezier(.4, 0, .2, 1); + user-select: none; + + .sf-chip-avatar { + @include icon-style($chip-avatar-size, $chip-avatar-size); + @include align-chip($chip-avatar-border-radius, $chip-avatar-content-font-size, $chip-avatar-margin, $chip-icon-line-height); + } + + .sf-chip-avatar-wrap, + &.sf-chip-avatar-wrap { + border-radius: $chip-avatar-wrapper-border-radius; + } + + .sf-chip-icon { + @include icon-style($chip-leading-icon-size, $chip-leading-icon-size); + @include align-chip($chip-leading-icon-border-radius, $chip-leading-icon-font-size, $chip-leading-icon-margin, $chip-icon-line-height); + } + + .sf-chip-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .sf-chip-delete { + @include icon-style($chip-delete-icon-size, $chip-delete-icon-width); + @include align-chip($chip-delete-icon-border-radius, $chip-delete-icon-font-size, $chip-delete-icon-margin, $chip-icon-line-height); + } + + .sf-image-url { + @include icon-style($chip-leading-icon-size, $chip-leading-icon-size); + @include align-chip($chip-leading-icon-border-radius, $chip-leading-icon-font-size, $chip-leading-icon-margin, $chip-icon-line-height); + + .sf-leading-image { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .sf-trailing-icon-url { + @include icon-style($chip-delete-icon-size, $chip-delete-icon-size); + @include align-chip($chip-delete-icon-border-radius, $chip-delete-icon-font-size, $chip-delete-icon-margin, $chip-icon-line-height); + + .sf-trailing-image { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .sf-chip-template { + display: inline-flex; + } + } + + &:not(.sf-chip) { + flex-wrap: wrap; + } + + &.sf-multi-selection .sf-chip { + & .sf-selectable-icon { + align-items: center; + justify-content: center; + line-height: 1; + display: flex; + height: $chip-leading-icon-size; + width: $chip-leading-icon-size; + margin: $chip-multi-selection-icon-margin; + overflow: hidden; + transition: width 300ms cubic-bezier(.4, 0, .2, 1); + } + + &:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) { + & .sf-selectable-icon { + width: 0; + } + } + + &.sf-chip-icon-wrap, + &.sf-chip-avatar-wrap { + & .sf-selectable-icon { + display: none; + } + } + + &.sf-chip-avatar-wrap { + & .sf-selectable-icon { + height: $chip-avatar-size; + width: $chip-avatar-size; + margin: $chip-avatar-margin; + margin-top: $chip-multi-selection-icon-margin-top; + } + } + + &.sf-active { + & .sf-chip-icon, + & .sf-chip-avatar { + display: none; + } + + &.sf-chip-icon-wrap, + &.sf-chip-avatar-wrap { + & .sf-selectable-icon { + display: flex; + } + } + + &:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) { + & .sf-selectable-icon { + width: $chip-leading-icon-size; + } + } + } + } + + &.sf-rtl { + &.sf-chip, + & .sf-chip { + .sf-chip-avatar { + margin: $chip-rtl-avatar-margin; + } + + .sf-chip-icon { + margin: $chip-rtl-leading-icon-margin; + } + + .sf-chip-delete { + margin: $chip-rtl-delete-icon-margin; + } + + .sf-trailing-icon-url { + margin: $chip-rtl-delete-icon-margin; + } + } + + &.sf-multi-selection .sf-chip { + & .sf-selectable-icon { + margin: $chip-rtl-leading-icon-margin; + margin-top: $chip-multi-selection-icon-margin-top; + } + + &.sf-chip-avatar-wrap { + & .sf-selectable-icon { + margin: $chip-rtl-avatar-margin; + margin-top: $chip-multi-selection-icon-margin-top; + } + } + } + } + } +} diff --git a/components/buttons/styles/chips/_material3-dark-definition.scss b/components/buttons/styles/chips/_material3-dark-definition.scss new file mode 100644 index 0000000..356e259 --- /dev/null +++ b/components/buttons/styles/chips/_material3-dark-definition.scss @@ -0,0 +1 @@ +@import './material3-definition.scss'; diff --git a/components/buttons/styles/chips/_material3-definition.scss b/components/buttons/styles/chips/_material3-definition.scss new file mode 100644 index 0000000..df53974 --- /dev/null +++ b/components/buttons/styles/chips/_material3-definition.scss @@ -0,0 +1,564 @@ +$chip-list-padding: 0 !default; +$chip-height: 24px !default; +$chip-border-radius: 12px !default; +$chip-box-shadow: none !default; +$chip-padding: 0 8px !default; +$chip-margin: 4px !default; +$chip-border-size: 1px !default; + +$chip-font-size: 11px !default; +$chip-line-height: 14px !default; +$chip-font-weight: 500 !default; + +$chip-avatar-wrapper-border-radius: 12px !default; +$chip-avatar-border-radius: 12px !default; +$chip-avatar-size: 20px !default; +$chip-avatar-margin: 0 4px 0 -6px !default; +$chip-avatar-content-font-size: $text-xs !default; +$chip-rtl-avatar-wrapper-border-radius: 12px !default; +$chip-rtl-avatar-margin: 0 -6px 0 4px !default; + +$chip-leading-icon-border-radius: 50% !default; +$chip-delete-icon-border-radius: 50% !default; +$chip-leading-icon-font-size: 14px !default; +$chip-leading-icon-size: 20px !default; +$chip-leading-icon-margin: 0 4px 0 -6px !default; +$chip-rtl-leading-icon-margin: 0 -6px 0 4px !default; +$chip-multi-selection-icon-margin: 0 4px 0 -6px !default; +$chip-multi-selection-icon-margin-top: 0 !default; +$chip-delete-icon-font-size: 14px !default; +$chip-delete-icon-size: 18px !default; +$chip-delete-icon-margin: 0 -2px 0 8px !default; +$chip-rtl-delete-icon-margin: 0 8px 0 -2px !default; +$chip-delete-icon-width: $chip-delete-icon-font-size !default; +$chip-icon-line-height: 1 !default; + +$chip-default-bg-color: $secondary-border-color !default; +$chip-hover-bg-color: $content-bg-color-hover !default; +$chip-focus-bg-color: $content-bg-color-pressed !default; +$chip-active-bg-color: $content-bg-color-pressed !default; +$chip-focus-active-bg-color: $secondary-border-color-pressed !default; +$chip-pressed-bg-color: $content-bg-color-pressed !default; +$chip-disabled-bg-color: $secondary-border-color-disabled !default; +$chip-choice-active-bg-color: rgba($primary) !default; +$chip-choice-focus-active-bg-color: rgba($primary) !default; +$chip-pressed-active-bg-color: $primary-bg-color-pressed!default; + +$chip-avatar-bg-color: rgba($primary-light) !default; +$chip-avatar-hover-bg-color: $secondary-bg-color !default; +$chip-avatar-focus-bg-color: $secondary-bg-color !default; +$chip-avatar-active-bg-color: $secondary-bg-color !default; +$chip-avatar-focus-active-bg-color: $content-bg-color-alt4 !default; +$chip-avatar-pressed-bg-color: $secondary-bg-color !default; +$chip-avatar-pressed-active-bg-color: $secondary-bg-color !default; +$chip-avatar-disabled-bg-color: $chip-disabled-bg-color !default; +$chip-avatar-choice-active-bg-color: rgba($primary) !default; +$chip-avatar-choice-focus-active-bg-color: $chip-choice-focus-active-bg-color !default; + +$chip-default-font-color: rgba($content-text-color-alt1) !default; +$chip-hover-font-color: rgba($content-text-color-alt1) !default; +$chip-focus-font-color: rgba($secondary-text-color) !default; +$chip-active-font-color: rgba($secondary-text-color-pressed) !default; +$chip-focus-active-font-color: rgba($secondary-text-color-hover) !default; +$chip-pressed-font-color: rgba($secondary-text-color-pressed) !default; +$chip-selection-pressed-font-color: rgba($primary-text) !default; +$chip-disabled-font-color: $secondary-text-color-disabled !default; +$chip-choice-active-font-color: rgba($primary-text) !default; + +$chip-close-icon-font-color: rgba($secondary-text-color) !default; +$chip-close-icon-hover-font-color: rgba($secondary-text-color-hover) !default; +$chip-close-icon-pressed-font-color: rgba($secondary-text-color-pressed) !default; +$chip-icon-font-color: rgba($secondary-text-color) !default; +$chip-icon-hover-font-color: rgba($secondary-text-color-hover) !default; +$chip-icon-focus-font-color: rgba($secondary-text-color-hover) !default; +$chip-icon-active-font-color: rgba($icon-color) !default; +$chip-icon-focus-active-font-color: rgba($secondary-text-color-pressed) !default; +$chip-icon-pressed-font-color: rgba($secondary-text-color-pressed) !default; +$chip-icon-selection-pressed-font-color: rgba($primary-text-color) !default; +$chip-choice-icon-focus-active-font-color: rgba($primary-text-color) !default; + +$chip-avatar-font-color: rgba($secondary-text-color) !default; +$chip-avatar-hover-font-color: rgba($secondary-text-color) !default; +$chip-avatar-focus-font-color: rgba($secondary-text-color) !default; +$chip-avatar-active-font-color: rgba($secondary-text-color) !default; +$chip-avatar-focus-active-font-color: $chip-icon-focus-active-font-color !default; +$chip-avatar-pressed-font-color: rgba($secondary-text-color) !default; +$chip-avatar-pressed-active-font-color: rgba($secondary-text-color) !default; +$chip-avatar-disabled-font-color: $chip-disabled-font-color !default; +$chip-avatar-choice-active-font-color: rgba($primary-text-color) !default; +$chip-avatar-choice-focus-active-font-color: $chip-choice-icon-focus-active-font-color !default; + +$chip-default-border-color: rgba($border) !default; +$chip-hover-border-color: rgba($border) !default; +$chip-focus-border-color: rgba($border) !default; +$chip-active-border-color: rgba($border) !default; +$chip-focus-active-border-color: $secondary-border-color-pressed !default; +$chip-pressed-border-color: rgba($border) !default; +$chip-disabled-border-color: $secondary-border-color-disabled !default; +$chip-choice-active-border-color: $chip-choice-active-bg-color !default; +$chip-choice-focus-active-border-color: rgba($primary) !default; +$chip-choice-focus-active-font-color: rgba($primary-text-color) !default; +$chip-focussed-box-shadow: none !default; +$chip-focussed-active-box-shadow: none !default; +$chip-pressed-box-shadow: none !default; + +$chip-outline-bg-color: transparent !default; +$chip-outline-hover-bg-color: $content-bg-color-hover !default; +$chip-outline-focus-bg-color: $secondary-bg-color !default; +$chip-outline-active-bg-color: $secondary-border-color-pressed !default; +$chip-outline-focus-active-bg-color: $chip-outline-active-bg-color !default; +$chip-outline-pressed-bg-color: $content-bg-color-pressed !default; +$chip-outline-pressed-active-bg-color: $content-bg-color-pressed !default; +$chip-outline-disabled-bg-color: transparent !default; +$chip-outline-choice-active-bg-color: rgba($primary) !default; +$chip-outline-choice-focus-active-bg-color: rgba($primary) !default; + +$chip-outline-avatar-bg-color: $secondary-bg-color !default; +$chip-outline-avatar-hover-bg-color: $secondary-bg-color !default; +$chip-outline-avatar-focus-bg-color: $secondary-bg-color !default; +$chip-outline-avatar-active-bg-color: $secondary-bg-color !default; +$chip-outline-avatar-focus-active-bg-color: $secondary-bg-color !default; +$chip-outline-avatar-pressed-bg-color: $secondary-bg-color !default; +$chip-outline-avatar-pressed-active-bg-color: $secondary-bg-color !default; +$chip-outline-avatar-disabled-bg-color: $chip-outline-disabled-bg-color !default; +$chip-outline-avatar-choice-active-bg-color: rgba($primary) !default; +$chip-outline-avatar-choice-focus-active-bg-color: rgba($primary) !default; + +$chip-outline-font-color: rgba($content-text-color-alt1) !default; +$chip-outline-hover-font-color: rgba($secondary-text-color-hover) !default; +$chip-outline-focus-font-color: rgba($secondary-text-color) !default; +$chip-outline-active-font-color: rgba($secondary-text-color-pressed) !default; +$chip-outline-focus-active-font-color: $chip-outline-active-font-color !default; +$chip-outline-pressed-font-color: rgba($content-text-color-alt1) !default; +$chip-outline-disabled-font-color: $content-text-color-disabled !default; +$chip-outline-choice-active-font-color: rgba($primary-text-color) !default; +$chip-outline-choice-focus-active-font-color: $chip-outline-choice-active-font-color !default; + +$chip-outline-close-icon-font-color: $secondary-bg-color !default; +$chip-outline-close-icon-hover-font-color: rgba($secondary-text-color-hover) !default; +$chip-outline-close-icon-pressed-font-color: rgba($secondary-text-color-pressed) !default; +$chip-outline-icon-font-color: $icon-color !default; +$chip-outline-icon-hover-font-color: rgba($secondary-text-color-hover) !default; +$chip-outline-icon-focus-font-color: rgba($secondary-text-color-pressed) !default; +$chip-outline-icon-active-font-color: rgba($secondary-text-color-pressed) !default; +$chip-outline-icon-focus-active-font-color: rgba($secondary-text-color-pressed) !default; +$chip-outline-icon-pressed-font-color: rgba($secondary-text-color-pressed) !default; +$chip-outline-choice-icon-focus-active-font-color: rgba($primary-text-color) !default; + +$chip-outline-avatar-font-color: rgba($secondary-text-color) !default; +$chip-outline-avatar-hover-font-color: rgba($secondary-text-color) !default; +$chip-outline-avatar-focus-font-color: rgba($secondary-text-color) !default; +$chip-outline-avatar-active-font-color: rgba($secondary-text-color) !default; +$chip-outline-avatar-focus-active-font-color: rgba($secondary-text-color) !default; +$chip-outline-avatar-pressed-font-color: rgba($secondary-text-color) !default; +$chip-outline-avatar-pressed-active-font-color: rgba($secondary-text-color) !default; +$chip-outline-avatar-disabled-font-color: $content-text-color-disabled !default; +$chip-outline-avatar-choice-active-font-color: $chip-outline-choice-active-font-color !default; +$chip-outline-avatar-choice-focus-active-font-color: $chip-outline-choice-icon-focus-active-font-color !default; + +$chip-outline-border-color: rgba($border) !default; +$chip-outline-hover-border-color: rgba($border) !default; +$chip-outline-focus-border-color: rgba($border) !default; +$chip-outline-active-border-color: $secondary-border-color-pressed !default; +$chip-outline-focus-active-border-color: $secondary-border-color-pressed !default; +$chip-outline-pressed-border-color: rgba($border) !default; +$chip-outline-disabled-border-color: $content-bg-color-alt3 !default; +$chip-outline-choice-active-border-color: rgba($primary) !default; +$chip-outline-choice-focus-active-border-color: rgba($primary) !default; +$chip-outline-active-border-width: 1px !default; +$chip-outline-focus-active-box-shadow: $chip-focussed-active-box-shadow !default; + +$chip-primary-bg-color: rgba($primary) !default; +$chip-primary-hover-bg-color: $primary-bg-color-hover !default; +$chip-primary-focus-bg-color: $primary-bg-color-hover !default; +$chip-primary-active-bg-color: $primary-bg-color-pressed !default; +$chip-primary-focus-active-bg-color: $chip-primary-active-bg-color !default; +$chip-primary-pressed-bg-color: $primary-bg-color-pressed !default; +$chip-primary-disabled-bg-color: $primary-bg-color-disabled !default; +$chip-primary-avatar-bg-color: $chip-primary-bg-color !default; +$chip-primary-avatar-hover-bg-color: $chip-primary-hover-bg-color !default; +$chip-primary-avatar-focus-bg-color: $chip-primary-focus-bg-color !default; +$chip-primary-avatar-active-bg-color: $chip-primary-active-bg-color !default; +$chip-primary-avatar-focus-active-bg-color: $chip-primary-focus-active-bg-color !default; +$chip-primary-avatar-pressed-bg-color: $chip-primary-pressed-bg-color !default; +$chip-primary-avatar-disabled-bg-color: $chip-primary-disabled-bg-color !default; +$chip-primary-font-color: rgba($primary-text-color) !default; +$chip-primary-hover-font-color: rgba($primary-text-color) !default; +$chip-primary-focus-font-color: rgba($primary-text-color) !default; +$chip-primary-active-font-color: rgba($primary-text-color) !default; +$chip-primary-focus-active-font-color: rgba($primary-text-color) !default; +$chip-primary-pressed-font-color: rgba($primary-text-color) !default; +$chip-primary-disabled-font-color: $primary-text-disabled !default; +$chip-primary-close-icon-font-color: rgba($primary-text-color) !default; +$chip-primary-close-icon-hover-font-color: rgba($primary-text-color) !default; +$chip-primary-close-icon-pressed-font-color: rgba($primary-text-color) !default; +$chip-primary-avatar-font-color: $chip-primary-font-color !default; +$chip-primary-avatar-hover-font-color: $chip-primary-hover-font-color !default; +$chip-primary-avatar-focus-font-color: $chip-primary-focus-font-color !default; +$chip-primary-avatar-active-font-color: $chip-primary-active-font-color !default; +$chip-primary-avatar-focus-active-font-color: $chip-primary-focus-active-font-color !default; +$chip-primary-avatar-pressed-font-color: $chip-primary-pressed-font-color !default; +$chip-primary-avatar-disabled-font-color: $chip-primary-disabled-font-color !default; +$chip-primary-border-color: rgba($primary) !default; +$chip-primary-hover-border-color: $primary-border-color-hover !default; +$chip-primary-focus-border-color: $primary-border-color-hover !default; +$chip-primary-active-border-color: $primary-border-color-pressed !default; +$chip-primary-focus-active-border-color: $primary-border-color-pressed !default; +$chip-primary-pressed-border-color: $primary-border-color-pressed !default; +$chip-primary-disabled-border-color: $primary-border-color-disabled !default; +$chip-primary-focus-active-box-shadow: none !default; + +$chip-success-bg-color: rgba($success-bg-color) !default; +$chip-success-hover-bg-color: $success-bg-color-hover !default; +$chip-success-focus-bg-color: $success-bg-color-hover !default; +$chip-success-active-bg-color: $success-bg-color-pressed !default; +$chip-success-focus-active-bg-color: $success-bg-color-pressed !default; +$chip-success-pressed-bg-color: $success-bg-color-pressed !default; +$chip-success-disabled-bg-color: $success-bg-color-disabled !default; +$chip-success-avatar-bg-color: $chip-success-bg-color !default; +$chip-success-avatar-hover-bg-color: $chip-success-hover-bg-color !default; +$chip-success-avatar-focus-bg-color: $chip-success-focus-bg-color !default; +$chip-success-avatar-active-bg-color: $chip-success-active-bg-color !default; +$chip-success-avatar-focus-active-bg-color: $chip-success-focus-active-bg-color !default; +$chip-success-avatar-pressed-bg-color: $chip-success-pressed-bg-color !default; +$chip-success-avatar-disabled-bg-color: $chip-success-disabled-bg-color !default; +$chip-success-font-color: rgba($success-text) !default; +$chip-success-hover-font-color: rgba($success-text-hover) !default; +$chip-success-focus-font-color: rgba($success-text-hover) !default; +$chip-success-active-font-color: rgba($success-text-pressed) !default; +$chip-success-focus-active-font-color: rgba($success-text-pressed) !default; +$chip-success-pressed-font-color: rgba($success-text-pressed) !default; +$chip-success-disabled-font-color: $success-text-disabled !default; +$chip-success-close-icon-font-color: rgba($success-text) !default; +$chip-success-close-icon-hover-font-color: $chip-success-hover-font-color !default; +$chip-success-close-icon-pressed-font-color: $chip-success-pressed-font-color !default; +$chip-success-avatar-font-color: $chip-success-font-color !default; +$chip-success-avatar-hover-font-color: $chip-success-hover-font-color !default; +$chip-success-avatar-focus-font-color: $chip-success-focus-font-color !default; +$chip-success-avatar-active-font-color: $chip-success-active-font-color !default; +$chip-success-avatar-focus-active-font-color: $chip-success-focus-active-font-color !default; +$chip-success-avatar-pressed-font-color: $chip-success-pressed-font-color !default; +$chip-success-avatar-disabled-font-color: $chip-success-disabled-font-color !default; +$chip-success-border-color: rgba($success-bg-color) !default; +$chip-success-hover-border-color: $success-border-color-hover !default; +$chip-success-focus-border-color: $success-border-color-pressed !default; +$chip-success-active-border-color: $success-border-color-pressed !default; +$chip-success-focus-active-border-color: $success-border-color-pressed !default; +$chip-success-pressed-border-color: $success-border-color-pressed !default; +$chip-success-disabled-border-color: $success-border-color-disabled !default; +$chip-success-focus-active-box-shadow: none !default; + +$chip-info-bg-color: rgba($info-bg-color) !default; +$chip-info-hover-bg-color: $info-bg-color-hover !default; +$chip-info-focus-bg-color: $info-bg-color-hover !default; +$chip-info-active-bg-color: $info-bg-color-pressed !default; +$chip-info-focus-active-bg-color: $info-bg-color-pressed !default; +$chip-info-pressed-bg-color: $info-bg-color-pressed !default; +$chip-info-disabled-bg-color: $info-bg-color-disabled !default; +$chip-info-avatar-bg-color: $chip-info-bg-color !default; +$chip-info-avatar-hover-bg-color: $chip-info-hover-bg-color !default; +$chip-info-avatar-focus-bg-color: $chip-info-focus-bg-color !default; +$chip-info-avatar-active-bg-color: $chip-info-active-bg-color !default; +$chip-info-avatar-focus-active-bg-color: $chip-info-focus-active-bg-color !default; +$chip-info-avatar-pressed-bg-color: $chip-info-pressed-bg-color !default; +$chip-info-avatar-disabled-bg-color: $chip-info-disabled-bg-color !default; +$chip-info-font-color: rgba($info-text) !default; +$chip-info-hover-font-color: rgba($info-text) !default; +$chip-info-focus-font-color: rgba($info-text) !default; +$chip-info-active-font-color: rgba($info-text-pressed) !default; +$chip-info-focus-active-font-color: rgba($info-text-pressed) !default; +$chip-info-pressed-font-color: rgba($info-text-pressed) !default; +$chip-info-disabled-font-color: $info-text-disabled !default; +$chip-info-close-icon-font-color: rgba($info-text) !default; +$chip-info-close-icon-hover-font-color: $chip-info-hover-font-color !default; +$chip-info-close-icon-pressed-font-color: $chip-info-pressed-font-color !default; +$chip-info-avatar-font-color: $chip-info-font-color !default; +$chip-info-avatar-hover-font-color: $chip-info-hover-font-color !default; +$chip-info-avatar-focus-font-color: $chip-info-focus-font-color !default; +$chip-info-avatar-active-font-color: $chip-info-active-font-color !default; +$chip-info-avatar-focus-active-font-color: $chip-info-focus-active-font-color !default; +$chip-info-avatar-pressed-font-color: $chip-info-pressed-font-color !default; +$chip-info-avatar-disabled-font-color: $chip-info-disabled-font-color !default; +$chip-info-border-color: rgba($info-bg-color) !default; +$chip-info-hover-border-color: $info-border-color-hover !default; +$chip-info-focus-border-color: $info-border-color-hover !default; +$chip-info-active-border-color: $info-border-color-pressed !default; +$chip-info-focus-active-border-color: $info-border-color-pressed !default; +$chip-info-pressed-border-color: $info-border-color-pressed !default; +$chip-info-disabled-border-color: $info-border-color-disabled !default; +$chip-info-focus-active-box-shadow: none !default; + +$chip-warning-bg-color: rgba($warning-bg-color) !default; +$chip-warning-hover-bg-color: $warning-bg-color-hover !default; +$chip-warning-focus-bg-color: $warning-bg-color-hover !default; +$chip-warning-active-bg-color: $warning-bg-color-pressed !default; +$chip-warning-focus-active-bg-color: $warning-bg-color-pressed !default; +$chip-warning-pressed-bg-color: $warning-bg-color-pressed !default; +$chip-warning-disabled-bg-color: $warning-bg-color-disabled !default; +$chip-warning-avatar-bg-color: $chip-warning-bg-color !default; +$chip-warning-avatar-hover-bg-color: $chip-warning-hover-bg-color !default; +$chip-warning-avatar-focus-bg-color: $chip-warning-focus-bg-color !default; +$chip-warning-avatar-active-bg-color: $chip-warning-active-bg-color !default; +$chip-warning-avatar-focus-active-bg-color: $chip-warning-focus-active-bg-color !default; +$chip-warning-avatar-pressed-bg-color: $chip-warning-pressed-bg-color !default; +$chip-warning-avatar-disabled-bg-color: $chip-warning-disabled-bg-color !default; +$chip-warning-font-color: rgba($warning-text) !default; +$chip-warning-hover-font-color: rgba($warning-text) !default; +$chip-warning-focus-font-color: rgba($warning-text) !default; +$chip-warning-active-font-color: rgba($warning-text-pressed) !default; +$chip-warning-focus-active-font-color: rgba($warning-text-pressed) !default; +$chip-warning-pressed-font-color: rgba($warning-text-pressed) !default; +$chip-warning-disabled-font-color: $warning-text-disabled !default; +$chip-warning-close-icon-font-color: rgba($warning-text) !default; +$chip-warning-close-icon-hover-font-color: $chip-warning-hover-font-color !default; +$chip-warning-close-icon-pressed-font-color: $chip-warning-pressed-font-color !default; +$chip-warning-avatar-font-color: $chip-warning-font-color !default; +$chip-warning-avatar-hover-font-color: $chip-warning-hover-font-color !default; +$chip-warning-avatar-focus-font-color: $chip-warning-focus-font-color !default; +$chip-warning-avatar-active-font-color: $chip-warning-active-font-color !default; +$chip-warning-avatar-focus-active-font-color: $chip-warning-focus-active-font-color !default; +$chip-warning-avatar-pressed-font-color: $chip-warning-pressed-font-color !default; +$chip-warning-avatar-disabled-font-color: $chip-warning-disabled-font-color !default; +$chip-warning-border-color: rgba($warning-bg-color) !default; +$chip-warning-hover-border-color: $warning-border-color-hover !default; +$chip-warning-focus-border-color: $warning-border-color-hover !default; +$chip-warning-active-border-color: $warning-border-color-pressed !default; +$chip-warning-focus-active-border-color: $warning-border-color-pressed !default; +$chip-warning-pressed-border-color: $warning-border-color-pressed !default; +$chip-warning-disabled-border-color: $warning-border-color-disabled !default; +$chip-warning-focus-active-box-shadow: none !default; + +$chip-danger-bg-color: rgba($danger-bg-color) !default; +$chip-danger-hover-bg-color: $danger-bg-color-hover !default; +$chip-danger-focus-bg-color: $danger-bg-color-hover !default; +$chip-danger-active-bg-color: $danger-bg-color-pressed !default; +$chip-danger-focus-active-bg-color: $danger-bg-color-pressed !default; +$chip-danger-pressed-bg-color: $danger-bg-color-pressed !default; +$chip-danger-disabled-bg-color: $danger-border-color-disabled !default; +$chip-danger-avatar-bg-color: rgba($danger-bg-color) !default; +$chip-danger-avatar-hover-bg-color: $chip-danger-hover-bg-color !default; +$chip-danger-avatar-focus-bg-color: $chip-danger-focus-bg-color !default; +$chip-danger-avatar-active-bg-color: $chip-danger-active-bg-color !default; +$chip-danger-avatar-focus-active-bg-color: $chip-danger-focus-active-bg-color !default; +$chip-danger-avatar-pressed-bg-color: $chip-danger-pressed-bg-color !default; +$chip-danger-avatar-disabled-bg-color: $chip-danger-disabled-bg-color !default; +$chip-danger-font-color: rgba($success-text) !default; +$chip-danger-hover-font-color: rgba($success-text) !default; +$chip-danger-focus-font-color: rgba($success-text) !default; +$chip-danger-active-font-color: rgba($danger-text-pressed) !default; +$chip-danger-focus-active-font-color: rgba($danger-text-pressed) !default; +$chip-danger-pressed-font-color: rgba($danger-text-pressed) !default; +$chip-danger-disabled-font-color: $warning-text-disabled !default; +$chip-danger-close-icon-font-color: rgba($success-text) !default; +$chip-danger-close-icon-hover-font-color: $chip-danger-hover-font-color !default; +$chip-danger-close-icon-pressed-font-color: $chip-danger-pressed-font-color !default; +$chip-danger-avatar-font-color: $chip-danger-font-color !default; +$chip-danger-avatar-hover-font-color: $chip-danger-hover-font-color !default; +$chip-danger-avatar-focus-font-color: $chip-danger-focus-font-color !default; +$chip-danger-avatar-active-font-color: $chip-danger-active-font-color !default; +$chip-danger-avatar-focus-active-font-color: $chip-danger-focus-active-font-color !default; +$chip-danger-avatar-pressed-font-color: $chip-danger-pressed-font-color !default; +$chip-danger-avatar-disabled-font-color: $chip-danger-disabled-font-color !default; +$chip-danger-border-color: rgba($danger-bg-color) !default; +$chip-danger-hover-border-color: $danger-border-color-hover !default; +$chip-danger-focus-border-color: $danger-border-color-hover !default; +$chip-danger-active-border-color: $danger-border-color-pressed !default; +$chip-danger-focus-active-border-color: $danger-border-color-pressed !default; +$chip-danger-pressed-border-color: $danger-border-color-pressed !default; +$chip-danger-disabled-border-color: $danger-border-color-disabled !default; +$chip-danger-focus-active-box-shadow: none !default; + +$chip-outline-primary-bg-color: transparent !default; +$chip-outline-primary-hover-bg-color: rgba($primary, $opacity8) !default; +$chip-outline-primary-focus-bg-color: rgba($primary, $opacity12) !default; +$chip-outline-primary-active-bg-color: rgba($primary, $opacity16) !default; +$chip-outline-primary-focus-active-bg-color: rgba($primary, $opacity16) !default; +$chip-outline-primary-pressed-bg-color: rgba($primary, $opacity16) !default; +$chip-outline-primary-disabled-bg-color: transparent !default; +$chip-outline-primary-avatar-bg-color: rgba($primary) !default; +$chip-outline-primary-avatar-hover-bg-color: $chip-outline-primary-avatar-bg-color !default; +$chip-outline-primary-avatar-focus-bg-color: $chip-outline-primary-avatar-bg-color !default; +$chip-outline-primary-avatar-active-bg-color: $chip-outline-primary-avatar-bg-color !default; +$chip-outline-primary-avatar-focus-active-bg-color: $chip-outline-primary-avatar-bg-color !default; +$chip-outline-primary-avatar-pressed-bg-color: $chip-outline-primary-avatar-bg-color !default; +$chip-outline-primary-avatar-disabled-bg-color: $chip-outline-primary-disabled-bg-color !default; +$chip-outline-primary-font-color: rgba($primary) !default; +$chip-outline-primary-hover-font-color: rgba($primary) !default; +$chip-outline-primary-focus-font-color: rgba($primary) !default; +$chip-outline-primary-active-font-color: rgba($primary) !default; +$chip-outline-primary-focus-active-font-color: rgba($primary) !default; +$chip-outline-primary-pressed-font-color: rgba($primary) !default; +$chip-outline-primary-disabled-font-color: $content-text-color-disabled !default; +$chip-outline-primary-close-icon-font-color: rgba($primary) !default; +$chip-outline-primary-close-icon-hover-font-color: $chip-outline-primary-hover-font-color !default; +$chip-outline-primary-close-icon-pressed-font-color: $chip-outline-primary-pressed-font-color !default; +$chip-outline-primary-avatar-font-color: rgba($primary-text-color) !default; +$chip-outline-primary-avatar-hover-font-color: $chip-outline-primary-avatar-font-color !default; +$chip-outline-primary-avatar-focus-font-color: $chip-outline-primary-avatar-font-color !default; +$chip-outline-primary-avatar-active-font-color: $chip-outline-primary-avatar-font-color !default; +$chip-outline-primary-avatar-focus-active-font-color: $chip-outline-primary-avatar-font-color !default; +$chip-outline-primary-avatar-pressed-font-color: $chip-outline-primary-avatar-font-color !default; +$chip-outline-primary-avatar-disabled-font-color: $chip-outline-primary-disabled-font-color !default; +$chip-outline-primary-border-color: rgba($primary) !default; +$chip-outline-primary-hover-border-color: rgba($primary) !default; +$chip-outline-primary-focus-border-color: rgba($primary) !default; +$chip-outline-primary-focus-active-border-color: rgba($primary) !default; +$chip-outline-primary-active-border-color: rgba($primary) !default; +$chip-outline-primary-pressed-border-color: rgba($primary) !default; +$chip-outline-primary-disabled-border-color: rgba($content-text-color) !default; + +$chip-outline-success-bg-color: transparent !default; +$chip-outline-success-hover-bg-color: rgba($success-bg-color, $opacity8) !default; +$chip-outline-success-focus-bg-color: rgba($success-bg-color, $opacity12) !default; +$chip-outline-success-active-bg-color: rgba($success-bg-color, $opacity16) !default; +$chip-outline-success-focus-active-bg-color: rgba($success-bg-color, $opacity16) !default; +$chip-outline-success-pressed-bg-color: rgba($success-bg-color, $opacity16) !default; +$chip-outline-success-disabled-bg-color: transparent !default; +$chip-outline-success-avatar-bg-color: rgba($success) !default; +$chip-outline-success-avatar-hover-bg-color: $chip-outline-success-avatar-bg-color !default; +$chip-outline-success-avatar-focus-bg-color: $chip-outline-success-avatar-bg-color !default; +$chip-outline-success-avatar-active-bg-color: $chip-outline-success-avatar-bg-color !default; +$chip-outline-success-avatar-focus-active-bg-color: $chip-outline-success-avatar-bg-color !default; +$chip-outline-success-avatar-pressed-bg-color: $chip-outline-success-avatar-bg-color !default; +$chip-outline-success-avatar-disabled-bg-color: $chip-outline-success-disabled-bg-color !default; +$chip-outline-success-font-color: rgba($success-bg-color) !default; +$chip-outline-success-hover-font-color: rgba($success-bg-color) !default; +$chip-outline-success-focus-font-color: rgba($success-bg-color) !default; +$chip-outline-success-active-font-color: rgba($success-bg-color) !default; +$chip-outline-success-focus-active-font-color: rgba($success-bg-color) !default; +$chip-outline-success-pressed-font-color: rgba($success-bg-color) !default; +$chip-outline-success-disabled-font-color: $content-text-color-disabled !default; +$chip-outline-success-close-icon-font-color: rgba($success-bg-color) !default; +$chip-outline-success-close-icon-hover-font-color: rgba($success-bg-color) !default; +$chip-outline-success-close-icon-pressed-font-color: rgba($success-bg-color) !default; +$chip-outline-success-avatar-font-color: rgba($success-text) !default; +$chip-outline-success-avatar-hover-font-color: $chip-outline-success-avatar-font-color !default; +$chip-outline-success-avatar-focus-font-color: $chip-outline-success-avatar-font-color !default; +$chip-outline-success-avatar-active-font-color: $chip-outline-success-avatar-font-color !default; +$chip-outline-success-avatar-focus-active-font-color: $chip-outline-success-avatar-font-color !default; +$chip-outline-success-avatar-pressed-font-color: $chip-outline-success-avatar-font-color !default; +$chip-outline-success-avatar-disabled-font-color: $chip-outline-success-disabled-font-color !default; +$chip-outline-success-border-color: rgba($success) !default; +$chip-outline-success-hover-border-color: rgba($success-bg-color) !default; +$chip-outline-success-focus-border-color: rgba($success-bg-color) !default; +$chip-outline-success-active-border-color: rgba($success-bg-color) !default; +$chip-outline-success-focus-active-border-color: rgba($success-bg-color) !default; +$chip-outline-success-pressed-border-color: rgba($success-bg-color) !default; +$chip-outline-success-disabled-border-color: $content-bg-color-alt3 !default; + +$chip-outline-info-bg-color: transparent !default; +$chip-outline-info-hover-bg-color: rgba($info-bg-color, $opacity8) !default; +$chip-outline-info-focus-bg-color: rgba($info-bg-color, $opacity12) !default; +$chip-outline-info-active-bg-color: rgba($info-bg-color, $opacity16) !default; +$chip-outline-info-focus-active-bg-color: rgba($info-bg-color, $opacity16) !default; +$chip-outline-info-pressed-bg-color: rgba($info-bg-color, $opacity12) !default; +$chip-outline-info-disabled-bg-color: transparent !default; +$chip-outline-info-avatar-bg-color: rgba($info) !default; +$chip-outline-info-avatar-hover-bg-color: $chip-outline-info-avatar-bg-color !default; +$chip-outline-info-avatar-focus-bg-color: $chip-outline-info-avatar-bg-color !default; +$chip-outline-info-avatar-active-bg-color: $chip-outline-info-avatar-bg-color !default; +$chip-outline-info-avatar-focus-active-bg-color: $chip-outline-info-avatar-bg-color !default; +$chip-outline-info-avatar-pressed-bg-color: $chip-outline-info-avatar-bg-color !default; +$chip-outline-info-avatar-disabled-bg-color: $chip-outline-info-disabled-bg-color !default; +$chip-outline-info-font-color: rgba($info-bg-color) !default; +$chip-outline-info-hover-font-color: rgba($info-bg-color) !default; +$chip-outline-info-focus-font-color: rgba($info-bg-color) !default; +$chip-outline-info-active-font-color: rgba($info-bg-color) !default; +$chip-outline-info-focus-active-font-color: rgba($info-bg-color) !default; +$chip-outline-info-pressed-font-color: rgba($info-bg-color) !default; +$chip-outline-info-disabled-font-color: rgba($content-text-color) !default; +$chip-outline-info-close-icon-font-color: rgba($info-bg-color) !default; +$chip-outline-info-close-icon-hover-font-color: rgba($info-bg-color) !default; +$chip-outline-info-close-icon-pressed-font-color: rgba($info-bg-color) !default; +$chip-outline-info-avatar-font-color: rgba($info-text) !default; +$chip-outline-info-avatar-hover-font-color: $chip-outline-info-avatar-font-color !default; +$chip-outline-info-avatar-focus-font-color: $chip-outline-info-avatar-font-color !default; +$chip-outline-info-avatar-active-font-color: $chip-outline-info-avatar-font-color !default; +$chip-outline-info-avatar-focus-active-font-color: $chip-outline-info-avatar-font-color !default; +$chip-outline-info-avatar-pressed-font-color: $chip-outline-info-avatar-font-color !default; +$chip-outline-info-avatar-disabled-font-color: $content-text-color-disabled !default; +$chip-outline-info-border-color: rgba($info-bg-color) !default; +$chip-outline-info-hover-border-color: rgba($info-bg-color) !default; +$chip-outline-info-focus-border-color: rgba($info-bg-color) !default; +$chip-outline-info-active-border-color: rgba($info-bg-color) !default; +$chip-outline-info-focus-active-border-color: rgba($info-bg-color) !default; +$chip-outline-info-pressed-border-color: rgba($info-bg-color) !default; +$chip-outline-info-disabled-border-color: rgba($content-text-color) !default; + +$chip-outline-warning-bg-color: transparent !default; +$chip-outline-warning-hover-bg-color: rgba($warning-bg-color, $opacity8) !default; +$chip-outline-warning-focus-bg-color: rgba($warning-bg-color, $opacity12) !default; +$chip-outline-warning-active-bg-color: rgba($warning-bg-color, $opacity16) !default; +$chip-outline-warning-focus-active-bg-color: rgba($warning-bg-color, $opacity16) !default; +$chip-outline-warning-pressed-bg-color: rgba($warning-bg-color, $opacity16) !default; +$chip-outline-warning-disabled-bg-color: transparent !default; +$chip-outline-warning-avatar-bg-color: rgba($warning) !default; +$chip-outline-warning-avatar-hover-bg-color: $chip-outline-warning-avatar-bg-color !default; +$chip-outline-warning-avatar-focus-bg-color: $chip-outline-warning-avatar-bg-color !default; +$chip-outline-warning-avatar-active-bg-color: $chip-outline-warning-avatar-bg-color !default; +$chip-outline-warning-avatar-focus-active-bg-color: $chip-outline-warning-avatar-bg-color !default; +$chip-outline-warning-avatar-pressed-bg-color: $chip-outline-warning-avatar-bg-color !default; +$chip-outline-warning-avatar-disabled-bg-color: $chip-outline-warning-disabled-bg-color !default; +$chip-outline-warning-font-color: rgba($warning-bg-color) !default; +$chip-outline-warning-hover-font-color: rgba($warning-bg-color) !default; +$chip-outline-warning-focus-font-color: rgba($warning-bg-color) !default; +$chip-outline-warning-active-font-color: rgba($warning-bg-color) !default; +$chip-outline-warning-focus-active-font-color: rgba($warning-bg-color) !default; +$chip-outline-warning-pressed-font-color: rgba($warning-bg-color) !default; +$chip-outline-warning-disabled-font-color: $content-text-color-disabled !default; +$chip-outline-warning-close-icon-font-color: rgba($warning-bg-color) !default; +$chip-outline-warning-close-icon-hover-font-color: $chip-outline-warning-hover-font-color !default; +$chip-outline-warning-close-icon-pressed-font-color: $chip-outline-warning-pressed-font-color !default; +$chip-outline-warning-avatar-font-color: rgba($warning-text) !default; +$chip-outline-warning-avatar-hover-font-color: $chip-outline-warning-avatar-font-color !default; +$chip-outline-warning-avatar-focus-font-color: $chip-outline-warning-avatar-font-color !default; +$chip-outline-warning-avatar-active-font-color: $chip-outline-warning-avatar-font-color !default; +$chip-outline-warning-avatar-focus-active-font-color: $chip-outline-warning-avatar-font-color !default; +$chip-outline-warning-avatar-pressed-font-color: $chip-outline-warning-avatar-font-color !default; +$chip-outline-warning-avatar-disabled-font-color: $chip-outline-warning-disabled-font-color !default; +$chip-outline-warning-border-color: rgba($warning) !default; +$chip-outline-warning-hover-border-color: rgba($warning-bg-color) !default; +$chip-outline-warning-focus-border-color: rgba($warning-bg-color) !default; +$chip-outline-warning-active-border-color: rgba($warning-bg-color) !default; +$chip-outline-warning-focus-active-border-color: rgba($warning-bg-color) !default; +$chip-outline-warning-pressed-border-color: rgba($warning-bg-color) !default; +$chip-outline-warning-disabled-border-color: $content-bg-color-alt3 !default; + +$chip-outline-danger-bg-color: transparent !default; +$chip-outline-danger-hover-bg-color: rgba($danger-bg-color, $opacity8) !default; +$chip-outline-danger-focus-bg-color: rgba($danger-bg-color, $opacity12) !default; +$chip-outline-danger-active-bg-color: rgba($danger-bg-color, $opacity16) !default; +$chip-outline-danger-focus-active-bg-color: rgba($danger-bg-color, $opacity16) !default; +$chip-outline-danger-pressed-bg-color: rgba($danger-bg-color, $opacity16) !default; +$chip-outline-danger-disabled-bg-color: transparent !default; +$chip-outline-danger-avatar-bg-color: rgba($danger) !default; +$chip-outline-danger-avatar-hover-bg-color: $chip-outline-danger-avatar-bg-color !default; +$chip-outline-danger-avatar-focus-bg-color: $chip-outline-danger-avatar-bg-color !default; +$chip-outline-danger-avatar-active-bg-color: $chip-outline-danger-avatar-bg-color !default; +$chip-outline-danger-avatar-focus-active-bg-color: $chip-outline-danger-avatar-bg-color !default; +$chip-outline-danger-avatar-pressed-bg-color: $chip-outline-danger-avatar-bg-color !default; +$chip-outline-danger-avatar-disabled-bg-color: $chip-outline-danger-disabled-bg-color !default; +$chip-outline-danger-font-color: rgba($danger) !default; +$chip-outline-danger-hover-font-color: rgba($danger-bg-color) !default; +$chip-outline-danger-focus-font-color: rgba($danger-bg-color) !default; +$chip-outline-danger-active-font-color: rgba($danger-bg-color) !default; +$chip-outline-danger-focus-active-font-color: rgba($danger-bg-color) !default; +$chip-outline-danger-pressed-font-color: rgba($danger-bg-color) !default; +$chip-outline-danger-disabled-font-color: $content-text-color-disabled !default; +$chip-outline-danger-close-icon-font-color: rgba($danger) !default; +$chip-outline-danger-close-icon-hover-font-color: $chip-outline-danger-hover-font-color !default; +$chip-outline-danger-close-icon-pressed-font-color: $chip-outline-danger-pressed-font-color !default; +$chip-outline-danger-avatar-font-color: rgba($danger-text) !default; +$chip-outline-danger-avatar-hover-font-color: $chip-outline-danger-avatar-font-color !default; +$chip-outline-danger-avatar-focus-font-color: $chip-outline-danger-avatar-font-color !default; +$chip-outline-danger-avatar-active-font-color: $chip-outline-danger-avatar-font-color !default; +$chip-outline-danger-avatar-focus-active-font-color: $chip-outline-danger-avatar-font-color !default; +$chip-outline-danger-avatar-pressed-font-color: $chip-outline-danger-avatar-font-color !default; +$chip-outline-danger-avatar-disabled-font-color: $chip-outline-danger-disabled-font-color !default; +$chip-outline-danger-border-color: rgba($danger) !default; +$chip-outline-danger-hover-border-color: rgba($danger-bg-color) !default; +$chip-outline-danger-focus-border-color: rgba($danger-bg-color) !default; +$chip-outline-danger-active-border-color: rgba($danger-bg-color) !default; +$chip-outline-danger-focus-active-border-color: rgba($danger-bg-color) !default; +$chip-outline-danger-pressed-border-color: rgba($danger-bg-color) !default; +$chip-outline-danger-disabled-border-color: rgba($danger-bg-color) !default; \ No newline at end of file diff --git a/components/buttons/styles/chips/_theme.scss b/components/buttons/styles/chips/_theme.scss new file mode 100644 index 0000000..c041b51 --- /dev/null +++ b/components/buttons/styles/chips/_theme.scss @@ -0,0 +1,451 @@ +@mixin chip-color($bg-color, $border-color, $color, $icon-color, $avatar-bg-color, $avatar-font-color, $delete-icon-color: null) { + background: $bg-color; + @if $skin-name != 'Material3' { + border-color: $border-color; + } + @else { + border-image: $border-color; + } + color: $color; + + .sf-selectable-icon path { + fill: $color; + } + + .sf-chip-icon, + .sf-chip-delete { + color: $icon-color; + + path { + fill: $icon-color; + } + } + + .sf-chip-delete.sf-dlt-btn path { + fill: $delete-icon-color; + } + + .sf-chip-avatar { + background-color: $avatar-bg-color; + color: $avatar-font-color; + } +} + +@mixin chip-dlt-btn-color($hover-color, $pressed-color) { + &:not(.sf-active) { + .sf-chip-delete.sf-dlt-btn { + &:hover path { + fill: $hover-color; + } + + &:active path { + fill: $pressed-color; + } + } + } +} + +@include export-module('chip-theme') { + .sf-chip-list { + &.sf-selection .sf-chip { + &.sf-active { + @include chip-color($chip-choice-active-bg-color, $chip-choice-active-border-color, $chip-choice-active-font-color, $chip-choice-active-font-color, $chip-avatar-choice-active-bg-color, $chip-avatar-choice-active-font-color); + + &.sf-focused { + @include chip-color($chip-choice-focus-active-bg-color, $chip-choice-focus-active-border-color, $chip-choice-focus-active-font-color, $chip-choice-icon-focus-active-font-color, $chip-avatar-choice-focus-active-bg-color, $chip-avatar-choice-focus-active-font-color); + } + + &.sf-disabled { + @include chip-color($chip-disabled-bg-color, $chip-disabled-border-color, $chip-disabled-font-color, $chip-disabled-font-color, $chip-avatar-disabled-bg-color, $chip-avatar-disabled-font-color); + } + + &.sf-outline { + @include chip-color($chip-outline-choice-active-bg-color, $chip-outline-choice-active-border-color, $chip-outline-choice-active-font-color, $chip-outline-choice-active-font-color, $chip-outline-avatar-choice-active-bg-color, $chip-outline-avatar-choice-active-font-color); + border-width: $chip-outline-active-border-width; + &.sf-focused { + @include chip-color($chip-outline-choice-focus-active-bg-color, $chip-outline-choice-focus-active-border-color, $chip-outline-choice-focus-active-font-color, $chip-outline-choice-icon-focus-active-font-color, $chip-outline-avatar-choice-focus-active-bg-color, $chip-outline-avatar-choice-focus-active-font-color); + box-shadow: $chip-outline-focus-active-box-shadow; + } + + &.sf-disabled { + @include chip-color($chip-outline-disabled-bg-color, $chip-outline-disabled-border-color, $chip-disabled-font-color, $chip-disabled-font-color, $chip-outline-avatar-disabled-bg-color, $chip-outline-avatar-disabled-font-color); + } + } + } + + &:active { + @include chip-color($chip-pressed-active-bg-color, $chip-pressed-border-color, $chip-selection-pressed-font-color, $chip-icon-selection-pressed-font-color, $chip-avatar-pressed-active-bg-color, $chip-avatar-pressed-active-font-color); + + &.sf-outline { + @include chip-color($chip-outline-pressed-active-bg-color, $chip-outline-pressed-border-color, $chip-outline-pressed-font-color, $chip-outline-icon-pressed-font-color, $chip-outline-avatar-pressed-active-bg-color, $chip-outline-avatar-pressed-active-font-color); + } + } + } + + &.sf-chip, + & .sf-chip { + @include chip-color($chip-default-bg-color, $chip-default-border-color, $chip-default-font-color, $chip-icon-font-color, $chip-avatar-bg-color, $chip-avatar-font-color, $chip-close-icon-font-color); + @include chip-dlt-btn-color($chip-close-icon-hover-font-color, $chip-close-icon-pressed-font-color); + + &:hover { + @include chip-color($chip-hover-bg-color, $chip-hover-border-color, $chip-hover-font-color, $chip-icon-hover-font-color, $chip-avatar-hover-bg-color, $chip-avatar-hover-font-color); + } + + &.sf-focused { + box-shadow: $chip-focussed-box-shadow; + @include chip-color($chip-focus-bg-color, $chip-focus-border-color, $chip-focus-font-color, $chip-icon-focus-font-color, $chip-avatar-hover-bg-color, $chip-avatar-hover-font-color); + &.sf-active { + @include chip-color($chip-focus-active-bg-color, $chip-focus-active-border-color, $chip-focus-active-font-color, $chip-icon-focus-active-font-color, $chip-avatar-focus-active-bg-color, $chip-avatar-focus-active-font-color); + box-shadow: $chip-focussed-active-box-shadow; + } + } + + &.sf-active { + @include chip-color($chip-active-bg-color, $chip-active-border-color, $chip-active-font-color, $chip-icon-active-font-color, $chip-avatar-active-bg-color, $chip-avatar-active-font-color); + box-shadow: none; + } + + &:active { + @include chip-color($chip-pressed-bg-color, $chip-pressed-border-color, $chip-pressed-font-color, $chip-icon-pressed-font-color, $chip-avatar-pressed-bg-color, $chip-avatar-pressed-font-color); + box-shadow: $chip-pressed-box-shadow; + } + + &.sf-disabled { + @include chip-color($chip-disabled-bg-color, $chip-disabled-border-color, $chip-disabled-font-color, $chip-disabled-font-color, $chip-avatar-disabled-bg-color, $chip-avatar-disabled-font-color); + opacity: 1; + pointer-events: none; + } + + &.sf-outline { + @include chip-color(transparent, $chip-outline-border-color, $chip-outline-font-color, $chip-outline-icon-font-color, $chip-outline-avatar-bg-color, $chip-outline-avatar-font-color, $chip-outline-close-icon-font-color); + @include chip-dlt-btn-color($chip-outline-close-icon-hover-font-color, $chip-outline-close-icon-pressed-font-color); + border-width: 1px; + + &:hover { + @include chip-color($chip-outline-hover-bg-color, $chip-outline-hover-border-color, $chip-outline-hover-font-color, $chip-outline-icon-hover-font-color, $chip-outline-avatar-hover-bg-color, $chip-outline-avatar-hover-font-color); + } + + &.sf-focused { + @include chip-color($chip-outline-focus-bg-color, $chip-outline-focus-border-color, $chip-outline-focus-font-color, $chip-outline-icon-focus-font-color, $chip-outline-avatar-focus-bg-color, $chip-outline-avatar-focus-font-color); + + &.sf-active { + @include chip-color($chip-outline-focus-active-bg-color, $chip-outline-focus-active-border-color, $chip-outline-focus-active-font-color, $chip-outline-icon-focus-active-font-color, $chip-outline-avatar-focus-active-bg-color, $chip-outline-avatar-focus-active-font-color); + box-shadow: $chip-outline-focus-active-box-shadow; + } + } + + &.sf-active { + @include chip-color($chip-outline-active-bg-color, $chip-outline-active-border-color, $chip-outline-active-font-color, $chip-outline-icon-active-font-color, $chip-outline-avatar-active-bg-color, $chip-outline-avatar-active-font-color); + } + + &:active { + @include chip-color($chip-outline-pressed-bg-color, $chip-outline-pressed-border-color, $chip-outline-pressed-font-color, $chip-outline-icon-pressed-font-color, $chip-outline-avatar-pressed-bg-color, $chip-outline-avatar-pressed-font-color); + } + + &.sf-disabled { + @include chip-color($chip-outline-disabled-bg-color, $chip-outline-disabled-border-color, $chip-disabled-font-color, $chip-disabled-font-color, $chip-outline-avatar-disabled-bg-color, $chip-outline-avatar-disabled-font-color); + } + } + + &.sf-primary { + @include chip-color($chip-primary-bg-color, $chip-primary-border-color, $chip-primary-font-color, $chip-primary-font-color, $chip-primary-avatar-bg-color, $chip-primary-avatar-font-color, $chip-primary-close-icon-font-color); + @include chip-dlt-btn-color($chip-primary-close-icon-hover-font-color, $chip-primary-close-icon-pressed-font-color); + + &:hover { + @include chip-color($chip-primary-hover-bg-color, $chip-primary-hover-border-color, $chip-primary-hover-font-color, $chip-primary-hover-font-color, $chip-primary-avatar-hover-bg-color, $chip-primary-avatar-hover-font-color); + } + + &.sf-focused { + @include chip-color($chip-primary-focus-bg-color, $chip-primary-focus-border-color, $chip-primary-focus-font-color, $chip-primary-focus-font-color, $chip-primary-avatar-focus-bg-color, $chip-primary-avatar-focus-font-color); + + &.sf-active { + @include chip-color($chip-primary-focus-active-bg-color, $chip-primary-focus-active-border-color, $chip-primary-focus-active-font-color, $chip-primary-focus-active-font-color, $chip-primary-avatar-focus-active-bg-color, $chip-primary-avatar-focus-active-font-color); + box-shadow: $chip-primary-focus-active-box-shadow; + } + } + + &.sf-active { + @include chip-color($chip-primary-active-bg-color, $chip-primary-active-border-color, $chip-primary-active-font-color, $chip-primary-active-font-color, $chip-primary-avatar-active-bg-color, $chip-primary-avatar-active-font-color); + } + + &:active { + @include chip-color($chip-primary-pressed-bg-color, $chip-primary-pressed-border-color, $chip-primary-pressed-font-color, $chip-primary-pressed-font-color, $chip-primary-avatar-pressed-bg-color, $chip-primary-avatar-pressed-font-color); + } + + &.sf-disabled { + @include chip-color($chip-primary-disabled-bg-color, $chip-primary-disabled-border-color, $chip-primary-disabled-font-color, $chip-primary-disabled-font-color, $chip-primary-avatar-disabled-bg-color, $chip-primary-avatar-disabled-font-color); + } + + &.sf-outline { + @include chip-color($chip-outline-primary-bg-color, $chip-outline-primary-border-color, $chip-outline-primary-font-color, $chip-outline-primary-font-color, $chip-outline-primary-avatar-bg-color, $chip-outline-primary-avatar-font-color, $chip-outline-primary-close-icon-font-color); + @include chip-dlt-btn-color($chip-outline-primary-close-icon-hover-font-color, $chip-outline-primary-close-icon-pressed-font-color); + + &:hover { + @include chip-color($chip-outline-primary-hover-bg-color, $chip-outline-primary-hover-border-color, $chip-outline-primary-hover-font-color, $chip-outline-primary-hover-font-color, $chip-outline-primary-avatar-hover-bg-color, $chip-outline-primary-avatar-hover-font-color); + } + + &.sf-focused { + @include chip-color($chip-outline-primary-focus-bg-color, $chip-outline-primary-focus-border-color, $chip-outline-primary-focus-font-color, $chip-outline-primary-focus-font-color, $chip-outline-primary-avatar-focus-bg-color, $chip-outline-primary-avatar-focus-font-color); + + &.sf-active { + @include chip-color($chip-outline-primary-focus-active-bg-color, $chip-outline-primary-focus-active-border-color, $chip-outline-primary-focus-active-font-color, $chip-outline-primary-focus-active-font-color, $chip-outline-primary-avatar-focus-active-bg-color, $chip-outline-primary-avatar-focus-active-font-color); + box-shadow: $chip-primary-focus-active-box-shadow; + } + } + + &.sf-active { + @include chip-color($chip-outline-primary-active-bg-color, $chip-outline-primary-active-border-color, $chip-outline-primary-active-font-color, $chip-outline-primary-active-font-color, $chip-outline-primary-avatar-active-bg-color, $chip-outline-primary-avatar-active-font-color); + } + + &:active { + @include chip-color($chip-outline-primary-pressed-bg-color, $chip-outline-primary-pressed-border-color, $chip-outline-primary-pressed-font-color, $chip-outline-primary-pressed-font-color, $chip-outline-primary-avatar-pressed-bg-color, $chip-outline-primary-avatar-pressed-font-color); + } + + &.sf-disabled { + @include chip-color($chip-outline-primary-disabled-bg-color, $chip-outline-primary-disabled-border-color, $chip-outline-primary-disabled-font-color, $chip-outline-primary-disabled-font-color, $chip-outline-primary-avatar-disabled-bg-color, $chip-outline-primary-avatar-disabled-font-color); + } + } + } + + &.sf-success { + @include chip-color($chip-success-bg-color, $chip-success-border-color, $chip-success-font-color, $chip-success-font-color, $chip-success-avatar-bg-color, $chip-success-avatar-font-color, $chip-success-close-icon-font-color); + @include chip-dlt-btn-color($chip-success-close-icon-hover-font-color, $chip-success-close-icon-pressed-font-color); + + &:hover { + @include chip-color($chip-success-hover-bg-color, $chip-success-hover-border-color, $chip-success-hover-font-color, $chip-success-hover-font-color, $chip-success-avatar-hover-bg-color, $chip-success-avatar-hover-font-color); + } + + &.sf-focused { + @include chip-color($chip-success-focus-bg-color, $chip-success-focus-border-color, $chip-success-focus-font-color, $chip-success-focus-font-color, $chip-success-avatar-focus-bg-color, $chip-success-avatar-focus-font-color); + + &.sf-active { + @include chip-color($chip-success-focus-active-bg-color, $chip-success-focus-active-border-color, $chip-success-focus-active-font-color, $chip-success-focus-active-font-color, $chip-success-avatar-focus-active-bg-color, $chip-success-avatar-focus-active-font-color); + box-shadow: $chip-success-focus-active-box-shadow; + } + } + + &.sf-active { + @include chip-color($chip-success-active-bg-color, $chip-success-active-border-color, $chip-success-active-font-color, $chip-success-active-font-color, $chip-success-avatar-active-bg-color, $chip-success-avatar-active-font-color); + } + + &:active { + @include chip-color($chip-success-pressed-bg-color, $chip-success-pressed-border-color, $chip-success-pressed-font-color, $chip-success-pressed-font-color, $chip-success-avatar-pressed-bg-color, $chip-success-avatar-pressed-font-color); + } + + &.sf-disabled { + @include chip-color($chip-success-disabled-bg-color, $chip-success-disabled-border-color, $chip-success-disabled-font-color, $chip-success-disabled-font-color, $chip-success-avatar-disabled-bg-color, $chip-success-avatar-disabled-font-color); + } + + &.sf-outline { + @include chip-color($chip-outline-success-bg-color, $chip-outline-success-border-color, $chip-outline-success-font-color, $chip-outline-success-font-color, $chip-outline-success-avatar-bg-color, $chip-outline-success-avatar-font-color, $chip-outline-success-close-icon-font-color); + @include chip-dlt-btn-color($chip-outline-success-close-icon-hover-font-color, $chip-outline-success-close-icon-pressed-font-color); + + &:hover { + @include chip-color($chip-outline-success-hover-bg-color, $chip-outline-success-hover-border-color, $chip-outline-success-hover-font-color, $chip-outline-success-hover-font-color, $chip-outline-success-avatar-hover-bg-color, $chip-outline-success-avatar-hover-font-color); + } + + &.sf-focused { + @include chip-color($chip-outline-success-focus-bg-color, $chip-outline-success-focus-border-color, $chip-outline-success-focus-font-color, $chip-outline-success-focus-font-color, $chip-outline-success-avatar-focus-bg-color, $chip-outline-success-avatar-focus-font-color); + + &.sf-active { + @include chip-color($chip-outline-success-focus-active-bg-color, $chip-outline-success-focus-active-border-color, $chip-outline-success-focus-active-font-color, $chip-outline-success-focus-active-font-color, $chip-outline-success-avatar-focus-active-bg-color, $chip-outline-success-avatar-focus-active-font-color); + box-shadow: $chip-success-focus-active-box-shadow; + } + } + + &.sf-active { + @include chip-color($chip-outline-success-active-bg-color, $chip-outline-success-active-border-color, $chip-outline-success-active-font-color, $chip-outline-success-active-font-color, $chip-outline-success-avatar-active-bg-color, $chip-outline-success-avatar-active-font-color); + } + + &:active { + @include chip-color($chip-outline-success-pressed-bg-color, $chip-outline-success-pressed-border-color, $chip-outline-success-pressed-font-color, $chip-outline-success-pressed-font-color, $chip-outline-success-avatar-pressed-bg-color, $chip-outline-success-avatar-pressed-font-color); + } + + &.sf-disabled { + @include chip-color($chip-outline-success-disabled-bg-color, $chip-outline-success-disabled-border-color, $chip-outline-success-disabled-font-color, $chip-outline-success-disabled-font-color, $chip-outline-success-avatar-disabled-bg-color, $chip-outline-success-avatar-disabled-font-color); + } + } + } + + &.sf-info { + @include chip-color($chip-info-bg-color, $chip-info-border-color, $chip-info-font-color, $chip-info-font-color, $chip-info-avatar-bg-color, $chip-info-avatar-font-color, $chip-info-close-icon-font-color); + @include chip-dlt-btn-color($chip-info-close-icon-hover-font-color, $chip-info-close-icon-pressed-font-color); + + &:hover { + @include chip-color($chip-info-hover-bg-color, $chip-info-hover-border-color, $chip-info-hover-font-color, $chip-info-hover-font-color, $chip-info-avatar-hover-bg-color, $chip-info-avatar-hover-font-color); + } + + &.sf-focused { + @include chip-color($chip-info-focus-bg-color, $chip-info-focus-border-color, $chip-info-focus-font-color, $chip-info-focus-font-color, $chip-info-avatar-focus-bg-color, $chip-info-avatar-focus-font-color); + + &.sf-active { + @include chip-color($chip-info-focus-active-bg-color, $chip-info-focus-active-border-color, $chip-info-focus-active-font-color, $chip-info-focus-active-font-color, $chip-info-avatar-focus-active-bg-color, $chip-info-avatar-focus-active-font-color); + box-shadow: $chip-info-focus-active-box-shadow; + } + } + + &.sf-active { + @include chip-color($chip-info-active-bg-color, $chip-info-active-border-color, $chip-info-active-font-color, $chip-info-active-font-color, $chip-info-avatar-active-bg-color, $chip-info-avatar-active-font-color); + } + + &:active { + @include chip-color($chip-info-pressed-bg-color, $chip-info-pressed-border-color, $chip-info-pressed-font-color, $chip-info-pressed-font-color, $chip-info-avatar-pressed-bg-color, $chip-info-avatar-pressed-font-color); + } + + &.sf-disabled { + @include chip-color($chip-info-disabled-bg-color, $chip-info-disabled-border-color, $chip-info-disabled-font-color, $chip-info-disabled-font-color, $chip-info-avatar-disabled-bg-color, $chip-info-avatar-disabled-font-color); + } + + &.sf-outline { + @include chip-color($chip-outline-info-bg-color, $chip-outline-info-border-color, $chip-outline-info-font-color, $chip-outline-info-font-color, $chip-outline-info-avatar-bg-color, $chip-outline-info-avatar-font-color, $chip-outline-info-close-icon-font-color); + @include chip-dlt-btn-color($chip-outline-info-close-icon-hover-font-color, $chip-outline-info-close-icon-pressed-font-color); + + &:hover { + @include chip-color($chip-outline-info-hover-bg-color, $chip-outline-info-hover-border-color, $chip-outline-info-hover-font-color, $chip-outline-info-hover-font-color, $chip-outline-info-avatar-hover-bg-color, $chip-outline-info-avatar-hover-font-color); + } + + &.sf-focused { + @include chip-color($chip-outline-info-focus-bg-color, $chip-outline-info-focus-border-color, $chip-outline-info-focus-font-color, $chip-outline-info-focus-font-color, $chip-outline-info-avatar-focus-bg-color, $chip-outline-info-avatar-focus-font-color); + + &.sf-active { + @include chip-color($chip-outline-info-focus-active-bg-color, $chip-outline-info-focus-active-border-color, $chip-outline-info-focus-active-font-color, $chip-outline-info-focus-active-font-color, $chip-outline-info-avatar-focus-active-bg-color, $chip-outline-info-avatar-focus-active-font-color); + box-shadow: $chip-info-focus-active-box-shadow; + } + } + + &.sf-active { + @include chip-color($chip-outline-info-active-bg-color, $chip-outline-info-active-border-color, $chip-outline-info-active-font-color, $chip-outline-info-active-font-color, $chip-outline-info-avatar-active-bg-color, $chip-outline-info-avatar-active-font-color); + } + + &:active { + @include chip-color($chip-outline-info-pressed-bg-color, $chip-outline-info-pressed-border-color, $chip-outline-info-pressed-font-color, $chip-outline-info-pressed-font-color, $chip-outline-info-avatar-pressed-bg-color, $chip-outline-info-avatar-pressed-font-color); + } + + &.sf-disabled { + @include chip-color($chip-outline-info-disabled-bg-color, $chip-outline-info-disabled-border-color, $chip-outline-info-disabled-font-color, $chip-outline-info-disabled-font-color, $chip-outline-info-avatar-disabled-bg-color, $chip-outline-info-avatar-disabled-font-color); + } + } + } + + &.sf-warning { + @include chip-color($chip-warning-bg-color, $chip-warning-border-color, $chip-warning-font-color, $chip-warning-font-color, $chip-warning-avatar-bg-color, $chip-warning-avatar-font-color, $chip-warning-close-icon-font-color); + @include chip-dlt-btn-color($chip-warning-close-icon-hover-font-color, $chip-warning-close-icon-pressed-font-color); + + &:hover { + @include chip-color($chip-warning-hover-bg-color, $chip-warning-hover-border-color, $chip-warning-hover-font-color, $chip-warning-hover-font-color, $chip-warning-avatar-hover-bg-color, $chip-warning-avatar-hover-font-color); + } + + &.sf-focused { + @include chip-color($chip-warning-focus-bg-color, $chip-warning-focus-border-color, $chip-warning-focus-font-color, $chip-warning-focus-font-color, $chip-warning-avatar-focus-bg-color, $chip-warning-avatar-focus-font-color); + + &.sf-active { + @include chip-color($chip-warning-focus-active-bg-color, $chip-warning-focus-active-border-color, $chip-warning-focus-active-font-color, $chip-warning-focus-active-font-color, $chip-warning-avatar-focus-active-bg-color, $chip-warning-avatar-focus-active-font-color); + box-shadow: $chip-warning-focus-active-box-shadow; + } + } + + &.sf-active { + @include chip-color($chip-warning-active-bg-color, $chip-warning-active-border-color, $chip-warning-active-font-color, $chip-warning-active-font-color, $chip-warning-avatar-active-bg-color, $chip-warning-avatar-active-font-color); + } + + &:active { + @include chip-color($chip-warning-pressed-bg-color, $chip-warning-pressed-border-color, $chip-warning-pressed-font-color, $chip-warning-pressed-font-color, $chip-warning-avatar-pressed-bg-color, $chip-warning-avatar-pressed-font-color); + } + + &.sf-disabled { + @include chip-color($chip-warning-disabled-bg-color, $chip-warning-disabled-border-color, $chip-warning-disabled-font-color, $chip-warning-disabled-font-color, $chip-warning-avatar-disabled-bg-color, $chip-warning-avatar-disabled-font-color); + } + + &.sf-outline { + @include chip-color($chip-outline-warning-bg-color, $chip-outline-warning-border-color, $chip-outline-warning-font-color, $chip-outline-warning-font-color, $chip-outline-warning-avatar-bg-color, $chip-outline-warning-avatar-font-color, $chip-outline-warning-close-icon-font-color); + @include chip-dlt-btn-color($chip-outline-warning-close-icon-hover-font-color, $chip-outline-warning-close-icon-pressed-font-color); + + &:hover { + @include chip-color($chip-outline-warning-hover-bg-color, $chip-outline-warning-hover-border-color, $chip-outline-warning-hover-font-color, $chip-outline-warning-hover-font-color, $chip-outline-warning-avatar-hover-bg-color, $chip-outline-warning-avatar-hover-font-color); + } + + &.sf-focused { + @include chip-color($chip-outline-warning-focus-bg-color, $chip-outline-warning-focus-border-color, $chip-outline-warning-focus-font-color, $chip-outline-warning-focus-font-color, $chip-outline-warning-avatar-focus-bg-color, $chip-outline-warning-avatar-focus-font-color); + + &.sf-active { + @include chip-color($chip-outline-warning-focus-active-bg-color, $chip-outline-warning-focus-active-border-color, $chip-outline-warning-focus-active-font-color, $chip-outline-warning-focus-active-font-color, $chip-outline-warning-avatar-focus-active-bg-color, $chip-outline-warning-avatar-focus-active-font-color); + box-shadow: $chip-warning-focus-active-box-shadow; + } + } + + &.sf-active { + @include chip-color($chip-outline-warning-active-bg-color, $chip-outline-warning-active-border-color, $chip-outline-warning-active-font-color, $chip-outline-warning-active-font-color, $chip-outline-warning-avatar-active-bg-color, $chip-outline-warning-avatar-active-font-color); + } + + &:active { + @include chip-color($chip-outline-warning-pressed-bg-color, $chip-outline-warning-pressed-border-color, $chip-outline-warning-pressed-font-color, $chip-outline-warning-pressed-font-color, $chip-outline-warning-avatar-pressed-bg-color, $chip-outline-warning-avatar-pressed-font-color); + } + + &.sf-disabled { + @include chip-color($chip-outline-warning-disabled-bg-color, $chip-outline-warning-disabled-border-color, $chip-outline-warning-disabled-font-color, $chip-outline-warning-disabled-font-color, $chip-outline-warning-avatar-disabled-bg-color, $chip-outline-warning-avatar-disabled-font-color); + } + } + } + + &.sf-danger { + @include chip-color($chip-danger-bg-color, $chip-danger-border-color, $chip-danger-font-color, $chip-danger-font-color, $chip-danger-avatar-bg-color, $chip-danger-avatar-font-color, $chip-danger-close-icon-font-color); + @include chip-dlt-btn-color($chip-danger-close-icon-hover-font-color, $chip-danger-close-icon-pressed-font-color); + + &:hover { + @include chip-color($chip-danger-hover-bg-color, $chip-danger-hover-border-color, $chip-danger-hover-font-color, $chip-danger-hover-font-color, $chip-danger-avatar-hover-bg-color, $chip-danger-avatar-hover-font-color); + } + + &.sf-focused { + @include chip-color($chip-danger-focus-bg-color, $chip-danger-focus-border-color, $chip-danger-focus-font-color, $chip-danger-focus-font-color, $chip-danger-avatar-focus-bg-color, $chip-danger-avatar-focus-font-color); + + &.sf-active { + @include chip-color($chip-danger-focus-active-bg-color, $chip-danger-focus-active-border-color, $chip-danger-focus-active-font-color, $chip-danger-focus-active-font-color, $chip-danger-avatar-focus-active-bg-color, $chip-danger-avatar-focus-active-font-color); + box-shadow: $chip-danger-focus-active-box-shadow; + } + } + + &.sf-active { + @include chip-color($chip-danger-active-bg-color, $chip-danger-active-border-color, $chip-danger-active-font-color, $chip-danger-active-font-color, $chip-danger-avatar-active-bg-color, $chip-danger-avatar-active-font-color); + } + + &:active { + @include chip-color($chip-danger-pressed-bg-color, $chip-danger-pressed-border-color, $chip-danger-pressed-font-color, $chip-danger-pressed-font-color, $chip-danger-avatar-pressed-bg-color, $chip-danger-avatar-pressed-font-color); + } + + &.sf-disabled { + @include chip-color($chip-danger-disabled-bg-color, $chip-danger-disabled-border-color, $chip-danger-disabled-font-color, $chip-danger-disabled-font-color, $chip-danger-avatar-disabled-bg-color, $chip-danger-avatar-disabled-font-color); + } + + &.sf-outline { + @include chip-color($chip-outline-danger-bg-color, $chip-outline-danger-border-color, $chip-outline-danger-font-color, $chip-outline-danger-font-color, $chip-outline-danger-avatar-bg-color, $chip-outline-danger-avatar-font-color, $chip-outline-danger-close-icon-font-color); + @include chip-dlt-btn-color($chip-outline-danger-close-icon-hover-font-color, $chip-outline-danger-close-icon-pressed-font-color); + + &:hover { + @include chip-color($chip-outline-danger-hover-bg-color, $chip-outline-danger-hover-border-color, $chip-outline-danger-hover-font-color, $chip-outline-danger-hover-font-color, $chip-outline-danger-avatar-hover-bg-color, $chip-outline-danger-avatar-hover-font-color); + } + + &.sf-focused { + @include chip-color($chip-outline-danger-focus-bg-color, $chip-outline-danger-focus-border-color, $chip-outline-danger-focus-font-color, $chip-outline-danger-focus-font-color, $chip-outline-danger-avatar-focus-bg-color, $chip-outline-danger-avatar-focus-font-color); + + &.sf-focused.sf-active { + @include chip-color($chip-outline-danger-focus-active-bg-color, $chip-outline-danger-focus-active-border-color, $chip-outline-danger-focus-active-font-color, $chip-outline-danger-focus-active-font-color, $chip-outline-danger-avatar-focus-active-bg-color, $chip-outline-danger-avatar-focus-active-font-color); + box-shadow: $chip-danger-focus-active-box-shadow; + } + } + + &.sf-active { + @include chip-color($chip-outline-danger-active-bg-color, $chip-outline-danger-active-border-color, $chip-outline-danger-active-font-color, $chip-outline-danger-active-font-color, $chip-outline-danger-avatar-active-bg-color, $chip-outline-danger-avatar-active-font-color); + } + + &:active { + @include chip-color($chip-outline-danger-pressed-bg-color, $chip-outline-danger-pressed-border-color, $chip-outline-danger-pressed-font-color, $chip-outline-danger-pressed-font-color, $chip-outline-danger-avatar-pressed-bg-color, $chip-outline-danger-avatar-pressed-font-color); + } + + &.sf-disabled { + @include chip-color($chip-outline-danger-disabled-bg-color, $chip-outline-danger-disabled-border-color, $chip-outline-danger-disabled-font-color, $chip-outline-danger-disabled-font-color, $chip-outline-danger-avatar-disabled-bg-color, $chip-outline-danger-avatar-disabled-font-color); + } + } + } + } + } +} diff --git a/components/buttons/styles/chips/material3-dark.css b/components/buttons/styles/chips/material3-dark.css new file mode 100644 index 0000000..319b4a8 --- /dev/null +++ b/components/buttons/styles/chips/material3-dark.css @@ -0,0 +1,2315 @@ +.sf-chip-list { + display: flex; + padding: 0; +} +.sf-chip-list.sf-chip, +.sf-chip-list .sf-chip { + -webkit-tap-highlight-color: transparent; + border: 1px solid; + border-radius: 12px; + font-size: 11px; + margin: 4px; + align-items: center; + justify-content: center; + line-height: 14px; + box-shadow: none; + box-sizing: border-box; + cursor: pointer; + display: inline-flex; + font-weight: 500; + height: 24px; + outline: none; + overflow: hidden; + padding: 0 8px; + position: relative; + transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); + user-select: none; +} +.sf-chip-list.sf-chip .sf-chip-avatar, +.sf-chip-list .sf-chip .sf-chip-avatar { + background-size: cover; + display: flex; + overflow: hidden; + height: 20px; + width: 20px; + border-radius: 12px; + font-size: 12px; + margin: 0 4px 0 -6px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-chip-avatar-wrap, .sf-chip-list.sf-chip.sf-chip-avatar-wrap, +.sf-chip-list .sf-chip .sf-chip-avatar-wrap, +.sf-chip-list .sf-chip.sf-chip-avatar-wrap { + border-radius: 12px; +} +.sf-chip-list.sf-chip .sf-chip-icon, +.sf-chip-list .sf-chip .sf-chip-icon { + background-size: cover; + display: flex; + overflow: hidden; + height: 20px; + width: 20px; + border-radius: 50%; + font-size: 14px; + margin: 0 4px 0 -6px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-chip-text, +.sf-chip-list .sf-chip .sf-chip-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.sf-chip-list.sf-chip .sf-chip-delete, +.sf-chip-list .sf-chip .sf-chip-delete { + background-size: cover; + display: flex; + overflow: hidden; + height: 18px; + width: 14px; + border-radius: 50%; + font-size: 14px; + margin: 0 -2px 0 8px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-image-url, +.sf-chip-list .sf-chip .sf-image-url { + background-size: cover; + display: flex; + overflow: hidden; + height: 20px; + width: 20px; + border-radius: 50%; + font-size: 14px; + margin: 0 4px 0 -6px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-image-url .sf-leading-image, +.sf-chip-list .sf-chip .sf-image-url .sf-leading-image { + width: 100%; + height: 100%; + object-fit: cover; +} +.sf-chip-list.sf-chip .sf-trailing-icon-url, +.sf-chip-list .sf-chip .sf-trailing-icon-url { + background-size: cover; + display: flex; + overflow: hidden; + height: 18px; + width: 18px; + border-radius: 50%; + font-size: 14px; + margin: 0 -2px 0 8px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-trailing-icon-url .sf-trailing-image, +.sf-chip-list .sf-chip .sf-trailing-icon-url .sf-trailing-image { + width: 100%; + height: 100%; + object-fit: cover; +} +.sf-chip-list.sf-chip .sf-chip-template, +.sf-chip-list .sf-chip .sf-chip-template { + display: inline-flex; +} +.sf-chip-list:not(.sf-chip) { + flex-wrap: wrap; +} +.sf-chip-list.sf-multi-selection .sf-chip .sf-selectable-icon { + align-items: center; + justify-content: center; + line-height: 1; + display: flex; + height: 20px; + width: 20px; + margin: 0 4px 0 -6px; + overflow: hidden; + transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); +} +.sf-chip-list.sf-multi-selection .sf-chip:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) .sf-selectable-icon { + width: 0; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-chip-icon-wrap .sf-selectable-icon, .sf-chip-list.sf-multi-selection .sf-chip.sf-chip-avatar-wrap .sf-selectable-icon { + display: none; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-chip-avatar-wrap .sf-selectable-icon { + height: 20px; + width: 20px; + margin: 0 4px 0 -6px; + margin-top: 0; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-active .sf-chip-icon, .sf-chip-list.sf-multi-selection .sf-chip.sf-active .sf-chip-avatar { + display: none; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-active.sf-chip-icon-wrap .sf-selectable-icon, .sf-chip-list.sf-multi-selection .sf-chip.sf-active.sf-chip-avatar-wrap .sf-selectable-icon { + display: flex; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-active:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) .sf-selectable-icon { + width: 20px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-chip-avatar, .sf-chip-list.sf-rtl .sf-chip .sf-chip-avatar { + margin: 0 -6px 0 4px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-chip-icon, .sf-chip-list.sf-rtl .sf-chip .sf-chip-icon { + margin: 0 -6px 0 4px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-chip-delete, .sf-chip-list.sf-rtl .sf-chip .sf-chip-delete { + margin: 0 8px 0 -2px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-trailing-icon-url, .sf-chip-list.sf-rtl .sf-chip .sf-trailing-icon-url { + margin: 0 8px 0 -2px; +} +.sf-chip-list.sf-rtl.sf-multi-selection .sf-chip .sf-selectable-icon { + margin: 0 -6px 0 4px; + margin-top: 0; +} +.sf-chip-list.sf-rtl.sf-multi-selection .sf-chip.sf-chip-avatar-wrap .sf-selectable-icon { + margin: 0 -6px 0 4px; + margin-top: 0; +} +.sf-chip-list.sf-selection .sf-chip.sf-active { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled { + background: rgba(var(--color-sf-secondary), 0); + border-image: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + border-width: 1px; +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: none; +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip, .sf-chip-list .sf-chip { + background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip .sf-selectable-icon path, .sf-chip-list .sf-chip .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip .sf-chip-icon, +.sf-chip-list.sf-chip .sf-chip-delete, .sf-chip-list .sf-chip .sf-chip-icon, +.sf-chip-list .sf-chip .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip .sf-chip-icon path, +.sf-chip-list.sf-chip .sf-chip-delete path, .sf-chip-list .sf-chip .sf-chip-icon path, +.sf-chip-list .sf-chip .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip .sf-chip-avatar, .sf-chip-list .sf-chip .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary-container)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:hover, .sf-chip-list .sf-chip:hover { + background: rgba(var(--color-sf-on-surface), 0.05); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip:hover .sf-selectable-icon path, .sf-chip-list .sf-chip:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip:hover .sf-chip-icon, +.sf-chip-list.sf-chip:hover .sf-chip-delete, .sf-chip-list .sf-chip:hover .sf-chip-icon, +.sf-chip-list .sf-chip:hover .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:hover .sf-chip-icon path, +.sf-chip-list.sf-chip:hover .sf-chip-delete path, .sf-chip-list .sf-chip:hover .sf-chip-icon path, +.sf-chip-list .sf-chip:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:hover .sf-chip-avatar, .sf-chip-list .sf-chip:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused, .sf-chip-list .sf-chip.sf-focused { + box-shadow: none; + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.12), rgba(var(--color-sf-primary), 0.12)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-active, .sf-chip-list .sf-chip.sf-active { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active, .sf-chip-list .sf-chip:active { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip:active .sf-selectable-icon path, .sf-chip-list .sf-chip:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active .sf-chip-icon, +.sf-chip-list.sf-chip:active .sf-chip-delete, .sf-chip-list .sf-chip:active .sf-chip-icon, +.sf-chip-list .sf-chip:active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active .sf-chip-icon path, +.sf-chip-list.sf-chip:active .sf-chip-delete path, .sf-chip-list .sf-chip:active .sf-chip-icon path, +.sf-chip-list .sf-chip:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active .sf-chip-avatar, .sf-chip-list .sf-chip:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-disabled, .sf-chip-list .sf-chip.sf-disabled { + background: rgba(var(--color-sf-secondary), 0); + border-image: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); + opacity: 1; + pointer-events: none; +} +.sf-chip-list.sf-chip.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline, .sf-chip-list .sf-chip.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); + border-width: 1px; +} +.sf-chip-list.sf-chip.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline .sf-chip-delete { + color: var(--color-sf-on-surface-variant); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline .sf-chip-delete path { + fill: var(--color-sf-on-surface-variant); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover, .sf-chip-list .sf-chip.sf-outline:hover { + background: rgba(var(--color-sf-on-surface), 0.05); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-outline.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-outline.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:active, .sf-chip-list .sf-chip.sf-outline:active { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary, .sf-chip-list .sf-chip.sf-primary { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-primary .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover, .sf-chip-list .sf-chip.sf-primary:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary:hover .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused, .sf-chip-list .sf-chip.sf-primary.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active, .sf-chip-list .sf-chip.sf-primary:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary:active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled, .sf-chip-list .sf-chip.sf-primary.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline, .sf-chip-list .sf-chip.sf-primary.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover { + background: rgba(var(--color-sf-primary), 0.08); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused { + background: rgba(var(--color-sf-primary), 0.12); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-primary), 0.16); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active { + background: rgba(var(--color-sf-primary), 0.16); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active, .sf-chip-list .sf-chip.sf-primary.sf-outline:active { + background: rgba(var(--color-sf-primary), 0.16); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled { + background: transparent; + border-image: rgba(var(--color-sf-on-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success, .sf-chip-list .sf-chip.sf-success { + background: rgba(var(--color-sf-success)); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success .sf-chip-delete, .sf-chip-list .sf-chip.sf-success .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-success .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover, .sf-chip-list .sf-chip.sf-success:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-success:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success:hover .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused, .sf-chip-list .sf-chip.sf-success.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active, .sf-chip-list .sf-chip.sf-success.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active, .sf-chip-list .sf-chip.sf-success:active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success:active .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success:active .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled, .sf-chip-list .sf-chip.sf-success.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline, .sf-chip-list .sf-chip.sf-success.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover, .sf-chip-list .sf-chip.sf-success.sf-outline:hover { + background: rgba(var(--color-sf-success), 0.08); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused { + background: rgba(var(--color-sf-success), 0.12); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-success), 0.16); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active { + background: rgba(var(--color-sf-success), 0.16); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active, .sf-chip-list .sf-chip.sf-success.sf-outline:active { + background: rgba(var(--color-sf-success), 0.16); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info, .sf-chip-list .sf-chip.sf-info { + background: rgba(var(--color-sf-info)); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info .sf-chip-delete, .sf-chip-list .sf-chip.sf-info .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-info .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover, .sf-chip-list .sf-chip.sf-info:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-info:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info:hover .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused, .sf-chip-list .sf-chip.sf-info.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active, .sf-chip-list .sf-chip.sf-info.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active, .sf-chip-list .sf-chip.sf-info:active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info:active .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info:active .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled, .sf-chip-list .sf-chip.sf-info.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-outline, .sf-chip-list .sf-chip.sf-info.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover, .sf-chip-list .sf-chip.sf-info.sf-outline:hover { + background: rgba(var(--color-sf-info), 0.08); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused { + background: rgba(var(--color-sf-info), 0.12); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-info), 0.16); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active { + background: rgba(var(--color-sf-info), 0.16); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active, .sf-chip-list .sf-chip.sf-info.sf-outline:active { + background: rgba(var(--color-sf-info), 0.12); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled { + background: transparent; + border-image: rgba(var(--color-sf-on-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning, .sf-chip-list .sf-chip.sf-warning { + background: rgba(var(--color-sf-warning)); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-warning .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover, .sf-chip-list .sf-chip.sf-warning:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning:hover .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused, .sf-chip-list .sf-chip.sf-warning.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active, .sf-chip-list .sf-chip.sf-warning:active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning:active .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning:active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled, .sf-chip-list .sf-chip.sf-warning.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline, .sf-chip-list .sf-chip.sf-warning.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover { + background: rgba(var(--color-sf-warning), 0.08); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused { + background: rgba(var(--color-sf-warning), 0.12); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-warning), 0.16); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active { + background: rgba(var(--color-sf-warning), 0.16); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active, .sf-chip-list .sf-chip.sf-warning.sf-outline:active { + background: rgba(var(--color-sf-warning), 0.16); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger, .sf-chip-list .sf-chip.sf-danger { + background: rgba(var(--color-sf-error)); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-danger .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover, .sf-chip-list .sf-chip.sf-danger:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger:hover .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused, .sf-chip-list .sf-chip.sf-danger.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active, .sf-chip-list .sf-chip.sf-danger:active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger:active .sf-chip-delete { + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger:active .sf-chip-delete path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled, .sf-chip-list .sf-chip.sf-danger.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline, .sf-chip-list .sf-chip.sf-danger.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover { + background: rgba(var(--color-sf-error), 0.08); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused { + background: rgba(var(--color-sf-error), 0.12); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active { + background: rgba(var(--color-sf-error), 0.16); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active { + background: rgba(var(--color-sf-error), 0.16); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active, .sf-chip-list .sf-chip.sf-danger.sf-outline:active { + background: rgba(var(--color-sf-error), 0.16); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled { + background: transparent; + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} \ No newline at end of file diff --git a/components/buttons/styles/chips/material3-dark.scss b/components/buttons/styles/chips/material3-dark.scss new file mode 100644 index 0000000..bc1eba0 --- /dev/null +++ b/components/buttons/styles/chips/material3-dark.scss @@ -0,0 +1,3 @@ +@import 'react-base/styles/definition/material3-dark.scss'; +@import 'material3-dark-definition.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/chips/material3.css b/components/buttons/styles/chips/material3.css new file mode 100644 index 0000000..a21e5d5 --- /dev/null +++ b/components/buttons/styles/chips/material3.css @@ -0,0 +1,2369 @@ +.sf-dark-mode { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 208, 188, 255; + --color-sf-primary-container: 79, 55, 139; + --color-sf-secondary: 204, 194, 220; + --color-sf-secondary-container: 74, 68, 88; + --color-sf-tertiary: 239, 184, 200; + --color-sf-tertiary-container: 99, 59, 72; + --color-sf-surface: 28, 27, 31; + --color-sf-surface-variant: 73, 69, 79; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 55, 30, 115; + --color-sf-on-primary-container: 234, 221, 255; + --color-sf-on-secondary: 51, 45, 65; + --color-sf-on-secondary-container: 232, 222, 248; + --color-sf-on-tertiary: 73, 37, 50; + --color-sf-on-tertiary-containe: 255, 216, 228; + --color-sf-on-surface: 230, 225, 229; + --color-sf-on-surface-variant: 202, 196, 208; + --color-sf-on-background: 230, 225, 229; + --color-sf-outline: 147, 143, 153; + --color-sf-outline-variant: 68, 71, 70; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 208, 188, 255; + --color-sf-inverse-surface: 230, 225, 229; + --color-sf-inverse-on-surface: 49, 48, 51; + --color-sf-inverse-primary: 103, 80, 164; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 242, 184, 181; + --color-sf-error-container: 140, 29, 24; + --color-sf-on-error: 96, 20, 16; + --color-sf-on-error-container: 249, 222, 220; + --color-sf-success: 83, 202, 23; + --color-sf-success-container: 22, 62, 2; + --color-sf-on-success: 13, 39, 0; + --color-sf-on-success-container: 183, 250, 150; + --color-sf-info: 71, 172, 251; + --color-sf-info-container: 0, 67, 120; + --color-sf-on-info: 0, 51, 91; + --color-sf-on-info-container: 173, 219, 255; + --color-sf-warning: 245, 180, 130; + --color-sf-warning-container: 123, 65, 0; + --color-sf-on-warning: 99, 52, 0; + --color-sf-on-warning-container: 255, 220, 193; + --color-sf-spreadsheet-gridline: 231, 224, 236; + --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff; + --color-sf-success-text: 0, 0, 0; + --color-sf-warning-text: 0, 0, 0; + --color-sf-info-text: 0, 0, 0; + --color-sf-danger-text: 0, 0, 0; + --color-sf-diagram-palette-background: var(--color-sf-inverse-surface); + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary); +} +.sf-chip-list { + display: flex; + padding: 0; +} +.sf-chip-list.sf-chip, +.sf-chip-list .sf-chip { + -webkit-tap-highlight-color: transparent; + border: 1px solid; + border-radius: 12px; + font-size: 11px; + margin: 4px; + align-items: center; + justify-content: center; + line-height: 14px; + box-shadow: none; + box-sizing: border-box; + cursor: pointer; + display: inline-flex; + font-weight: 500; + height: 24px; + outline: none; + overflow: hidden; + padding: 0 8px; + position: relative; + transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); + user-select: none; +} +.sf-chip-list.sf-chip .sf-chip-avatar, +.sf-chip-list .sf-chip .sf-chip-avatar { + background-size: cover; + display: flex; + overflow: hidden; + height: 20px; + width: 20px; + border-radius: 12px; + font-size: 12px; + margin: 0 4px 0 -6px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-chip-avatar-wrap, .sf-chip-list.sf-chip.sf-chip-avatar-wrap, +.sf-chip-list .sf-chip .sf-chip-avatar-wrap, +.sf-chip-list .sf-chip.sf-chip-avatar-wrap { + border-radius: 12px; +} +.sf-chip-list.sf-chip .sf-chip-icon, +.sf-chip-list .sf-chip .sf-chip-icon { + background-size: cover; + display: flex; + overflow: hidden; + height: 20px; + width: 20px; + border-radius: 50%; + font-size: 14px; + margin: 0 4px 0 -6px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-chip-text, +.sf-chip-list .sf-chip .sf-chip-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.sf-chip-list.sf-chip .sf-chip-delete, +.sf-chip-list .sf-chip .sf-chip-delete { + background-size: cover; + display: flex; + overflow: hidden; + height: 18px; + width: 14px; + border-radius: 50%; + font-size: 14px; + margin: 0 -2px 0 8px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-image-url, +.sf-chip-list .sf-chip .sf-image-url { + background-size: cover; + display: flex; + overflow: hidden; + height: 20px; + width: 20px; + border-radius: 50%; + font-size: 14px; + margin: 0 4px 0 -6px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-image-url .sf-leading-image, +.sf-chip-list .sf-chip .sf-image-url .sf-leading-image { + width: 100%; + height: 100%; + object-fit: cover; +} +.sf-chip-list.sf-chip .sf-trailing-icon-url, +.sf-chip-list .sf-chip .sf-trailing-icon-url { + background-size: cover; + display: flex; + overflow: hidden; + height: 18px; + width: 18px; + border-radius: 50%; + font-size: 14px; + margin: 0 -2px 0 8px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-trailing-icon-url .sf-trailing-image, +.sf-chip-list .sf-chip .sf-trailing-icon-url .sf-trailing-image { + width: 100%; + height: 100%; + object-fit: cover; +} +.sf-chip-list.sf-chip .sf-chip-template, +.sf-chip-list .sf-chip .sf-chip-template { + display: inline-flex; +} +.sf-chip-list:not(.sf-chip) { + flex-wrap: wrap; +} +.sf-chip-list.sf-multi-selection .sf-chip .sf-selectable-icon { + align-items: center; + justify-content: center; + line-height: 1; + display: flex; + height: 20px; + width: 20px; + margin: 0 4px 0 -6px; + overflow: hidden; + transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); +} +.sf-chip-list.sf-multi-selection .sf-chip:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) .sf-selectable-icon { + width: 0; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-chip-icon-wrap .sf-selectable-icon, .sf-chip-list.sf-multi-selection .sf-chip.sf-chip-avatar-wrap .sf-selectable-icon { + display: none; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-chip-avatar-wrap .sf-selectable-icon { + height: 20px; + width: 20px; + margin: 0 4px 0 -6px; + margin-top: 0; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-active .sf-chip-icon, .sf-chip-list.sf-multi-selection .sf-chip.sf-active .sf-chip-avatar { + display: none; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-active.sf-chip-icon-wrap .sf-selectable-icon, .sf-chip-list.sf-multi-selection .sf-chip.sf-active.sf-chip-avatar-wrap .sf-selectable-icon { + display: flex; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-active:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) .sf-selectable-icon { + width: 20px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-chip-avatar, .sf-chip-list.sf-rtl .sf-chip .sf-chip-avatar { + margin: 0 -6px 0 4px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-chip-icon, .sf-chip-list.sf-rtl .sf-chip .sf-chip-icon { + margin: 0 -6px 0 4px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-chip-delete, .sf-chip-list.sf-rtl .sf-chip .sf-chip-delete { + margin: 0 8px 0 -2px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-trailing-icon-url, .sf-chip-list.sf-rtl .sf-chip .sf-trailing-icon-url { + margin: 0 8px 0 -2px; +} +.sf-chip-list.sf-rtl.sf-multi-selection .sf-chip .sf-selectable-icon { + margin: 0 -6px 0 4px; + margin-top: 0; +} +.sf-chip-list.sf-rtl.sf-multi-selection .sf-chip.sf-chip-avatar-wrap .sf-selectable-icon { + margin: 0 -6px 0 4px; + margin-top: 0; +} +.sf-chip-list.sf-selection .sf-chip.sf-active { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled { + background: rgba(var(--color-sf-secondary), 0); + border-image: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + border-width: 1px; +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: none; +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip, .sf-chip-list .sf-chip { + background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip .sf-selectable-icon path, .sf-chip-list .sf-chip .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip .sf-chip-icon, +.sf-chip-list.sf-chip .sf-chip-delete, .sf-chip-list .sf-chip .sf-chip-icon, +.sf-chip-list .sf-chip .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip .sf-chip-icon path, +.sf-chip-list.sf-chip .sf-chip-delete path, .sf-chip-list .sf-chip .sf-chip-icon path, +.sf-chip-list .sf-chip .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip .sf-chip-avatar, .sf-chip-list .sf-chip .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary-container)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:hover, .sf-chip-list .sf-chip:hover { + background: rgba(var(--color-sf-on-surface), 0.05); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip:hover .sf-selectable-icon path, .sf-chip-list .sf-chip:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip:hover .sf-chip-icon, +.sf-chip-list.sf-chip:hover .sf-chip-delete, .sf-chip-list .sf-chip:hover .sf-chip-icon, +.sf-chip-list .sf-chip:hover .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:hover .sf-chip-icon path, +.sf-chip-list.sf-chip:hover .sf-chip-delete path, .sf-chip-list .sf-chip:hover .sf-chip-icon path, +.sf-chip-list .sf-chip:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:hover .sf-chip-avatar, .sf-chip-list .sf-chip:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused, .sf-chip-list .sf-chip.sf-focused { + box-shadow: none; + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.12), rgba(var(--color-sf-primary), 0.12)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-active, .sf-chip-list .sf-chip.sf-active { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active, .sf-chip-list .sf-chip:active { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip:active .sf-selectable-icon path, .sf-chip-list .sf-chip:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active .sf-chip-icon, +.sf-chip-list.sf-chip:active .sf-chip-delete, .sf-chip-list .sf-chip:active .sf-chip-icon, +.sf-chip-list .sf-chip:active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active .sf-chip-icon path, +.sf-chip-list.sf-chip:active .sf-chip-delete path, .sf-chip-list .sf-chip:active .sf-chip-icon path, +.sf-chip-list .sf-chip:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active .sf-chip-avatar, .sf-chip-list .sf-chip:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-disabled, .sf-chip-list .sf-chip.sf-disabled { + background: rgba(var(--color-sf-secondary), 0); + border-image: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); + opacity: 1; + pointer-events: none; +} +.sf-chip-list.sf-chip.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline, .sf-chip-list .sf-chip.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); + border-width: 1px; +} +.sf-chip-list.sf-chip.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline .sf-chip-delete { + color: var(--color-sf-on-surface-variant); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline .sf-chip-delete path { + fill: var(--color-sf-on-surface-variant); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover, .sf-chip-list .sf-chip.sf-outline:hover { + background: rgba(var(--color-sf-on-surface), 0.05); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-outline.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-outline.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:active, .sf-chip-list .sf-chip.sf-outline:active { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary, .sf-chip-list .sf-chip.sf-primary { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-primary .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover, .sf-chip-list .sf-chip.sf-primary:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary:hover .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused, .sf-chip-list .sf-chip.sf-primary.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active, .sf-chip-list .sf-chip.sf-primary:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary:active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled, .sf-chip-list .sf-chip.sf-primary.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline, .sf-chip-list .sf-chip.sf-primary.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover { + background: rgba(var(--color-sf-primary), 0.08); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused { + background: rgba(var(--color-sf-primary), 0.12); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-primary), 0.16); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active { + background: rgba(var(--color-sf-primary), 0.16); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active, .sf-chip-list .sf-chip.sf-primary.sf-outline:active { + background: rgba(var(--color-sf-primary), 0.16); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled { + background: transparent; + border-image: rgba(var(--color-sf-on-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success, .sf-chip-list .sf-chip.sf-success { + background: rgba(var(--color-sf-success)); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success .sf-chip-delete, .sf-chip-list .sf-chip.sf-success .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-success .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover, .sf-chip-list .sf-chip.sf-success:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-success:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success:hover .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused, .sf-chip-list .sf-chip.sf-success.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active, .sf-chip-list .sf-chip.sf-success.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active, .sf-chip-list .sf-chip.sf-success:active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success:active .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success:active .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled, .sf-chip-list .sf-chip.sf-success.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline, .sf-chip-list .sf-chip.sf-success.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover, .sf-chip-list .sf-chip.sf-success.sf-outline:hover { + background: rgba(var(--color-sf-success), 0.08); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused { + background: rgba(var(--color-sf-success), 0.12); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-success), 0.16); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active { + background: rgba(var(--color-sf-success), 0.16); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active, .sf-chip-list .sf-chip.sf-success.sf-outline:active { + background: rgba(var(--color-sf-success), 0.16); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info, .sf-chip-list .sf-chip.sf-info { + background: rgba(var(--color-sf-info)); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info .sf-chip-delete, .sf-chip-list .sf-chip.sf-info .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-info .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover, .sf-chip-list .sf-chip.sf-info:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-info:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info:hover .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused, .sf-chip-list .sf-chip.sf-info.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active, .sf-chip-list .sf-chip.sf-info.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active, .sf-chip-list .sf-chip.sf-info:active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info:active .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info:active .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled, .sf-chip-list .sf-chip.sf-info.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-outline, .sf-chip-list .sf-chip.sf-info.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover, .sf-chip-list .sf-chip.sf-info.sf-outline:hover { + background: rgba(var(--color-sf-info), 0.08); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused { + background: rgba(var(--color-sf-info), 0.12); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-info), 0.16); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active { + background: rgba(var(--color-sf-info), 0.16); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active, .sf-chip-list .sf-chip.sf-info.sf-outline:active { + background: rgba(var(--color-sf-info), 0.12); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled { + background: transparent; + border-image: rgba(var(--color-sf-on-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning, .sf-chip-list .sf-chip.sf-warning { + background: rgba(var(--color-sf-warning)); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-warning .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover, .sf-chip-list .sf-chip.sf-warning:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning:hover .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused, .sf-chip-list .sf-chip.sf-warning.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active, .sf-chip-list .sf-chip.sf-warning:active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning:active .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning:active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled, .sf-chip-list .sf-chip.sf-warning.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline, .sf-chip-list .sf-chip.sf-warning.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover { + background: rgba(var(--color-sf-warning), 0.08); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused { + background: rgba(var(--color-sf-warning), 0.12); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-warning), 0.16); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active { + background: rgba(var(--color-sf-warning), 0.16); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active, .sf-chip-list .sf-chip.sf-warning.sf-outline:active { + background: rgba(var(--color-sf-warning), 0.16); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger, .sf-chip-list .sf-chip.sf-danger { + background: rgba(var(--color-sf-error)); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-danger .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover, .sf-chip-list .sf-chip.sf-danger:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger:hover .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused, .sf-chip-list .sf-chip.sf-danger.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active, .sf-chip-list .sf-chip.sf-danger:active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger:active .sf-chip-delete { + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger:active .sf-chip-delete path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled, .sf-chip-list .sf-chip.sf-danger.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline, .sf-chip-list .sf-chip.sf-danger.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover { + background: rgba(var(--color-sf-error), 0.08); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused { + background: rgba(var(--color-sf-error), 0.12); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active { + background: rgba(var(--color-sf-error), 0.16); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active { + background: rgba(var(--color-sf-error), 0.16); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active, .sf-chip-list .sf-chip.sf-danger.sf-outline:active { + background: rgba(var(--color-sf-error), 0.16); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled { + background: transparent; + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} \ No newline at end of file diff --git a/components/buttons/styles/chips/material3.scss b/components/buttons/styles/chips/material3.scss new file mode 100644 index 0000000..3130aa3 --- /dev/null +++ b/components/buttons/styles/chips/material3.scss @@ -0,0 +1,3 @@ +@import 'react-base/styles/definition/material3.scss'; +@import 'material3-definition.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/floating-action-button/_all.scss b/components/buttons/styles/floating-action-button/_all.scss new file mode 100644 index 0000000..a0fe77d --- /dev/null +++ b/components/buttons/styles/floating-action-button/_all.scss @@ -0,0 +1,2 @@ +@import 'layout.scss'; +@import 'theme.scss'; diff --git a/components/buttons/styles/floating-action-button/_layout.scss b/components/buttons/styles/floating-action-button/_layout.scss new file mode 100644 index 0000000..92a0668 --- /dev/null +++ b/components/buttons/styles/floating-action-button/_layout.scss @@ -0,0 +1,140 @@ +@mixin fab-button-styles($border-radius, $min-height, $min-width, $padding, $icon-font-size) { + border-radius: $border-radius; + min-height: $min-height; + min-width: $min-width; + padding: $padding; + + &.sf-icon-btn { + padding: 0; + } + + .sf-btn-icon { + font-size: $icon-font-size; + } +} + +@include export-module('floating-action-button-layout') { + .sf-fab.sf-btn { + align-items: center; + border-radius: $fab-border-radius; + display: inline-flex; + min-height: $fab-min-height; + min-width: $fab-min-width; + padding: $fab-padding; + position: absolute; + z-index: 100000; + + .sf-btn-icon { + margin-top: 0; + font-size: $fab-icon-font-size; + } + + &.sf-icon-btn { + padding: 0; + } + + &.sf-fab-fixed { + position: fixed; + } + + &.sf-fab-top { + top: $fab-offset; + &.sf-fab-middle { + top: 50%; + transform: translateY(-50%); + &.sf-fab-left.sf-fab-center { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } + } + + &.sf-fab-bottom { + bottom: $fab-offset; + } + + &.sf-fab-left { + left: $fab-offset; + &.sf-fab-center { + left: 50%; + transform: translateX(-50%); + } + } + + &.sf-fab-right { + right: $fab-offset; + } + } + + .sf-rtl { + &.sf-fab.sf-btn { + &.sf-fab-top { + top: $fab-offset; + &.sf-fab-middle { + top: 50%; + transform: translateY(-50%); + &.sf-fab-right.sf-fab-center { + right: 50%; + top: 50%; + transform: translate(50%, -50%); + } + } + } + + &.sf-fab-bottom { + bottom: $fab-offset; + } + + &.sf-fab-right { + right: $fab-offset; + &.sf-fab-center { + right: 50%; + transform: translateX(50%); + } + } + + &.sf-fab-left { + left: $fab-offset; + } + } + } + + .sf-fab-hidden { + visibility: hidden; + } + + .sf-small.sf-fab.sf-btn, + .sf-small .sf-fab.sf-btn { + @include fab-button-styles($fab-small-border-radius, $fab-small-min-height, $fab-small-min-width, $fab-small-padding, $fab-small-icon-font-size); + } +} + + +@mixin fab-button-styles($border-radius, $min-height, $min-width, $padding, $icon-font-size) { + border-radius: $border-radius; + min-height: $min-height; + min-width: $min-width; + padding: $padding; + + &.sf-icon-btn { + padding: 0; + } + + .sf-btn-icon { + font-size: $icon-font-size; + } +} + +@include export-module('floating-action-button-bigger') { + .sf-large.sf-fab.sf-btn, + .sf-large .sf-fab.sf-btn { + @include fab-button-styles($fab-bigger-border-radius, $fab-bigger-min-height, $fab-bigger-min-width, $fab-bigger-padding, $fab-bigger-icon-font-size); + } + .sf-large.sf-small.sf-fab.sf-btn, + .sf-large.sf-small .sf-fab.sf-btn, + .sf-large .sf-small.sf-fab.sf-btn, + .sf-small .sf-large.sf-fab.sf-btn { + @include fab-button-styles($fab-bigger-small-border-radius, $fab-bigger-small-min-height, $fab-bigger-small-min-width, $fab-bigger-small-padding, $fab-bigger-small-icon-font-size); + } +} diff --git a/components/buttons/styles/floating-action-button/_material3-dark-definition.scss b/components/buttons/styles/floating-action-button/_material3-dark-definition.scss new file mode 100644 index 0000000..356e259 --- /dev/null +++ b/components/buttons/styles/floating-action-button/_material3-dark-definition.scss @@ -0,0 +1 @@ +@import './material3-definition.scss'; diff --git a/components/buttons/styles/floating-action-button/_material3-definition.scss b/components/buttons/styles/floating-action-button/_material3-definition.scss new file mode 100644 index 0000000..101e88b --- /dev/null +++ b/components/buttons/styles/floating-action-button/_material3-definition.scss @@ -0,0 +1,27 @@ +$fab-offset: 16px !default; + +$fab-border-radius: 12px !default; +$fab-min-height: 40px !default; +$fab-min-width: 40px !default; +$fab-padding: 0 16px !default; +$fab-icon-font-size: 14px !default; + +$fab-small-border-radius: 8px !default; +$fab-small-min-height: 32px !default; +$fab-small-min-width: 32px !default; +$fab-small-padding: 0 12px !default; +$fab-small-icon-font-size: 12px !default; + +$fab-bigger-border-radius: 16px !default; +$fab-bigger-min-height: 56px !default; +$fab-bigger-min-width: 56px !default; +$fab-bigger-padding: 0 19px !default; +$fab-bigger-icon-font-size: 14px !default; + +$fab-bigger-small-border-radius: $fab-bigger-border-radius !default; +$fab-bigger-small-min-height: 48px !default; +$fab-bigger-small-min-width: 48px !default; +$fab-bigger-small-padding: 0 19px !default; +$fab-bigger-small-icon-font-size: 14px !default; + +$fab-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12) !default; diff --git a/components/buttons/styles/floating-action-button/_theme.scss b/components/buttons/styles/floating-action-button/_theme.scss new file mode 100644 index 0000000..4af4f67 --- /dev/null +++ b/components/buttons/styles/floating-action-button/_theme.scss @@ -0,0 +1,24 @@ +@include export-module('floating-action-button-theme') { + .sf-fab.sf-btn { + box-shadow: $fab-box-shadow; + + &:hover:not(:focus), + &:active, + &.sf-active, + &:disabled { + box-shadow: $fab-box-shadow; + } + + &:focus { + @if ($skin-name != 'tailwind3' and $skin-name != 'bootstrap5.3') { + box-shadow: $fab-box-shadow; + } + } + } +} + +@if $skin-name == 'tailwind3' { + .sf-fab.sf-btn:focus-visible { + box-shadow: $fab-focus-box-shadow !important; /* stylelint-disable-line declaration-no-important */ + } +} diff --git a/components/buttons/styles/floating-action-button/material3-dark.css b/components/buttons/styles/floating-action-button/material3-dark.css new file mode 100644 index 0000000..00d9243 --- /dev/null +++ b/components/buttons/styles/floating-action-button/material3-dark.css @@ -0,0 +1,133 @@ +.sf-fab.sf-btn { + align-items: center; + border-radius: 12px; + display: inline-flex; + min-height: 40px; + min-width: 40px; + padding: 0 16px; + position: absolute; + z-index: 100000; +} +.sf-fab.sf-btn .sf-btn-icon { + margin-top: 0; + font-size: 14px; +} +.sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-fab.sf-btn.sf-fab-fixed { + position: fixed; +} +.sf-fab.sf-btn.sf-fab-top { + top: 16px; +} +.sf-fab.sf-btn.sf-fab-top.sf-fab-middle { + top: 50%; + transform: translateY(-50%); +} +.sf-fab.sf-btn.sf-fab-top.sf-fab-middle.sf-fab-left.sf-fab-center { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.sf-fab.sf-btn.sf-fab-bottom { + bottom: 16px; +} +.sf-fab.sf-btn.sf-fab-left { + left: 16px; +} +.sf-fab.sf-btn.sf-fab-left.sf-fab-center { + left: 50%; + transform: translateX(-50%); +} +.sf-fab.sf-btn.sf-fab-right { + right: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-top { + top: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-top.sf-fab-middle { + top: 50%; + transform: translateY(-50%); +} +.sf-rtl.sf-fab.sf-btn.sf-fab-top.sf-fab-middle.sf-fab-right.sf-fab-center { + right: 50%; + top: 50%; + transform: translate(50%, -50%); +} +.sf-rtl.sf-fab.sf-btn.sf-fab-bottom { + bottom: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-right { + right: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-right.sf-fab-center { + right: 50%; + transform: translateX(50%); +} +.sf-rtl.sf-fab.sf-btn.sf-fab-left { + left: 16px; +} +.sf-fab-hidden { + visibility: hidden; +} +.sf-small.sf-fab.sf-btn, +.sf-small .sf-fab.sf-btn { + border-radius: 8px; + min-height: 32px; + min-width: 32px; + padding: 0 12px; +} +.sf-small.sf-fab.sf-btn.sf-icon-btn, +.sf-small .sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-small.sf-fab.sf-btn .sf-btn-icon, +.sf-small .sf-fab.sf-btn .sf-btn-icon { + font-size: 12px; +} +.sf-large.sf-fab.sf-btn, +.sf-large .sf-fab.sf-btn { + border-radius: 16px; + min-height: 56px; + min-width: 56px; + padding: 0 19px; +} +.sf-large.sf-fab.sf-btn.sf-icon-btn, +.sf-large .sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-large.sf-fab.sf-btn .sf-btn-icon, +.sf-large .sf-fab.sf-btn .sf-btn-icon { + font-size: 14px; +} +.sf-large.sf-small.sf-fab.sf-btn, +.sf-large.sf-small .sf-fab.sf-btn, +.sf-large .sf-small.sf-fab.sf-btn, +.sf-small .sf-large.sf-fab.sf-btn { + border-radius: 16px; + min-height: 48px; + min-width: 48px; + padding: 0 19px; +} +.sf-large.sf-small.sf-fab.sf-btn.sf-icon-btn, +.sf-large.sf-small .sf-fab.sf-btn.sf-icon-btn, +.sf-large .sf-small.sf-fab.sf-btn.sf-icon-btn, +.sf-small .sf-large.sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-large.sf-small.sf-fab.sf-btn .sf-btn-icon, +.sf-large.sf-small .sf-fab.sf-btn .sf-btn-icon, +.sf-large .sf-small.sf-fab.sf-btn .sf-btn-icon, +.sf-small .sf-large.sf-fab.sf-btn .sf-btn-icon { + font-size: 14px; +} +.sf-fab.sf-btn { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12); +} +.sf-fab.sf-btn:hover:not(:focus), .sf-fab.sf-btn:active, .sf-fab.sf-btn.sf-active, .sf-fab.sf-btn:disabled { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12); +} +.sf-fab.sf-btn:focus { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12); +} \ No newline at end of file diff --git a/components/buttons/styles/floating-action-button/material3-dark.scss b/components/buttons/styles/floating-action-button/material3-dark.scss new file mode 100644 index 0000000..c9c5037 --- /dev/null +++ b/components/buttons/styles/floating-action-button/material3-dark.scss @@ -0,0 +1,4 @@ +@import 'react-base/styles/definition/material3-dark.scss'; +@import '../button/material3-dark-definition.scss'; +@import 'material3-dark-definition.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/floating-action-button/material3.css b/components/buttons/styles/floating-action-button/material3.css new file mode 100644 index 0000000..369888c --- /dev/null +++ b/components/buttons/styles/floating-action-button/material3.css @@ -0,0 +1,187 @@ +.sf-dark-mode { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 208, 188, 255; + --color-sf-primary-container: 79, 55, 139; + --color-sf-secondary: 204, 194, 220; + --color-sf-secondary-container: 74, 68, 88; + --color-sf-tertiary: 239, 184, 200; + --color-sf-tertiary-container: 99, 59, 72; + --color-sf-surface: 28, 27, 31; + --color-sf-surface-variant: 73, 69, 79; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 55, 30, 115; + --color-sf-on-primary-container: 234, 221, 255; + --color-sf-on-secondary: 51, 45, 65; + --color-sf-on-secondary-container: 232, 222, 248; + --color-sf-on-tertiary: 73, 37, 50; + --color-sf-on-tertiary-containe: 255, 216, 228; + --color-sf-on-surface: 230, 225, 229; + --color-sf-on-surface-variant: 202, 196, 208; + --color-sf-on-background: 230, 225, 229; + --color-sf-outline: 147, 143, 153; + --color-sf-outline-variant: 68, 71, 70; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 208, 188, 255; + --color-sf-inverse-surface: 230, 225, 229; + --color-sf-inverse-on-surface: 49, 48, 51; + --color-sf-inverse-primary: 103, 80, 164; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 242, 184, 181; + --color-sf-error-container: 140, 29, 24; + --color-sf-on-error: 96, 20, 16; + --color-sf-on-error-container: 249, 222, 220; + --color-sf-success: 83, 202, 23; + --color-sf-success-container: 22, 62, 2; + --color-sf-on-success: 13, 39, 0; + --color-sf-on-success-container: 183, 250, 150; + --color-sf-info: 71, 172, 251; + --color-sf-info-container: 0, 67, 120; + --color-sf-on-info: 0, 51, 91; + --color-sf-on-info-container: 173, 219, 255; + --color-sf-warning: 245, 180, 130; + --color-sf-warning-container: 123, 65, 0; + --color-sf-on-warning: 99, 52, 0; + --color-sf-on-warning-container: 255, 220, 193; + --color-sf-spreadsheet-gridline: 231, 224, 236; + --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff; + --color-sf-success-text: 0, 0, 0; + --color-sf-warning-text: 0, 0, 0; + --color-sf-info-text: 0, 0, 0; + --color-sf-danger-text: 0, 0, 0; + --color-sf-diagram-palette-background: var(--color-sf-inverse-surface); + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary); +} +.sf-fab.sf-btn { + align-items: center; + border-radius: 12px; + display: inline-flex; + min-height: 40px; + min-width: 40px; + padding: 0 16px; + position: absolute; + z-index: 100000; +} +.sf-fab.sf-btn .sf-btn-icon { + margin-top: 0; + font-size: 14px; +} +.sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-fab.sf-btn.sf-fab-fixed { + position: fixed; +} +.sf-fab.sf-btn.sf-fab-top { + top: 16px; +} +.sf-fab.sf-btn.sf-fab-top.sf-fab-middle { + top: 50%; + transform: translateY(-50%); +} +.sf-fab.sf-btn.sf-fab-top.sf-fab-middle.sf-fab-left.sf-fab-center { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.sf-fab.sf-btn.sf-fab-bottom { + bottom: 16px; +} +.sf-fab.sf-btn.sf-fab-left { + left: 16px; +} +.sf-fab.sf-btn.sf-fab-left.sf-fab-center { + left: 50%; + transform: translateX(-50%); +} +.sf-fab.sf-btn.sf-fab-right { + right: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-top { + top: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-top.sf-fab-middle { + top: 50%; + transform: translateY(-50%); +} +.sf-rtl.sf-fab.sf-btn.sf-fab-top.sf-fab-middle.sf-fab-right.sf-fab-center { + right: 50%; + top: 50%; + transform: translate(50%, -50%); +} +.sf-rtl.sf-fab.sf-btn.sf-fab-bottom { + bottom: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-right { + right: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-right.sf-fab-center { + right: 50%; + transform: translateX(50%); +} +.sf-rtl.sf-fab.sf-btn.sf-fab-left { + left: 16px; +} +.sf-fab-hidden { + visibility: hidden; +} +.sf-small.sf-fab.sf-btn, +.sf-small .sf-fab.sf-btn { + border-radius: 8px; + min-height: 32px; + min-width: 32px; + padding: 0 12px; +} +.sf-small.sf-fab.sf-btn.sf-icon-btn, +.sf-small .sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-small.sf-fab.sf-btn .sf-btn-icon, +.sf-small .sf-fab.sf-btn .sf-btn-icon { + font-size: 12px; +} +.sf-large.sf-fab.sf-btn, +.sf-large .sf-fab.sf-btn { + border-radius: 16px; + min-height: 56px; + min-width: 56px; + padding: 0 19px; +} +.sf-large.sf-fab.sf-btn.sf-icon-btn, +.sf-large .sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-large.sf-fab.sf-btn .sf-btn-icon, +.sf-large .sf-fab.sf-btn .sf-btn-icon { + font-size: 14px; +} +.sf-large.sf-small.sf-fab.sf-btn, +.sf-large.sf-small .sf-fab.sf-btn, +.sf-large .sf-small.sf-fab.sf-btn, +.sf-small .sf-large.sf-fab.sf-btn { + border-radius: 16px; + min-height: 48px; + min-width: 48px; + padding: 0 19px; +} +.sf-large.sf-small.sf-fab.sf-btn.sf-icon-btn, +.sf-large.sf-small .sf-fab.sf-btn.sf-icon-btn, +.sf-large .sf-small.sf-fab.sf-btn.sf-icon-btn, +.sf-small .sf-large.sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-large.sf-small.sf-fab.sf-btn .sf-btn-icon, +.sf-large.sf-small .sf-fab.sf-btn .sf-btn-icon, +.sf-large .sf-small.sf-fab.sf-btn .sf-btn-icon, +.sf-small .sf-large.sf-fab.sf-btn .sf-btn-icon { + font-size: 14px; +} +.sf-fab.sf-btn { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12); +} +.sf-fab.sf-btn:hover:not(:focus), .sf-fab.sf-btn:active, .sf-fab.sf-btn.sf-active, .sf-fab.sf-btn:disabled { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12); +} +.sf-fab.sf-btn:focus { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12); +} \ No newline at end of file diff --git a/components/buttons/styles/floating-action-button/material3.scss b/components/buttons/styles/floating-action-button/material3.scss new file mode 100644 index 0000000..5d7deb4 --- /dev/null +++ b/components/buttons/styles/floating-action-button/material3.scss @@ -0,0 +1,4 @@ +@import 'react-base/styles/definition/material3.scss'; +@import '../button/material3-definition.scss'; +@import 'material3-definition.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/material3-dark.css b/components/buttons/styles/material3-dark.css new file mode 100644 index 0000000..237eaaa --- /dev/null +++ b/components/buttons/styles/material3-dark.css @@ -0,0 +1,5692 @@ +.sf-btn, +.sf-css.sf-btn { + /* stylelint-disable property-no-vendor-prefix */ + position: relative; + -webkit-font-smoothing: antialiased; + border: 1px solid; + border-radius: 4px; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; + justify-content: center; + line-height: 1; + outline: none; + padding: 8px 16px; + text-align: center; + text-decoration: none; + text-transform: none; + user-select: none; + vertical-align: middle; + white-space: nowrap; + letter-spacing: 0.15px; +} +.sf-btn:disabled, +.sf-css.sf-btn:disabled { + cursor: default; +} +.sf-btn:hover, .sf-btn:focus, +.sf-css.sf-btn:hover, +.sf-css.sf-btn:focus { + text-decoration: none; +} +.sf-btn::-moz-focus-inner, +.sf-css.sf-btn::-moz-focus-inner { + border: 0; + padding: 0; +} +.sf-btn .sf-btn-icon, +.sf-css.sf-btn .sf-btn-icon { + display: inline-block; + font-size: 18px; + margin-top: 0; + vertical-align: middle; + width: 1em; + line-height: 1px; +} +.sf-btn .sf-btn-icon.sf-icon-left, +.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.5em; + width: 2em; +} +.sf-btn .sf-btn-icon.sf-icon-right, +.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + width: 2em; + margin-right: -0.5em; +} +.sf-btn .sf-btn-icon.sf-icon-top, +.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 8px; + display: block; + margin-top: 0; + width: auto; +} +.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 8px; + display: block; + margin-top: 0; + width: auto; +} +.sf-btn .sf-btn-icon path, +.sf-css.sf-btn .sf-btn-icon path { + fill-rule: evenodd; + clip-rule: evenodd; +} +.sf-btn.sf-icon-btn, +.sf-css.sf-btn.sf-icon-btn { + padding: 7px 7px; + border-radius: 4px; +} +.sf-btn.sf-top-icon-btn, .sf-btn.sf-bottom-icon-btn, +.sf-css.sf-btn.sf-top-icon-btn, +.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 12px 12px; +} +.sf-btn.sf-round, +.sf-css.sf-btn.sf-round { + border-radius: 50%; + height: 32px; + line-height: 1; + padding: 0; + width: 32px; +} +.sf-btn.sf-round .sf-btn-icon, +.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 1.5em; + margin-top: 0; + width: auto; +} +.sf-btn.sf-rounded, +.sf-css.sf-btn.sf-rounded { + border-radius: 40px; +} +.sf-btn.sf-round-corner, +.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 8px 16px; +} +.sf-btn.sf-rtl .sf-icon-right, +.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.5em; + margin-right: 0; +} +.sf-btn.sf-rtl .sf-icon-left, +.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.5em; +} +.sf-btn.sf-flat, +.sf-css.sf-btn.sf-flat { + border: 1px solid; +} +.sf-btn.sf-small, +.sf-css.sf-btn.sf-small { + font-size: 11px; + line-height: 1.092; + padding: 5px 12px; +} +.sf-btn.sf-small.sf-round-corner, +.sf-css.sf-btn.sf-small.sf-round-corner { + border-radius: 25px; + padding: 5px 12px; +} +.sf-btn.sf-small .sf-btn-icon, +.sf-css.sf-btn.sf-small .sf-btn-icon { + font-size: 16px; + width: 1em; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-left { + margin-left: -0.57143em; + width: 2em; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-right { + margin-right: -0.57143em; + width: 2em; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-btn.sf-small.sf-icon-btn, +.sf-css.sf-btn.sf-small.sf-icon-btn { + padding: 4px 4px; + border-radius: 4px; +} +.sf-btn.sf-small.sf-top-icon-btn, .sf-btn.sf-small.sf-bottom-icon-btn, +.sf-css.sf-btn.sf-small.sf-top-icon-btn, +.sf-css.sf-btn.sf-small.sf-bottom-icon-btn { + line-height: 1; + padding: 12px 12px; +} +.sf-btn.sf-small.sf-round, +.sf-css.sf-btn.sf-small.sf-round { + height: 24px; + line-height: 1; + padding: 0; + width: 24px; + border-radius: 50%; +} +.sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-css.sf-btn.sf-small.sf-round .sf-btn-icon { + font-size: 16px; + line-height: 1; + width: auto; +} +.sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-right { + margin-left: -0.57143em; + margin-right: 0; +} +.sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.57143em; +} +.sf-btn.sf-block, +.sf-css.sf-btn.sf-block { + display: block; + width: 100%; +} +.sf-small .sf-btn, +.sf-small.sf-btn, +.sf-small .sf-css.sf-btn, +.sf-small.sf-css.sf-btn { + font-size: 11px; + line-height: 1.092; + padding: 5px 12px; +} +.sf-small .sf-btn.sf-round-corner, +.sf-small.sf-btn.sf-round-corner, +.sf-small .sf-css.sf-btn.sf-round-corner, +.sf-small.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 5px 12px; +} +.sf-small .sf-btn .sf-btn-icon, +.sf-small.sf-btn .sf-btn-icon, +.sf-small .sf-css.sf-btn .sf-btn-icon, +.sf-small.sf-css.sf-btn .sf-btn-icon { + font-size: 16px; + width: 1em; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-left, +.sf-small.sf-btn .sf-btn-icon.sf-icon-left, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-left, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.57143em; + width: 2em; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-right, +.sf-small.sf-btn .sf-btn-icon.sf-icon-right, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-right, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + margin-right: -0.57143em; + width: 2em; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-top, +.sf-small.sf-btn .sf-btn-icon.sf-icon-top, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-top, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-small.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-small .sf-btn.sf-icon-btn, +.sf-small.sf-btn.sf-icon-btn, +.sf-small .sf-css.sf-btn.sf-icon-btn, +.sf-small.sf-css.sf-btn.sf-icon-btn { + padding: 4px 4px; + border-radius: 4px; +} +.sf-small .sf-btn.sf-top-icon-btn, .sf-small .sf-btn.sf-bottom-icon-btn, +.sf-small.sf-btn.sf-top-icon-btn, +.sf-small.sf-btn.sf-bottom-icon-btn, +.sf-small .sf-css.sf-btn.sf-top-icon-btn, +.sf-small .sf-css.sf-btn.sf-bottom-icon-btn, +.sf-small.sf-css.sf-btn.sf-top-icon-btn, +.sf-small.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 12px 12px; +} +.sf-small .sf-btn.sf-round, +.sf-small.sf-btn.sf-round, +.sf-small .sf-css.sf-btn.sf-round, +.sf-small.sf-css.sf-btn.sf-round { + height: 24px; + line-height: 1; + padding: 0; + width: 24px; + border-radius: 50%; +} +.sf-small .sf-btn.sf-round .sf-btn-icon, +.sf-small.sf-btn.sf-round .sf-btn-icon, +.sf-small .sf-css.sf-btn.sf-round .sf-btn-icon, +.sf-small.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 16px; + line-height: 1; + width: auto; +} +.sf-small .sf-btn.sf-rtl .sf-icon-right, +.sf-small.sf-btn.sf-rtl .sf-icon-right, +.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-right, +.sf-small.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.57143em; + margin-right: 0; +} +.sf-small .sf-btn.sf-rtl .sf-icon-left, +.sf-small.sf-btn.sf-rtl .sf-icon-left, +.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-left, +.sf-small.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.57143em; +} +.sf-large.sf-small .sf-btn, +.sf-large .sf-small.sf-btn, +.sf-large.sf-small .sf-css.sf-btn, +.sf-large .sf-small.sf-css.sf-btn { + font-size: 14px; + line-height: 1.476; + padding: 7px 20px; +} +.sf-large.sf-small .sf-btn.sf-round-corner, +.sf-large .sf-small.sf-btn.sf-round-corner, +.sf-large.sf-small .sf-css.sf-btn.sf-round-corner, +.sf-large .sf-small.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 7px 20px; +} +.sf-large.sf-small .sf-btn .sf-btn-icon, +.sf-large .sf-small.sf-btn .sf-btn-icon, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon { + font-size: 18px; + width: 1em; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-left, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.5em; + width: 2em; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-right, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + margin-right: -0.5em; + width: 2em; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-top, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-large.sf-small .sf-btn.sf-icon-btn, +.sf-large .sf-small.sf-btn.sf-icon-btn, +.sf-large.sf-small .sf-css.sf-btn.sf-icon-btn, +.sf-large .sf-small.sf-css.sf-btn.sf-icon-btn { + padding: 6px 13px; + border-radius: 4px; +} +.sf-large.sf-small .sf-btn.sf-top-icon-btn, .sf-large.sf-small .sf-btn.sf-bottom-icon-btn, +.sf-large .sf-small.sf-btn.sf-top-icon-btn, +.sf-large .sf-small.sf-btn.sf-bottom-icon-btn, +.sf-large.sf-small .sf-css.sf-btn.sf-top-icon-btn, +.sf-large.sf-small .sf-css.sf-btn.sf-bottom-icon-btn, +.sf-large .sf-small.sf-css.sf-btn.sf-top-icon-btn, +.sf-large .sf-small.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 16px 16px; +} +.sf-large.sf-small .sf-btn.sf-round, +.sf-large .sf-small.sf-btn.sf-round, +.sf-large.sf-small .sf-css.sf-btn.sf-round, +.sf-large .sf-small.sf-css.sf-btn.sf-round { + height: 36px; + line-height: 1; + padding: 0; + width: 36px; +} +.sf-large.sf-small .sf-btn.sf-round .sf-btn-icon, +.sf-large .sf-small.sf-btn.sf-round .sf-btn-icon, +.sf-large.sf-small .sf-css.sf-btn.sf-round .sf-btn-icon, +.sf-large .sf-small.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 0; + width: auto; +} +.sf-large.sf-small .sf-btn.sf-rtl .sf-icon-right, +.sf-large .sf-small.sf-btn.sf-rtl .sf-icon-right, +.sf-large.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-right, +.sf-large .sf-small.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.5em; + margin-right: 0; +} +.sf-large.sf-small .sf-btn.sf-rtl .sf-icon-left, +.sf-large .sf-small.sf-btn.sf-rtl .sf-icon-left, +.sf-large.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-left, +.sf-large .sf-small.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.5em; +} +.sf-large .sf-btn, +.sf-large.sf-btn, +.sf-large .sf-css.sf-btn, +.sf-large.sf-css.sf-btn { + font-size: 14px; + line-height: 1.286; + padding: 10px 24px; +} +.sf-large .sf-btn.sf-round-corner, +.sf-large.sf-btn.sf-round-corner, +.sf-large .sf-css.sf-btn.sf-round-corner, +.sf-large.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 10px 24px; +} +.sf-large .sf-btn .sf-btn-icon, +.sf-large.sf-btn .sf-btn-icon, +.sf-large .sf-css.sf-btn .sf-btn-icon, +.sf-large.sf-css.sf-btn .sf-btn-icon { + font-size: 22px; + width: 1em; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-left, +.sf-large.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.2em; + width: 2em; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-right, +.sf-large.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + margin-right: -0.2em; + width: 2em; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-top, +.sf-large.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 8px; + width: auto; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 8px; + width: auto; +} +.sf-large .sf-btn.sf-icon-btn, +.sf-large.sf-btn.sf-icon-btn, +.sf-large .sf-css.sf-btn.sf-icon-btn, +.sf-large.sf-css.sf-btn.sf-icon-btn { + padding: 11px 11px; + border-radius: 4px; +} +.sf-large .sf-btn.sf-top-icon-btn, .sf-large .sf-btn.sf-bottom-icon-btn, +.sf-large.sf-btn.sf-top-icon-btn, +.sf-large.sf-btn.sf-bottom-icon-btn, +.sf-large .sf-css.sf-btn.sf-top-icon-btn, +.sf-large .sf-css.sf-btn.sf-bottom-icon-btn, +.sf-large.sf-css.sf-btn.sf-top-icon-btn, +.sf-large.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 16px 16px; +} +.sf-large .sf-btn.sf-round, +.sf-large.sf-btn.sf-round, +.sf-large .sf-css.sf-btn.sf-round, +.sf-large.sf-css.sf-btn.sf-round { + height: 40px; + line-height: 1; + padding: 0; + width: 40px; + border-radius: 50%; +} +.sf-large .sf-btn.sf-round .sf-btn-icon, +.sf-large.sf-btn.sf-round .sf-btn-icon, +.sf-large .sf-css.sf-btn.sf-round .sf-btn-icon, +.sf-large.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 1.5em; + width: auto; +} +.sf-large .sf-btn.sf-rtl .sf-icon-right, +.sf-large.sf-btn.sf-rtl .sf-icon-right, +.sf-large .sf-css.sf-btn.sf-rtl .sf-icon-right, +.sf-large.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.2em; + margin-right: 0; +} +.sf-large .sf-btn.sf-rtl .sf-icon-left, +.sf-large.sf-btn.sf-rtl .sf-icon-left, +.sf-large .sf-css.sf-btn.sf-rtl .sf-icon-left, +.sf-large.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.2em; +} +.sf-large .sf-btn.sf-small, +.sf-large.sf-btn.sf-small, +.sf-large .sf-css.sf-btn.sf-small, +.sf-large.sf-css.sf-btn.sf-small { + font-size: 14px; + line-height: 1.476; + padding: 7px 20px; +} +.sf-large .sf-btn.sf-small.sf-round-corner, +.sf-large.sf-btn.sf-small.sf-round-corner, +.sf-large .sf-css.sf-btn.sf-small.sf-round-corner, +.sf-large.sf-css.sf-btn.sf-small.sf-round-corner { + border-radius: 25px; + padding: 7px 20px; +} +.sf-large .sf-btn.sf-small .sf-btn-icon, +.sf-large.sf-btn.sf-small .sf-btn-icon, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon { + font-size: 18px; + width: 1em; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-left { + margin-left: -0.5em; + width: 2em; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-right { + margin-right: -0.5em; + width: 2em; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-large .sf-btn.sf-small.sf-icon-btn, +.sf-large.sf-btn.sf-small.sf-icon-btn, +.sf-large .sf-css.sf-btn.sf-small.sf-icon-btn, +.sf-large.sf-css.sf-btn.sf-small.sf-icon-btn { + padding: 6px 13px; + border-radius: 4px; +} +.sf-large .sf-btn.sf-small.sf-top-icon-btn, .sf-large .sf-btn.sf-small.sf-bottom-icon-btn, +.sf-large.sf-btn.sf-small.sf-top-icon-btn, +.sf-large.sf-btn.sf-small.sf-bottom-icon-btn, +.sf-large .sf-css.sf-btn.sf-small.sf-top-icon-btn, +.sf-large .sf-css.sf-btn.sf-small.sf-bottom-icon-btn, +.sf-large.sf-css.sf-btn.sf-small.sf-top-icon-btn, +.sf-large.sf-css.sf-btn.sf-small.sf-bottom-icon-btn { + line-height: 1; + padding: 16px 16px; +} +.sf-large .sf-btn.sf-small.sf-round, +.sf-large.sf-btn.sf-small.sf-round, +.sf-large .sf-css.sf-btn.sf-small.sf-round, +.sf-large.sf-css.sf-btn.sf-small.sf-round { + height: 36px; + line-height: 1; + padding: 0; + width: 36px; + border-radius: 50%; +} +.sf-large .sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-large.sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-large .sf-css.sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-large.sf-css.sf-btn.sf-small.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 0; + width: auto; +} +.sf-large .sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-large.sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-large .sf-css.sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-large.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-right { + margin-left: -0.5em; + margin-right: 0; +} +.sf-large .sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-large.sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-large .sf-css.sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-large.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.5em; +} +/* stylelint-disable property-no-vendor-prefix */ +.sf-btn, +.sf-css.sf-btn { + -webkit-tap-highlight-color: transparent; + background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-surface), 0), rgba(var(--color-sf-surface), 0)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.sf-btn:hover, +.sf-css.sf-btn:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn:focus, +.sf-css.sf-btn:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + color: rgba(var(--color-sf-on-surface)); + outline: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)) 0 solid; + outline-offset: 0; + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn:focus-visible, +.sf-css.sf-btn:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn:active, +.sf-css.sf-btn:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-active, +.sf-css.sf-btn.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn:disabled, .sf-btn.sf-disabled, +.sf-css.sf-btn:disabled, +.sf-css.sf-btn.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn .sf-ripple-element, +.sf-css.sf-btn .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.24); +} +.sf-btn.sf-round, .sf-btn.sf-round-edge, +.sf-css.sf-btn.sf-round, +.sf-css.sf-btn.sf-round-edge { + background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 0), rgba(var(--color-sf-surface), 0)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-round:hover, .sf-btn.sf-round-edge:hover, +.sf-css.sf-btn.sf-round:hover, +.sf-css.sf-btn.sf-round-edge:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-round:focus, .sf-btn.sf-round-edge:focus, +.sf-css.sf-btn.sf-round:focus, +.sf-css.sf-btn.sf-round-edge:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); + outline: rgba(var(--color-sf-white)) 0 solid; + outline-offset: 0; +} +.sf-btn.sf-round:focus-visible, .sf-btn.sf-round-edge:focus-visible, +.sf-css.sf-btn.sf-round:focus-visible, +.sf-css.sf-btn.sf-round-edge:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-round:active, .sf-btn.sf-round-edge:active, +.sf-css.sf-btn.sf-round:active, +.sf-css.sf-btn.sf-round-edge:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); + outline: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)) 0 solid; + outline-offset: 0; +} +.sf-btn.sf-round:disabled, .sf-btn.sf-round.sf-disabled, .sf-btn.sf-round-edge:disabled, .sf-btn.sf-round-edge.sf-disabled, +.sf-css.sf-btn.sf-round:disabled, +.sf-css.sf-btn.sf-round.sf-disabled, +.sf-css.sf-btn.sf-round-edge:disabled, +.sf-css.sf-btn.sf-round-edge.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-round.sf-primary:hover, .sf-btn.sf-round.sf-filled:hover, .sf-btn.sf-round-edge.sf-primary:hover, .sf-btn.sf-round-edge.sf-filled:hover, +.sf-css.sf-btn.sf-round.sf-primary:hover, +.sf-css.sf-btn.sf-round.sf-filled:hover, +.sf-css.sf-btn.sf-round-edge.sf-primary:hover, +.sf-css.sf-btn.sf-round-edge.sf-filled:hover { + border-color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-round.sf-primary:focus, .sf-btn.sf-round.sf-filled:focus, .sf-btn.sf-round-edge.sf-primary:focus, .sf-btn.sf-round-edge.sf-filled:focus, +.sf-css.sf-btn.sf-round.sf-primary:focus, +.sf-css.sf-btn.sf-round.sf-filled:focus, +.sf-css.sf-btn.sf-round-edge.sf-primary:focus, +.sf-css.sf-btn.sf-round-edge.sf-filled:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-primary:focus-visible, .sf-btn.sf-round.sf-filled:focus-visible, .sf-btn.sf-round-edge.sf-primary:focus-visible, .sf-btn.sf-round-edge.sf-filled:focus-visible, +.sf-css.sf-btn.sf-round.sf-primary:focus-visible, +.sf-css.sf-btn.sf-round.sf-filled:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-primary:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-round.sf-success:hover, .sf-btn.sf-round-edge.sf-success:hover, +.sf-css.sf-btn.sf-round.sf-success:hover, +.sf-css.sf-btn.sf-round-edge.sf-success:hover { + border-color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-round.sf-success:focus, .sf-btn.sf-round-edge.sf-success:focus, +.sf-css.sf-btn.sf-round.sf-success:focus, +.sf-css.sf-btn.sf-round-edge.sf-success:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-success:focus-visible, .sf-btn.sf-round-edge.sf-success:focus-visible, +.sf-css.sf-btn.sf-round.sf-success:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-round.sf-info:hover, .sf-btn.sf-round-edge.sf-info:hover, +.sf-css.sf-btn.sf-round.sf-info:hover, +.sf-css.sf-btn.sf-round-edge.sf-info:hover { + border-color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-round.sf-info:focus, .sf-btn.sf-round-edge.sf-info:focus, +.sf-css.sf-btn.sf-round.sf-info:focus, +.sf-css.sf-btn.sf-round-edge.sf-info:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-info:focus-visible, .sf-btn.sf-round-edge.sf-info:focus-visible, +.sf-css.sf-btn.sf-round.sf-info:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-round.sf-warning:hover, .sf-btn.sf-round-edge.sf-warning:hover, +.sf-css.sf-btn.sf-round.sf-warning:hover, +.sf-css.sf-btn.sf-round-edge.sf-warning:hover { + border-color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-round.sf-warning:focus, .sf-btn.sf-round-edge.sf-warning:focus, +.sf-css.sf-btn.sf-round.sf-warning:focus, +.sf-css.sf-btn.sf-round-edge.sf-warning:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-warning:focus-visible, .sf-btn.sf-round-edge.sf-warning:focus-visible, +.sf-css.sf-btn.sf-round.sf-warning:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-round.sf-danger:hover, .sf-btn.sf-round-edge.sf-danger:hover, +.sf-css.sf-btn.sf-round.sf-danger:hover, +.sf-css.sf-btn.sf-round-edge.sf-danger:hover { + border-color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-round.sf-danger:focus, .sf-btn.sf-round-edge.sf-danger:focus, +.sf-css.sf-btn.sf-round.sf-danger:focus, +.sf-css.sf-btn.sf-round-edge.sf-danger:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-danger:focus-visible, .sf-btn.sf-round-edge.sf-danger:focus-visible, +.sf-css.sf-btn.sf-round.sf-danger:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-filled, +.sf-css.sf-btn.sf-filled { + background: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: none; +} +.sf-btn.sf-filled:hover, +.sf-css.sf-btn.sf-filled:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-filled:focus, +.sf-css.sf-btn.sf-filled:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + outline: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)) 0 solid; + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-filled:focus-visible, +.sf-css.sf-btn.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-filled:active, +.sf-css.sf-btn.sf-filled:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-filled.sf-active, +.sf-css.sf-btn.sf-filled.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-filled:disabled, .sf-btn.sf-filled.sf-disabled, +.sf-css.sf-btn.sf-filled:disabled, +.sf-css.sf-btn.sf-filled.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-filled .sf-ripple-element, +.sf-css.sf-btn.sf-filled .sf-ripple-element { + background: rgba(var(--color-sf-on-primary), 0.24); +} +.sf-btn.sf-success, +.sf-css.sf-btn.sf-success { + background: rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: none; +} +.sf-btn.sf-success:hover, +.sf-css.sf-btn.sf-success:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-success-text)); +} +.sf-btn.sf-success:focus, +.sf-css.sf-btn.sf-success:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-success:focus-visible, +.sf-css.sf-btn.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-success:active, .sf-btn.sf-success.sf-active, +.sf-css.sf-btn.sf-success:active, +.sf-css.sf-btn.sf-success.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-success:disabled, .sf-btn.sf-success.sf-disabled, +.sf-css.sf-btn.sf-success:disabled, +.sf-css.sf-btn.sf-success.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-success .sf-ripple-element, +.sf-css.sf-btn.sf-success .sf-ripple-element { + background: rgba(var(--color-sf-success-text), 0.24); +} +.sf-btn.sf-info, +.sf-css.sf-btn.sf-info { + background: rgba(var(--color-sf-info)); + border-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + box-shadow: none; +} +.sf-btn.sf-info:hover, +.sf-css.sf-btn.sf-info:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-info-text)); +} +.sf-btn.sf-info:focus, +.sf-css.sf-btn.sf-info:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + border-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-info:focus-visible, +.sf-css.sf-btn.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-info:active, .sf-btn.sf-info.sf-active, +.sf-css.sf-btn.sf-info:active, +.sf-css.sf-btn.sf-info.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + border-color: rgba(var(--color-sf-info)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-info:disabled, .sf-btn.sf-info.sf-disabled, +.sf-css.sf-btn.sf-info:disabled, +.sf-css.sf-btn.sf-info.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-info .sf-ripple-element, +.sf-css.sf-btn.sf-info .sf-ripple-element { + background: rgba(var(--color-sf-info-text), 0.24); +} +.sf-btn.sf-warning, +.sf-css.sf-btn.sf-warning { + background: rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: none; +} +.sf-btn.sf-warning:hover, +.sf-css.sf-btn.sf-warning:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-warning-text)); +} +.sf-btn.sf-warning:focus, +.sf-css.sf-btn.sf-warning:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-warning:focus-visible, +.sf-css.sf-btn.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-warning:active, .sf-btn.sf-warning.sf-active, +.sf-css.sf-btn.sf-warning:active, +.sf-css.sf-btn.sf-warning.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-warning:disabled, .sf-btn.sf-warning.sf-disabled, +.sf-css.sf-btn.sf-warning:disabled, +.sf-css.sf-btn.sf-warning.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-warning .sf-ripple-element, +.sf-css.sf-btn.sf-warning .sf-ripple-element { + background: rgba(var(--color-sf-warning-text), 0.24); +} +.sf-btn.sf-danger, +.sf-css.sf-btn.sf-danger { + background: rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: none; +} +.sf-btn.sf-danger:hover, +.sf-css.sf-btn.sf-danger:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-danger:focus, +.sf-css.sf-btn.sf-danger:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-danger:focus-visible, +.sf-css.sf-btn.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-danger:active, +.sf-css.sf-btn.sf-danger:active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-danger.sf-active, +.sf-css.sf-btn.sf-danger.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-danger:disabled, .sf-btn.sf-danger.sf-disabled, +.sf-css.sf-btn.sf-danger:disabled, +.sf-css.sf-btn.sf-danger.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-danger .sf-ripple-element, +.sf-css.sf-btn.sf-danger .sf-ripple-element { + background: rgba(var(--color-sf-danger-text), 0.24); +} +.sf-btn.sf-flat, +.sf-css.sf-btn.sf-flat { + background: transparent; + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-flat:hover, +.sf-css.sf-btn.sf-flat:hover { + background: rgba(var(--color-sf-on-surface), 0.08); + border-color: none; + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-flat:focus, +.sf-css.sf-btn.sf-flat:focus { + background: rgba(var(--color-sf-on-surface), 0.08); + border-color: none; + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-btn.sf-flat:focus-visible, +.sf-css.sf-btn.sf-flat:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-flat:active, .sf-btn.sf-flat.sf-active, +.sf-css.sf-btn.sf-flat:active, +.sf-css.sf-btn.sf-flat.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-btn.sf-flat:disabled, .sf-btn.sf-flat.sf-disabled, +.sf-css.sf-btn.sf-flat:disabled, +.sf-css.sf-btn.sf-flat.sf-disabled { + background: transparent; + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat .sf-ripple-element, +.sf-css.sf-btn.sf-flat .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.24); +} +.sf-btn.sf-flat.sf-primary, .sf-btn.sf-flat.sf-filled, +.sf-css.sf-btn.sf-flat.sf-primary, +.sf-css.sf-btn.sf-flat.sf-filled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:hover, .sf-btn.sf-flat.sf-filled:hover, +.sf-css.sf-btn.sf-flat.sf-primary:hover, +.sf-css.sf-btn.sf-flat.sf-filled:hover { + background: rgba(var(--color-sf-primary), 0.08); + border-color: none; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:focus, .sf-btn.sf-flat.sf-filled:focus, +.sf-css.sf-btn.sf-flat.sf-primary:focus, +.sf-css.sf-btn.sf-flat.sf-filled:focus { + background: rgba(var(--color-sf-primary), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:focus-visible, .sf-btn.sf-flat.sf-filled:focus-visible, +.sf-css.sf-btn.sf-flat.sf-primary:focus-visible, +.sf-css.sf-btn.sf-flat.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-flat.sf-primary:active, .sf-btn.sf-flat.sf-primary.sf-active, .sf-btn.sf-flat.sf-filled:active, .sf-btn.sf-flat.sf-filled.sf-active, +.sf-css.sf-btn.sf-flat.sf-primary:active, +.sf-css.sf-btn.sf-flat.sf-primary.sf-active, +.sf-css.sf-btn.sf-flat.sf-filled:active, +.sf-css.sf-btn.sf-flat.sf-filled.sf-active { + background: rgba(var(--color-sf-primary), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:disabled, .sf-btn.sf-flat.sf-primary.sf-disabled, .sf-btn.sf-flat.sf-filled:disabled, .sf-btn.sf-flat.sf-filled.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-primary:disabled, +.sf-css.sf-btn.sf-flat.sf-primary.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-filled:disabled, +.sf-css.sf-btn.sf-flat.sf-filled.sf-disabled { + background: transparent; + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-primary .sf-ripple-element, .sf-btn.sf-flat.sf-filled .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-primary .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-filled .sf-ripple-element { + background: rgba(var(--color-sf-on-primary), 0.24); +} +.sf-btn.sf-flat.sf-success, +.sf-css.sf-btn.sf-flat.sf-success { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-flat.sf-success:hover, +.sf-css.sf-btn.sf-flat.sf-success:hover { + background: rgba(var(--color-sf-success), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-flat.sf-success:focus, +.sf-css.sf-btn.sf-flat.sf-success:focus { + background: rgba(var(--color-sf-success), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-success)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-success:focus-visible, +.sf-css.sf-btn.sf-flat.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-success-text)); +} +.sf-btn.sf-flat.sf-success:active, .sf-btn.sf-flat.sf-success.sf-active, +.sf-css.sf-btn.sf-flat.sf-success:active, +.sf-css.sf-btn.sf-flat.sf-success.sf-active { + background: rgba(var(--color-sf-success), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-success)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-success:disabled, .sf-btn.sf-flat.sf-success.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-success:disabled, +.sf-css.sf-btn.sf-flat.sf-success.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-success .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-success .sf-ripple-element { + background: rgba(var(--color-sf-success-text), 0.24); +} +.sf-btn.sf-flat.sf-info, +.sf-css.sf-btn.sf-flat.sf-info { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-flat.sf-info:hover, +.sf-css.sf-btn.sf-flat.sf-info:hover { + background: rgba(var(--color-sf-info), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-flat.sf-info:focus, +.sf-css.sf-btn.sf-flat.sf-info:focus { + background: rgba(var(--color-sf-info), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-info)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-info:focus-visible, +.sf-css.sf-btn.sf-flat.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-info-text)); +} +.sf-btn.sf-flat.sf-info:active, .sf-btn.sf-flat.sf-info.sf-active, +.sf-css.sf-btn.sf-flat.sf-info:active, +.sf-css.sf-btn.sf-flat.sf-info.sf-active { + background: rgba(var(--color-sf-info), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-info)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-info:disabled, .sf-btn.sf-flat.sf-info.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-info:disabled, +.sf-css.sf-btn.sf-flat.sf-info.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-info .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-info .sf-ripple-element { + background: rgba(var(--color-sf-info-text), 0.24); +} +.sf-btn.sf-flat.sf-warning, +.sf-css.sf-btn.sf-flat.sf-warning { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-flat.sf-warning:hover, +.sf-css.sf-btn.sf-flat.sf-warning:hover { + background: rgba(var(--color-sf-warning), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-flat.sf-warning:focus, +.sf-css.sf-btn.sf-flat.sf-warning:focus { + background: rgba(var(--color-sf-warning), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-warning)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-warning:focus-visible, +.sf-css.sf-btn.sf-flat.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-warning-text)); +} +.sf-btn.sf-flat.sf-warning:active, .sf-btn.sf-flat.sf-warning.sf-active, +.sf-css.sf-btn.sf-flat.sf-warning:active, +.sf-css.sf-btn.sf-flat.sf-warning.sf-active { + background: rgba(var(--color-sf-warning), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-warning)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-warning:disabled, .sf-btn.sf-flat.sf-warning.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-warning:disabled, +.sf-css.sf-btn.sf-flat.sf-warning.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-warning .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-warning .sf-ripple-element { + background: rgba(var(--color-sf-warning-text), 0.24); +} +.sf-btn.sf-flat.sf-danger, +.sf-css.sf-btn.sf-flat.sf-danger { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-flat.sf-danger:hover, +.sf-css.sf-btn.sf-flat.sf-danger:hover { + background: rgba(var(--color-sf-error), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-flat.sf-danger:focus, +.sf-css.sf-btn.sf-flat.sf-danger:focus { + background: rgba(var(--color-sf-error), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-error)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-danger:focus-visible, +.sf-css.sf-btn.sf-flat.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-flat.sf-danger:active, .sf-btn.sf-flat.sf-danger.sf-active, +.sf-css.sf-btn.sf-flat.sf-danger:active, +.sf-css.sf-btn.sf-flat.sf-danger.sf-active { + background: rgba(var(--color-sf-error), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-error)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-danger:disabled, .sf-btn.sf-flat.sf-danger.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-danger:disabled, +.sf-css.sf-btn.sf-flat.sf-danger.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-danger .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-danger .sf-ripple-element { + background: rgba(var(--color-sf-danger-text), 0.24); +} +.sf-btn.sf-outlined, +.sf-css.sf-btn.sf-outlined { + background: transparent; + border-color: rgba(var(--color-sf-outline)); + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); + border: 1px solid; +} +.sf-btn.sf-outlined:hover, +.sf-css.sf-btn.sf-outlined:hover { + background: rgba(var(--color-sf-on-surface), 0.08); + border-color: rgba(var(--color-sf-outline)); + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-outlined:focus, +.sf-css.sf-btn.sf-outlined:focus { + background: rgba(var(--color-sf-on-surface), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-outlined:focus-visible, +.sf-css.sf-btn.sf-outlined:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-outlined:active, .sf-btn.sf-outlined.sf-active, +.sf-css.sf-btn.sf-outlined:active, +.sf-css.sf-btn.sf-outlined.sf-active { + background: rgba(var(--color-sf-on-surface), 0.12); + border-color: rgba(var(--color-sf-outline)); + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-outlined:disabled, .sf-btn.sf-outlined.sf-disabled, +.sf-css.sf-btn.sf-outlined:disabled, +.sf-css.sf-btn.sf-outlined.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-primary, .sf-btn.sf-outlined.sf-filled, +.sf-css.sf-btn.sf-outlined.sf-primary, +.sf-css.sf-btn.sf-outlined.sf-filled { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:hover, .sf-btn.sf-outlined.sf-filled:hover, +.sf-css.sf-btn.sf-outlined.sf-primary:hover, +.sf-css.sf-btn.sf-outlined.sf-filled:hover { + background: rgba(var(--color-sf-primary), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:focus, .sf-btn.sf-outlined.sf-filled:focus, +.sf-css.sf-btn.sf-outlined.sf-primary:focus, +.sf-css.sf-btn.sf-outlined.sf-filled:focus { + background: rgba(var(--color-sf-primary), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:focus-visible, .sf-btn.sf-outlined.sf-filled:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-primary:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-outlined.sf-primary:active, .sf-btn.sf-outlined.sf-primary.sf-active, .sf-btn.sf-outlined.sf-filled:active, .sf-btn.sf-outlined.sf-filled.sf-active, +.sf-css.sf-btn.sf-outlined.sf-primary:active, +.sf-css.sf-btn.sf-outlined.sf-primary.sf-active, +.sf-css.sf-btn.sf-outlined.sf-filled:active, +.sf-css.sf-btn.sf-outlined.sf-filled.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; + color: rgba(var(--color-sf-on-primary)); + background: rgba(var(--color-sf-primary), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:disabled, .sf-btn.sf-outlined.sf-primary.sf-disabled, .sf-btn.sf-outlined.sf-filled:disabled, .sf-btn.sf-outlined.sf-filled.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-primary:disabled, +.sf-css.sf-btn.sf-outlined.sf-primary.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-filled:disabled, +.sf-css.sf-btn.sf-outlined.sf-filled.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-success, +.sf-css.sf-btn.sf-outlined.sf-success { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:hover, +.sf-css.sf-btn.sf-outlined.sf-success:hover { + background: rgba(var(--color-sf-success), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:focus, +.sf-css.sf-btn.sf-outlined.sf-success:focus { + background: rgba(var(--color-sf-success), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-success-text)); +} +.sf-btn.sf-outlined.sf-success:active, .sf-btn.sf-outlined.sf-success.sf-active, +.sf-css.sf-btn.sf-outlined.sf-success:active, +.sf-css.sf-btn.sf-outlined.sf-success.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + box-shadow: none; + color: rgba(var(--color-sf-success-text)); + background: rgba(var(--color-sf-success), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:disabled, .sf-btn.sf-outlined.sf-success.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-success:disabled, +.sf-css.sf-btn.sf-outlined.sf-success.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-info, +.sf-css.sf-btn.sf-outlined.sf-info { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:hover, +.sf-css.sf-btn.sf-outlined.sf-info:hover { + background: rgba(var(--color-sf-info), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:focus, +.sf-css.sf-btn.sf-outlined.sf-info:focus { + background: rgba(var(--color-sf-info), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-info-text)); +} +.sf-btn.sf-outlined.sf-info:active, .sf-btn.sf-outlined.sf-info.sf-active, +.sf-css.sf-btn.sf-outlined.sf-info:active, +.sf-css.sf-btn.sf-outlined.sf-info.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-color: rgba(var(--color-sf-info)); + box-shadow: none; + color: rgba(var(--color-sf-info-text)); + background: rgba(var(--color-sf-info), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:disabled, .sf-btn.sf-outlined.sf-info.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-info:disabled, +.sf-css.sf-btn.sf-outlined.sf-info.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-warning, +.sf-css.sf-btn.sf-outlined.sf-warning { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:hover, +.sf-css.sf-btn.sf-outlined.sf-warning:hover { + background: rgba(var(--color-sf-warning), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:focus, +.sf-css.sf-btn.sf-outlined.sf-warning:focus { + background: rgba(var(--color-sf-warning), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-warning-text)); +} +.sf-btn.sf-outlined.sf-warning:active, .sf-btn.sf-outlined.sf-warning.sf-active, +.sf-css.sf-btn.sf-outlined.sf-warning:active, +.sf-css.sf-btn.sf-outlined.sf-warning.sf-active { + background: rgba(var(--color-sf-warning)); + border-color: transparent; + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + box-shadow: none; + color: rgba(var(--color-sf-warning-text)); + background: rgba(var(--color-sf-warning), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:disabled, .sf-btn.sf-outlined.sf-warning.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-warning:disabled, +.sf-css.sf-btn.sf-outlined.sf-warning.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-danger, +.sf-css.sf-btn.sf-outlined.sf-danger { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-outlined.sf-danger:hover, +.sf-css.sf-btn.sf-outlined.sf-danger:hover { + background: rgba(var(--color-sf-error), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-outlined.sf-danger:focus, +.sf-css.sf-btn.sf-outlined.sf-danger:focus { + background: rgba(var(--color-sf-error), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-outlined.sf-danger:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-outlined.sf-danger:active, .sf-btn.sf-outlined.sf-danger.sf-active, +.sf-css.sf-btn.sf-outlined.sf-danger:active, +.sf-css.sf-btn.sf-outlined.sf-danger.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + box-shadow: none; + color: rgba(var(--color-sf-danger-text)); + background: rgba(var(--color-sf-error), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-outlined.sf-danger:disabled, .sf-btn.sf-outlined.sf-danger.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-danger:disabled, +.sf-css.sf-btn.sf-outlined.sf-danger.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-link, +.sf-css.sf-btn.sf-link { + background: transparent; + border-color: transparent; + border-radius: 0; + box-shadow: none; + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-link:hover, +.sf-css.sf-btn.sf-link:hover { + border-radius: 4px; + text-decoration: underline; +} +.sf-btn.sf-link:focus, +.sf-css.sf-btn.sf-link:focus { + border-radius: 4px; + text-decoration: underline; +} +.sf-btn.sf-link:focus:not(:focus-visible), +.sf-css.sf-btn.sf-link:focus:not(:focus-visible) { + outline: none !important; /* stylelint-disable-line declaration-no-important */ +} +.sf-btn.sf-link:focus-visible, +.sf-css.sf-btn.sf-link:focus-visible { + box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff; +} +.sf-btn.sf-link:disabled, +.sf-css.sf-btn.sf-link:disabled { + color: rgba(var(--color-sf-on-surface), 0.38); + background: transparent; + box-shadow: none; + text-decoration: none; +} +.sf-btn.sf-inherit, +.sf-css.sf-btn.sf-inherit { + color: inherit; + background: inherit; + border-color: transparent; + box-shadow: none; +} +.sf-btn.sf-inherit:hover, .sf-btn.sf-inherit:focus, .sf-btn.sf-inherit:active, .sf-btn.sf-inherit.sf-active, +.sf-css.sf-btn.sf-inherit:hover, +.sf-css.sf-btn.sf-inherit:focus, +.sf-css.sf-btn.sf-inherit:active, +.sf-css.sf-btn.sf-inherit.sf-active { + background: rgba(0, 0, 0, 0.056); + border-color: transparent; + box-shadow: none; + color: inherit; + outline: none; +} +.sf-btn.sf-inherit:disabled, +.sf-css.sf-btn.sf-inherit:disabled { + background: inherit; + color: inherit; + border-color: transparent; + box-shadow: none; + opacity: 0.5; +} +.sf-checkbox-wrapper, +.sf-css.sf-checkbox-wrapper { + cursor: pointer; + display: inline-block; + line-height: 1; + outline: none; + user-select: none; +} +.sf-checkbox-wrapper label, +.sf-css.sf-checkbox-wrapper label { + cursor: pointer; + display: inline-block; + line-height: 0; + margin: 0; + position: relative; + white-space: nowrap; +} +.sf-checkbox-wrapper:hover .sf-ripple-container, +.sf-css.sf-checkbox-wrapper:hover .sf-ripple-container { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-checkbox-wrapper:hover .sf-ripple-container.sf-ripple-check, +.sf-css.sf-checkbox-wrapper:hover .sf-ripple-container.sf-ripple-check { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper:hover .sf-frame, +.sf-css.sf-checkbox-wrapper:hover .sf-frame { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-checkbox-wrapper:hover .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper:hover .sf-frame.sf-check { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper:hover .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper:hover .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-checkbox-wrapper:hover .sf-label, +.sf-css.sf-checkbox-wrapper:hover .sf-label { + color: rgba(var(--color-sf-on-surface)); +} +.sf-checkbox-wrapper:focus .sf-ripple-container, .sf-checkbox-wrapper.sf-focus .sf-ripple-container, +.sf-css.sf-checkbox-wrapper:focus .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-checkbox-wrapper:focus .sf-ripple-container.sf-ripple-check, .sf-checkbox-wrapper.sf-focus .sf-ripple-container.sf-ripple-check, +.sf-css.sf-checkbox-wrapper:focus .sf-ripple-container.sf-ripple-check, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-ripple-container.sf-ripple-check { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper:focus .sf-frame, .sf-checkbox-wrapper:focus .sf-frame.sf-check, .sf-checkbox-wrapper.sf-focus .sf-frame, .sf-checkbox-wrapper.sf-focus .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper:focus .sf-frame, +.sf-css.sf-checkbox-wrapper:focus .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-frame.sf-check { + outline: rgba(var(--color-sf-primary), 0.25); + outline-offset: 0; +} +.sf-checkbox-wrapper:focus .sf-frame, .sf-checkbox-wrapper.sf-focus .sf-frame, +.sf-css.sf-checkbox-wrapper:focus .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-frame { + box-shadow: none; +} +.sf-checkbox-wrapper:active .sf-ripple-element, +.sf-css.sf-checkbox-wrapper:active .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-checkbox-wrapper:active .sf-ripple-check .sf-ripple-element, +.sf-css.sf-checkbox-wrapper:active .sf-ripple-check .sf-ripple-element { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper .sf-ripple-check .sf-ripple-element, +.sf-css.sf-checkbox-wrapper .sf-ripple-check .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-checkbox-wrapper .sf-ripple-container, +.sf-css.sf-checkbox-wrapper .sf-ripple-container { + border-radius: 50%; + bottom: -9.5px; + height: 34px; + left: -9.5px; + pointer-events: none; + position: absolute; + right: -9.5px; + top: -9.5px; + width: 34px; + z-index: 1; +} +.sf-checkbox-wrapper .sf-ripple-container .sf-ripple-element, +.sf-css.sf-checkbox-wrapper .sf-ripple-container .sf-ripple-element { + border-radius: 50%; +} +.sf-checkbox-wrapper .sf-ripple-element, +.sf-css.sf-checkbox-wrapper .sf-ripple-element { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper .sf-label, +.sf-css.sf-checkbox-wrapper .sf-label { + color: rgba(var(--color-sf-on-surface)); + cursor: pointer; + display: inline-block; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: normal; + line-height: 16px; + user-select: none; + vertical-align: middle; + white-space: normal; +} +.sf-checkbox-wrapper .sf-checkbox, +.sf-css.sf-checkbox-wrapper .sf-checkbox { + height: 1px; + opacity: 0; + position: absolute; + width: 1px; +} +.sf-checkbox-wrapper .sf-checkbox + .sf-label, +.sf-css.sf-checkbox-wrapper .sf-checkbox + .sf-label { + margin-right: 8px; +} +.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame, .sf-checkbox-wrapper .sf-checkbox:active + .sf-frame, +.sf-css.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame, +.sf-css.sf-checkbox-wrapper .sf-checkbox:active + .sf-frame { + background-color: transparent; + border-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: none; +} +.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-check, .sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-check { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-stop, .sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-frame, +.sf-css.sf-checkbox-wrapper .sf-frame { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); + border: 2px solid; + border-radius: 2px; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + font-family: "e-icons"; + height: 16px; + padding: 0; + text-align: center; + vertical-align: middle; + width: 16px; +} +.sf-checkbox-wrapper .sf-frame + .sf-label, +.sf-css.sf-checkbox-wrapper .sf-frame + .sf-label { + margin-left: 8px; +} +.sf-checkbox-wrapper .sf-frame + .sf-ripple-container, +.sf-css.sf-checkbox-wrapper .sf-frame + .sf-ripple-container { + left: auto; +} +.sf-checkbox-wrapper .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper .sf-frame.sf-check { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-check, +.sf-css.sf-checkbox-wrapper .sf-check { + font-size: 10px; +} +.sf-checkbox-wrapper .sf-stop, +.sf-css.sf-checkbox-wrapper .sf-stop { + font-size: 10px; +} +.sf-checkbox-wrapper.sf-checkbox-disabled, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled { + cursor: default; + pointer-events: none; +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame { + cursor: default; + background-color: transparent; + border: 2px solid rgba(var(--color-sf-on-surface), 0.38); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-check { + background-color: rgba(var(--color-sf-on-surface), 0.38); + border: none; + border-color: rgba(var(--color-sf-on-surface), 0.38); + line-height: 14px; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-on-surface), 0.38); + border: none; + border: rgba(var(--color-sf-on-surface), 0.38); + line-height: 14px; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-label, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-label { + color: rgba(var(--color-sf-on-surface), 0.38); + cursor: default; +} +.sf-checkbox-wrapper.sf-rtl .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-ripple-container { + right: -9.5px; +} +.sf-checkbox-wrapper.sf-rtl .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-frame { + margin: 0; +} +.sf-checkbox-wrapper.sf-rtl .sf-frame:hover, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-frame:hover { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-checkbox-wrapper.sf-rtl .sf-frame + .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-frame + .sf-ripple-container { + left: -9.5px; + right: auto; +} +.sf-checkbox-wrapper.sf-rtl .sf-label, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-label { + margin-left: 0; + margin-right: 8px; +} +.sf-checkbox-wrapper.sf-rtl .sf-label + .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-label + .sf-frame { + margin: 0; +} +.sf-checkbox-wrapper.sf-rtl .sf-checkbox + .sf-label, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-checkbox + .sf-label { + margin-left: 8px; + margin-right: 0; +} +.sf-checkbox-wrapper.sf-small .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-small .sf-frame { + height: 14px; + line-height: 11px; + width: 14px; +} +.sf-checkbox-wrapper.sf-small .sf-check, +.sf-css.sf-checkbox-wrapper.sf-small .sf-check { + font-size: 8px; +} +.sf-checkbox-wrapper.sf-small .sf-stop, +.sf-css.sf-checkbox-wrapper.sf-small .sf-stop { + font-size: 8px; + line-height: 11px; +} +.sf-checkbox-wrapper.sf-small .sf-label, +.sf-css.sf-checkbox-wrapper.sf-small .sf-label { + font-size: 10px; + line-height: 14px; +} +.sf-checkbox-wrapper.sf-small .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-small .sf-ripple-container { + bottom: -5px; + height: 24px; + left: -5px; + right: -5px; + top: -5px; + width: 24px; +} +.sf-css.sf-checkbox-wrapper .sf-ripple-container { + right: -9.5px; + top: -4.5px; +} +.sf-checkbox-wrapper[readonly] { + pointer-events: none; +} +.sf-small .sf-checkbox-wrapper .sf-frame, +.sf-small.sf-checkbox-wrapper .sf-frame, +.sf-small .sf-css.sf-checkbox-wrapper .sf-frame, +.sf-small.sf-css.sf-checkbox-wrapper .sf-frame { + height: 14px; + line-height: 11px; + width: 14px; +} +.sf-small .sf-checkbox-wrapper .sf-frame:hover, +.sf-small.sf-checkbox-wrapper .sf-frame:hover, +.sf-small .sf-css.sf-checkbox-wrapper .sf-frame:hover, +.sf-small.sf-css.sf-checkbox-wrapper .sf-frame:hover { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-small .sf-checkbox-wrapper .sf-check, +.sf-small.sf-checkbox-wrapper .sf-check, +.sf-small .sf-css.sf-checkbox-wrapper .sf-check, +.sf-small.sf-css.sf-checkbox-wrapper .sf-check { + font-size: 8px; +} +.sf-small .sf-checkbox-wrapper .sf-stop, +.sf-small.sf-checkbox-wrapper .sf-stop, +.sf-small .sf-css.sf-checkbox-wrapper .sf-stop, +.sf-small.sf-css.sf-checkbox-wrapper .sf-stop { + font-size: 8px; + line-height: 11px; +} +.sf-small .sf-checkbox-wrapper .sf-label, +.sf-small.sf-checkbox-wrapper .sf-label, +.sf-small .sf-css.sf-checkbox-wrapper .sf-label, +.sf-small.sf-css.sf-checkbox-wrapper .sf-label { + font-size: 10px; + line-height: 14px; +} +.sf-small .sf-checkbox-wrapper .sf-ripple-container, +.sf-small.sf-checkbox-wrapper .sf-ripple-container, +.sf-small .sf-css.sf-checkbox-wrapper .sf-ripple-container, +.sf-small.sf-css.sf-checkbox-wrapper .sf-ripple-container { + bottom: -5px; + height: 24px; + left: -5px; + right: -5px; + top: -5px; + width: 24px; +} +.sf-radio-wrapper { + display: inline-block; + line-height: 1; + position: relative; +} +/* stylelint-disable property-no-vendor-prefix */ +.sf-radio { + -webkit-appearance: none; + height: 1px; + opacity: 0; + position: absolute; + width: 1px; +} +.sf-radio:not(:checked):not(:disabled):hover + label.sf-rtl::after, +.sf-radio:not(:checked):not(:disabled):hover + label.sf-right::after { + left: auto; +} +.sf-radio + label { + -webkit-tap-highlight-color: transparent; + cursor: pointer; + display: inline-block; + margin: 0; + position: relative; + user-select: none; + vertical-align: middle; + white-space: nowrap; +} +.sf-radio + label .sf-label { + color: rgba(var(--color-sf-on-surface)); + display: inline-block; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: normal; + line-height: 1; + padding-left: 22px; + vertical-align: text-top; + white-space: normal; +} +.sf-radio + label:focus .sf-ripple-container, .sf-radio + label.sf-focus .sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-radio + label .sf-ripple-element { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio + label::before { + border: 1px solid; + border-radius: 50%; + box-sizing: border-box; + content: ""; + height: 14px; + left: 0; + position: absolute; + width: 14px; + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-radio + label:focus::before { + box-shadow: none; +} +.sf-radio + label:active .sf-ripple-element { + background-color: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-radio + label::after { + border: 1px solid; + border-radius: 50%; + box-sizing: border-box; + content: ""; + height: 6px; + left: 4px; + position: absolute; + top: 4px; + transform: scale(0); + width: 6px; +} +.sf-radio + label .sf-ripple-container { + border-radius: 50%; + height: 30px; + left: -8px; + position: absolute; + top: -8px; + width: 30px; + z-index: 1; +} +.sf-radio + label .sf-ripple-container .sf-ripple-element { + border-radius: 50%; +} +.sf-radio + label.sf-right .sf-label, .sf-radio + label.sf-rtl .sf-label { + padding-left: 0; + padding-right: 22px; +} +.sf-radio + label.sf-right::before, .sf-radio + label.sf-rtl::before { + left: auto; + right: 0; +} +.sf-radio + label.sf-right::after, .sf-radio + label.sf-rtl::after { + left: auto; + right: 4px; +} +.sf-radio + label.sf-right .sf-ripple-container, .sf-radio + label.sf-rtl .sf-ripple-container { + left: auto; + right: -8px; +} +.sf-radio + label.sf-right.sf-rtl .sf-label { + padding-left: 22px; + padding-right: 0; +} +.sf-radio + label.sf-right.sf-rtl::before { + left: 0; + right: auto; +} +.sf-radio + label.sf-right.sf-rtl::after { + left: 4px; + right: auto; +} +.sf-radio + label.sf-right.sf-rtl .sf-ripple-container { + left: -8px; + right: auto; +} +.sf-radio + label.sf-small .sf-label { + line-height: 1; + padding-left: 22px; +} +.sf-radio + label.sf-small::before { + height: 14px; + width: 14px; +} +.sf-radio + label.sf-small::after { + height: 6px; + left: 4px; + top: 4px; + width: 6px; +} +.sf-radio + label.sf-small .sf-ripple-container { + left: -9px; + top: -9px; +} +.sf-radio + label.sf-small.sf-right .sf-label, .sf-radio + label.sf-small.sf-rtl .sf-label { + padding-left: 0; + padding-right: 22px; +} +.sf-radio + label.sf-small.sf-right::after, .sf-radio + label.sf-small.sf-rtl::after { + left: auto; + right: 4px; +} +.sf-radio + label.sf-small.sf-right .sf-ripple-container, .sf-radio + label.sf-small.sf-rtl .sf-ripple-container { + left: auto; + right: -9px; +} +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-label { + padding-left: 22px; + padding-right: 0; +} +.sf-radio + label.sf-small.sf-right.sf-rtl::after { + left: 4px; + right: auto; +} +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-ripple-container { + left: -10px; + right: auto; +} +.sf-radio:focus + label::before { + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; +} +.sf-radio:focus + label::before { + border-color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-radio:checked + label::after { + transform: scale(1); + transition: none; +} +.sf-radio:hover + label .sf-ripple-container { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-radio:hover + label::before { + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-radio:checked + label::before { + background-color: transparent; + border-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label::after { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label:active .sf-ripple-element { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio:checked + .sf-focus .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio:checked + .sf-focus::before { + outline: transparent 0 solid; + outline-offset: 0; +} +.sf-radio:checked:focus + label::before { + border-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked:focus + label::after { + background-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label:hover .sf-ripple-container { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio:checked + label:hover::before { + border-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label:hover::after { + background-color: rgba(var(--color-sf-primary)); +} +.sf-radio:disabled + label { + cursor: default; + pointer-events: none; +} +.sf-radio:disabled + label::before { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface), 0.38); + cursor: default; +} +.sf-radio:disabled + label .sf-ripple-container { + background-color: transparent; +} +.sf-radio:disabled + label .sf-ripple-container::after { + background-color: transparent; + cursor: default; +} +.sf-radio:disabled + label .sf-label { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-radio:disabled:checked + label::before { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-radio:disabled:checked + label::after { + background-color: rgba(var(--color-sf-on-surface), 0.38); + border-color: rgba(var(--color-sf-on-surface), 0.38); + cursor: default; +} +.sf-radio:disabled:checked + label .sf-ripple-container, .sf-radio:disabled:checked + label .sf-ripple-container::after { + background-color: transparent; +} +.sf-small .sf-radio + label .sf-label, +.sf-radio + label.sf-small .sf-label { + line-height: 1; + padding-left: 22px; +} +.sf-small .sf-radio + label::before, +.sf-radio + label.sf-small::before { + height: 14px; + width: 14px; +} +.sf-small .sf-radio + label::after, +.sf-radio + label.sf-small::after { + height: 6px; + left: 4px; + top: 4px; + width: 6px; +} +.sf-small .sf-radio + label .sf-ripple-container, +.sf-radio + label.sf-small .sf-ripple-container { + left: -9px; + top: -9px; +} +.sf-small .sf-radio + label.sf-right .sf-label, .sf-small .sf-radio + label.sf-rtl .sf-label, +.sf-radio + label.sf-small.sf-right .sf-label, +.sf-radio + label.sf-small.sf-rtl .sf-label { + padding-left: 0; + padding-right: 22px; +} +.sf-small .sf-radio + label.sf-right::after, .sf-small .sf-radio + label.sf-rtl::after, +.sf-radio + label.sf-small.sf-right::after, +.sf-radio + label.sf-small.sf-rtl::after { + left: auto; + right: 4px; +} +.sf-small .sf-radio + label.sf-right .sf-ripple-container, .sf-small .sf-radio + label.sf-rtl .sf-ripple-container, +.sf-radio + label.sf-small.sf-right .sf-ripple-container, +.sf-radio + label.sf-small.sf-rtl .sf-ripple-container { + left: auto; + right: -9px; +} +.sf-small .sf-radio + label.sf-right.sf-rtl .sf-label, +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-label { + padding-left: 22px; + padding-right: 0; +} +.sf-small .sf-radio + label.sf-right.sf-rtl::after, +.sf-radio + label.sf-small.sf-right.sf-rtl::after { + left: 4px; + right: auto; +} +.sf-small .sf-radio + label.sf-right.sf-rtl .sf-ripple-container, +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-ripple-container { + left: -10px; + right: auto; +} +.sf-switch-wrapper, +.sf-css.sf-switch-wrapper { + cursor: pointer; + display: inline-block; + height: 24px; + position: relative; + user-select: none; + width: 48px; +} +.sf-switch-wrapper .sf-switch, +.sf-css.sf-switch-wrapper .sf-switch { + /* stylelint-disable property-no-vendor-prefix */ + -moz-appearance: none; + height: 1px; + opacity: 0; + position: absolute; + width: 1px; +} +.sf-switch-wrapper .sf-switch-inner, +.sf-css.sf-switch-wrapper .sf-switch-inner { + -ms-transition: all 0.2s ease-in-out; + -webkit-transition: all 0.2s ease-in-out; + border: 2px solid rgba(var(--color-sf-outline)); + border-radius: 20px; + box-sizing: border-box; + height: 100%; + left: 0; + overflow: hidden; + position: absolute; + top: 0; + transition: all 0.2s ease-in-out; + width: 100%; +} +.sf-switch-wrapper .sf-switch-on, .sf-switch-wrapper .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-off { + -ms-transition: all 0.2s ease-in-out 0.1s; + -webkit-transition: all 0.2s ease-in-out 0.1s; + align-items: center; + border-radius: inherit; + display: flex; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 12px; + height: 100%; + justify-content: center; + left: 0; + position: absolute; + transition: all 0.2s ease-in-out 0.1s; + width: 100%; +} +.sf-switch-wrapper .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-on { + left: -100%; + text-indent: -16px; +} +.sf-switch-wrapper .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-off { + left: 0; + opacity: 1; + text-indent: 18px; +} +.sf-switch-wrapper .sf-switch-handle, +.sf-css.sf-switch-wrapper .sf-switch-handle { + -ms-transition: all 0.2s linear; + -webkit-transition: all 0.2s linear; + border-radius: 50%; + bottom: 2px; + height: 12px; + left: 6px; + margin: auto 0; + position: absolute; + top: 1.5px; + transition: all 0.2s linear; + width: 12px; +} +.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; + opacity: 1; +} +.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-off { + left: 100%; +} +.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -22px; + height: 18px; + width: 18px; +} +.sf-switch-wrapper.sf-switch-disabled, +.sf-css.sf-switch-wrapper.sf-switch-disabled { + cursor: default; + pointer-events: none; +} +.sf-switch-wrapper .sf-ripple-container, +.sf-css.sf-switch-wrapper .sf-ripple-container { + border-radius: 50%; + bottom: -9px; + height: 52px; + left: -17px; + pointer-events: none; + position: absolute; + top: -17px; + width: 52px; + z-index: 1; + height: 32px; + left: -10px; + top: -10px; + width: 32px; +} +.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -6px !important; /* stylelint-disable-line declaration-no-important */ + top: -6.5px !important; /* stylelint-disable-line declaration-no-important */ +} +.sf-switch-wrapper .sf-ripple-container .sf-ripple-element, +.sf-css.sf-switch-wrapper .sf-ripple-container .sf-ripple-element { + border-radius: 50%; +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -22px; +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +.sf-switch-wrapper.sf-rtl .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; +} +.sf-switch-wrapper.sf-rtl .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + border-radius: 50%; + height: 12px; + left: 6px; + margin: auto 0; + position: absolute; + top: 1.5px; + transition: all 0.2s linear; + width: 12px; +} +.sf-switch-wrapper.sf-small, +.sf-css.sf-switch-wrapper.sf-small { + height: 20px; + width: 46px; +} +.sf-switch-wrapper.sf-small .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle { + height: 10px; + width: 10px; +} +.sf-switch-wrapper.sf-small .sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-small .sf-ripple-container { + border-radius: 50%; + height: 24px; + left: -3px; + pointer-events: none; + position: absolute; + top: -5px; + width: 24px; + z-index: 1; +} +.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -19px; + height: 14px; + width: 14px; +} +.sf-switch-wrapper.sf-small .sf-switch-on, .sf-switch-wrapper.sf-small .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + font-size: 10px; +} +.sf-switch-wrapper.sf-small .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-on { + text-indent: -11px; +} +.sf-switch-wrapper.sf-small .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + text-indent: 14px; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -19px; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + height: 10px; + width: 10px; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off { + left: 0; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active { + left: 22px; + height: 14px; + width: 14px; +} +*.sf-small .sf-switch-wrapper, +*.sf-small.sf-switch-wrapper, +*.sf-small .sf-css.sf-switch-wrapper, +*.sf-small.sf-css.sf-switch-wrapper { + height: 20px; + width: 46px; +} +*.sf-small .sf-switch-wrapper .sf-switch-handle, +*.sf-small.sf-switch-wrapper .sf-switch-handle, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle { + height: 10px; + width: 10px; + left: 5px; + top: 2px; +} +*.sf-small .sf-switch-wrapper .sf-ripple-container, +*.sf-small.sf-switch-wrapper .sf-ripple-container, +*.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container, +*.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container { + border-radius: 50%; + height: 24px; + left: -3px; + pointer-events: none; + position: absolute; + top: -5px; + width: 24px; + z-index: 1; + left: -7px; + top: -7px; +} +*.sf-small .sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-small.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -3px !important; /* stylelint-disable-line declaration-no-important */ + top: -5px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-small .sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-small.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -19px; + height: 14px; + width: 14px; +} +*.sf-small .sf-switch-wrapper .sf-switch-on, *.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + font-size: 10px; +} +*.sf-small .sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-on { + text-indent: -11px; +} +*.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + text-indent: 14px; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -19px; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + height: 10px; + width: 10px; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + left: 22px; + height: 14px; + width: 14px; +} +*.sf-bigger.sf-small .sf-switch-wrapper, +*.sf-bigger.sf-small.sf-switch-wrapper, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper { + height: 28px; + width: 60px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle { + height: 16px; + left: 6px; + top: 1px; + width: 16px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container { + border-radius: 50%; + height: 36px; + left: -7px; + pointer-events: none; + position: absolute; + top: -8px; + width: 36px; + z-index: 1; + left: -10px; + top: -10px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -7px !important; /* stylelint-disable-line declaration-no-important */ + top: -8px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -25px; + height: 20px; + width: 20px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-on, *.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + font-size: 12px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-on { + text-indent: -14px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + text-indent: 14px; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -25px; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + height: 16px; + width: 16px; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + left: 30px; + height: 20px; + width: 20px; +} +*.sf-bigger .sf-switch-wrapper, +*.sf-bigger.sf-switch-wrapper, +*.sf-bigger .sf-css.sf-switch-wrapper, +*.sf-bigger.sf-css.sf-switch-wrapper { + height: 32px; + width: 66px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-handle { + height: 16px; + left: 6px; + top: 2px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -29px; + height: 24px; + width: 24px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-on, *.sf-bigger .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-switch-wrapper .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-off { + font-size: 14px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-switch-wrapper .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-on { + text-indent: -15px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-switch-wrapper .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-off { + text-indent: 18px; +} +*.sf-bigger .sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-ripple-container { + height: 40px; + left: -7px; + top: -8px; + width: 40px; + left: -12px; + top: -12px; +} +*.sf-bigger .sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -7px !important; /* stylelint-disable-line declaration-no-important */ + top: -8px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + height: 16px; + left: 100%; + margin-left: -29px; + top: 2px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + left: 32px; + height: 24px; + width: 24px; +} +*.sf-bigger .sf-switch-wrapper.sf-small, +*.sf-bigger.sf-switch-wrapper.sf-small, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small { + height: 28px; + width: 60px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle { + height: 16px; + left: 6px; + top: 1px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-ripple-container, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-ripple-container, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-ripple-container, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-ripple-container { + border-radius: 50%; + height: 36px; + left: -7px; + pointer-events: none; + position: absolute; + top: -8px; + width: 36px; + z-index: 1; + left: -10px; + top: -10px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check { + left: -7px !important; /* stylelint-disable-line declaration-no-important */ + top: -8px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -25px; + height: 20px; + width: 20px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-on, *.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + font-size: 12px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-on { + text-indent: -14px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + text-indent: 14px; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -25px; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + height: 16px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active { + left: 30px; +} +.sf-switch-wrapper, +.sf-css.sf-switch-wrapper { + /* stylelint-disable property-no-vendor-prefix */ + -webkit-tap-highlight-color: transparent; +} +.sf-switch-wrapper .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-off { + background-color: rgba(var(--color-sf-surface-variant)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-switch-wrapper .sf-switch-handle, +.sf-css.sf-switch-wrapper .sf-switch-handle { + background-color: rgba(var(--color-sf-outline)); + box-shadow: none; +} +.sf-switch-wrapper .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper .sf-switch-inner, +.sf-css.sf-switch-wrapper .sf-switch-inner { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper .sf-ripple-element, +.sf-css.sf-switch-wrapper .sf-ripple-element { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper .sf-ripple-check .sf-ripple-element, +.sf-css.sf-switch-wrapper .sf-ripple-check .sf-ripple-element { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle.sf-switch-active { + box-shadow: none; +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle:not(.sf-switch-active), +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle:not(.sf-switch-active) { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); + box-shadow: none; +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-off { + opacity: 1; + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + opacity: 1; + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + opacity: 1; + border-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle:not(.sf-switch-active), +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle:not(.sf-switch-active) { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner { + border-color: rgba(var(--color-sf-on-surface), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-white)); +} +.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper:hover .sf-switch-inner { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-outline)); +} +.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-container, +.sf-css.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-check.sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper:not(.sf-switch-disabled):hover .sf-switch-handle:not(.sf-switch-active), +.sf-css.sf-switch-wrapper:not(.sf-switch-disabled):hover .sf-switch-handle:not(.sf-switch-active) { + background-color: rgba(var(--color-sf-outline)); +} +.sf-switch-wrapper.sf-focus .sf-switch-inner, .sf-switch-wrapper:focus .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-focus .sf-switch-inner, +.sf-css.sf-switch-wrapper:focus .sf-switch-inner { + background-color: rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + box-shadow: none; + outline: none; + outline-offset: initial; +} +.sf-switch-wrapper.sf-focus .sf-switch-inner.sf-switch-active, .sf-switch-wrapper:focus .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-focus .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper:focus .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + outline: none; +} +.sf-switch-wrapper.sf-focus .sf-ripple-container, .sf-switch-wrapper:focus .sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-focus .sf-ripple-container, +.sf-css.sf-switch-wrapper:focus .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper.sf-focus .sf-ripple-check.sf-ripple-container, .sf-switch-wrapper:focus .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-focus .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper:focus .sf-ripple-check.sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper.sf-active .sf-switch-inner, .sf-switch-wrapper:active .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-active .sf-switch-inner, +.sf-css.sf-switch-wrapper:active .sf-switch-inner { + background-color: rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + box-shadow: none; + outline: none; + outline-offset: initial; +} +.sf-switch-wrapper.sf-active .sf-switch-inner.sf-switch-active, .sf-switch-wrapper:active .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-active .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper:active .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + outline: none; +} +.sf-switch-wrapper.sf-active .sf-ripple-container, .sf-switch-wrapper:active .sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-active .sf-ripple-container, +.sf-css.sf-switch-wrapper:active .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper.sf-active .sf-ripple-check.sf-ripple-container, .sf-switch-wrapper:active .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-active .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper:active .sf-ripple-check.sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-on { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-off { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + outline: none; +} +.sf-switch-wrapper.sf-rtl .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + background-color: rgba(var(--color-sf-outline)); + box-shadow: none; +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + background-color: rgba(var(--color-sf-surface-variant)); +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner { + border-color: rgba(var(--color-sf-outline)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + opacity: 1; + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-off { + opacity: 1; + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); + box-shadow: none; +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); + box-shadow: none; +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); + opacity: 1; +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner { + border-color: rgba(var(--color-sf-on-surface), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); +} +.sf-switch-wrapper .sf-switch:focus, +.sf-css.sf-switch-wrapper .sf-switch:focus { + box-shadow: none; +} +.sf-switch-wrapper.sf-small.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active { + background-color: transparent; +} +.sf-chip-list { + display: flex; + padding: 0; +} +.sf-chip-list.sf-chip, +.sf-chip-list .sf-chip { + -webkit-tap-highlight-color: transparent; + border: 1px solid; + border-radius: 12px; + font-size: 11px; + margin: 4px; + align-items: center; + justify-content: center; + line-height: 14px; + box-shadow: none; + box-sizing: border-box; + cursor: pointer; + display: inline-flex; + font-weight: 500; + height: 24px; + outline: none; + overflow: hidden; + padding: 0 8px; + position: relative; + transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); + user-select: none; +} +.sf-chip-list.sf-chip .sf-chip-avatar, +.sf-chip-list .sf-chip .sf-chip-avatar { + background-size: cover; + display: flex; + overflow: hidden; + height: 20px; + width: 20px; + border-radius: 12px; + font-size: 12px; + margin: 0 4px 0 -6px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-chip-avatar-wrap, .sf-chip-list.sf-chip.sf-chip-avatar-wrap, +.sf-chip-list .sf-chip .sf-chip-avatar-wrap, +.sf-chip-list .sf-chip.sf-chip-avatar-wrap { + border-radius: 12px; +} +.sf-chip-list.sf-chip .sf-chip-icon, +.sf-chip-list .sf-chip .sf-chip-icon { + background-size: cover; + display: flex; + overflow: hidden; + height: 20px; + width: 20px; + border-radius: 50%; + font-size: 14px; + margin: 0 4px 0 -6px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-chip-text, +.sf-chip-list .sf-chip .sf-chip-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.sf-chip-list.sf-chip .sf-chip-delete, +.sf-chip-list .sf-chip .sf-chip-delete { + background-size: cover; + display: flex; + overflow: hidden; + height: 18px; + width: 14px; + border-radius: 50%; + font-size: 14px; + margin: 0 -2px 0 8px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-image-url, +.sf-chip-list .sf-chip .sf-image-url { + background-size: cover; + display: flex; + overflow: hidden; + height: 20px; + width: 20px; + border-radius: 50%; + font-size: 14px; + margin: 0 4px 0 -6px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-image-url .sf-leading-image, +.sf-chip-list .sf-chip .sf-image-url .sf-leading-image { + width: 100%; + height: 100%; + object-fit: cover; +} +.sf-chip-list.sf-chip .sf-trailing-icon-url, +.sf-chip-list .sf-chip .sf-trailing-icon-url { + background-size: cover; + display: flex; + overflow: hidden; + height: 18px; + width: 18px; + border-radius: 50%; + font-size: 14px; + margin: 0 -2px 0 8px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-trailing-icon-url .sf-trailing-image, +.sf-chip-list .sf-chip .sf-trailing-icon-url .sf-trailing-image { + width: 100%; + height: 100%; + object-fit: cover; +} +.sf-chip-list.sf-chip .sf-chip-template, +.sf-chip-list .sf-chip .sf-chip-template { + display: inline-flex; +} +.sf-chip-list:not(.sf-chip) { + flex-wrap: wrap; +} +.sf-chip-list.sf-multi-selection .sf-chip .sf-selectable-icon { + align-items: center; + justify-content: center; + line-height: 1; + display: flex; + height: 20px; + width: 20px; + margin: 0 4px 0 -6px; + overflow: hidden; + transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); +} +.sf-chip-list.sf-multi-selection .sf-chip:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) .sf-selectable-icon { + width: 0; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-chip-icon-wrap .sf-selectable-icon, .sf-chip-list.sf-multi-selection .sf-chip.sf-chip-avatar-wrap .sf-selectable-icon { + display: none; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-chip-avatar-wrap .sf-selectable-icon { + height: 20px; + width: 20px; + margin: 0 4px 0 -6px; + margin-top: 0; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-active .sf-chip-icon, .sf-chip-list.sf-multi-selection .sf-chip.sf-active .sf-chip-avatar { + display: none; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-active.sf-chip-icon-wrap .sf-selectable-icon, .sf-chip-list.sf-multi-selection .sf-chip.sf-active.sf-chip-avatar-wrap .sf-selectable-icon { + display: flex; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-active:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) .sf-selectable-icon { + width: 20px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-chip-avatar, .sf-chip-list.sf-rtl .sf-chip .sf-chip-avatar { + margin: 0 -6px 0 4px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-chip-icon, .sf-chip-list.sf-rtl .sf-chip .sf-chip-icon { + margin: 0 -6px 0 4px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-chip-delete, .sf-chip-list.sf-rtl .sf-chip .sf-chip-delete { + margin: 0 8px 0 -2px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-trailing-icon-url, .sf-chip-list.sf-rtl .sf-chip .sf-trailing-icon-url { + margin: 0 8px 0 -2px; +} +.sf-chip-list.sf-rtl.sf-multi-selection .sf-chip .sf-selectable-icon { + margin: 0 -6px 0 4px; + margin-top: 0; +} +.sf-chip-list.sf-rtl.sf-multi-selection .sf-chip.sf-chip-avatar-wrap .sf-selectable-icon { + margin: 0 -6px 0 4px; + margin-top: 0; +} +.sf-chip-list.sf-selection .sf-chip.sf-active { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled { + background: rgba(var(--color-sf-secondary), 0); + border-image: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + border-width: 1px; +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: none; +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip, .sf-chip-list .sf-chip { + background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip .sf-selectable-icon path, .sf-chip-list .sf-chip .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip .sf-chip-icon, +.sf-chip-list.sf-chip .sf-chip-delete, .sf-chip-list .sf-chip .sf-chip-icon, +.sf-chip-list .sf-chip .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip .sf-chip-icon path, +.sf-chip-list.sf-chip .sf-chip-delete path, .sf-chip-list .sf-chip .sf-chip-icon path, +.sf-chip-list .sf-chip .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip .sf-chip-avatar, .sf-chip-list .sf-chip .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary-container)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:hover, .sf-chip-list .sf-chip:hover { + background: rgba(var(--color-sf-on-surface), 0.05); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip:hover .sf-selectable-icon path, .sf-chip-list .sf-chip:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip:hover .sf-chip-icon, +.sf-chip-list.sf-chip:hover .sf-chip-delete, .sf-chip-list .sf-chip:hover .sf-chip-icon, +.sf-chip-list .sf-chip:hover .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:hover .sf-chip-icon path, +.sf-chip-list.sf-chip:hover .sf-chip-delete path, .sf-chip-list .sf-chip:hover .sf-chip-icon path, +.sf-chip-list .sf-chip:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:hover .sf-chip-avatar, .sf-chip-list .sf-chip:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused, .sf-chip-list .sf-chip.sf-focused { + box-shadow: none; + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.12), rgba(var(--color-sf-primary), 0.12)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-active, .sf-chip-list .sf-chip.sf-active { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active, .sf-chip-list .sf-chip:active { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip:active .sf-selectable-icon path, .sf-chip-list .sf-chip:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active .sf-chip-icon, +.sf-chip-list.sf-chip:active .sf-chip-delete, .sf-chip-list .sf-chip:active .sf-chip-icon, +.sf-chip-list .sf-chip:active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active .sf-chip-icon path, +.sf-chip-list.sf-chip:active .sf-chip-delete path, .sf-chip-list .sf-chip:active .sf-chip-icon path, +.sf-chip-list .sf-chip:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active .sf-chip-avatar, .sf-chip-list .sf-chip:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-disabled, .sf-chip-list .sf-chip.sf-disabled { + background: rgba(var(--color-sf-secondary), 0); + border-image: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); + opacity: 1; + pointer-events: none; +} +.sf-chip-list.sf-chip.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline, .sf-chip-list .sf-chip.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); + border-width: 1px; +} +.sf-chip-list.sf-chip.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline .sf-chip-delete { + color: var(--color-sf-on-surface-variant); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline .sf-chip-delete path { + fill: var(--color-sf-on-surface-variant); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover, .sf-chip-list .sf-chip.sf-outline:hover { + background: rgba(var(--color-sf-on-surface), 0.05); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-outline.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-outline.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:active, .sf-chip-list .sf-chip.sf-outline:active { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary, .sf-chip-list .sf-chip.sf-primary { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-primary .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover, .sf-chip-list .sf-chip.sf-primary:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary:hover .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused, .sf-chip-list .sf-chip.sf-primary.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active, .sf-chip-list .sf-chip.sf-primary:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary:active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled, .sf-chip-list .sf-chip.sf-primary.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline, .sf-chip-list .sf-chip.sf-primary.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover { + background: rgba(var(--color-sf-primary), 0.08); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused { + background: rgba(var(--color-sf-primary), 0.12); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-primary), 0.16); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active { + background: rgba(var(--color-sf-primary), 0.16); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active, .sf-chip-list .sf-chip.sf-primary.sf-outline:active { + background: rgba(var(--color-sf-primary), 0.16); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled { + background: transparent; + border-image: rgba(var(--color-sf-on-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success, .sf-chip-list .sf-chip.sf-success { + background: rgba(var(--color-sf-success)); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success .sf-chip-delete, .sf-chip-list .sf-chip.sf-success .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-success .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover, .sf-chip-list .sf-chip.sf-success:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-success:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success:hover .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused, .sf-chip-list .sf-chip.sf-success.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active, .sf-chip-list .sf-chip.sf-success.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active, .sf-chip-list .sf-chip.sf-success:active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success:active .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success:active .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled, .sf-chip-list .sf-chip.sf-success.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline, .sf-chip-list .sf-chip.sf-success.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover, .sf-chip-list .sf-chip.sf-success.sf-outline:hover { + background: rgba(var(--color-sf-success), 0.08); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused { + background: rgba(var(--color-sf-success), 0.12); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-success), 0.16); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active { + background: rgba(var(--color-sf-success), 0.16); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active, .sf-chip-list .sf-chip.sf-success.sf-outline:active { + background: rgba(var(--color-sf-success), 0.16); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info, .sf-chip-list .sf-chip.sf-info { + background: rgba(var(--color-sf-info)); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info .sf-chip-delete, .sf-chip-list .sf-chip.sf-info .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-info .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover, .sf-chip-list .sf-chip.sf-info:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-info:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info:hover .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused, .sf-chip-list .sf-chip.sf-info.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active, .sf-chip-list .sf-chip.sf-info.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active, .sf-chip-list .sf-chip.sf-info:active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info:active .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info:active .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled, .sf-chip-list .sf-chip.sf-info.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-outline, .sf-chip-list .sf-chip.sf-info.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover, .sf-chip-list .sf-chip.sf-info.sf-outline:hover { + background: rgba(var(--color-sf-info), 0.08); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused { + background: rgba(var(--color-sf-info), 0.12); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-info), 0.16); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active { + background: rgba(var(--color-sf-info), 0.16); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active, .sf-chip-list .sf-chip.sf-info.sf-outline:active { + background: rgba(var(--color-sf-info), 0.12); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled { + background: transparent; + border-image: rgba(var(--color-sf-on-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning, .sf-chip-list .sf-chip.sf-warning { + background: rgba(var(--color-sf-warning)); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-warning .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover, .sf-chip-list .sf-chip.sf-warning:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning:hover .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused, .sf-chip-list .sf-chip.sf-warning.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active, .sf-chip-list .sf-chip.sf-warning:active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning:active .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning:active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled, .sf-chip-list .sf-chip.sf-warning.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline, .sf-chip-list .sf-chip.sf-warning.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover { + background: rgba(var(--color-sf-warning), 0.08); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused { + background: rgba(var(--color-sf-warning), 0.12); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-warning), 0.16); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active { + background: rgba(var(--color-sf-warning), 0.16); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active, .sf-chip-list .sf-chip.sf-warning.sf-outline:active { + background: rgba(var(--color-sf-warning), 0.16); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger, .sf-chip-list .sf-chip.sf-danger { + background: rgba(var(--color-sf-error)); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-danger .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover, .sf-chip-list .sf-chip.sf-danger:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger:hover .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused, .sf-chip-list .sf-chip.sf-danger.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active, .sf-chip-list .sf-chip.sf-danger:active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger:active .sf-chip-delete { + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger:active .sf-chip-delete path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled, .sf-chip-list .sf-chip.sf-danger.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline, .sf-chip-list .sf-chip.sf-danger.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover { + background: rgba(var(--color-sf-error), 0.08); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused { + background: rgba(var(--color-sf-error), 0.12); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active { + background: rgba(var(--color-sf-error), 0.16); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active { + background: rgba(var(--color-sf-error), 0.16); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active, .sf-chip-list .sf-chip.sf-danger.sf-outline:active { + background: rgba(var(--color-sf-error), 0.16); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled { + background: transparent; + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-fab.sf-btn { + align-items: center; + border-radius: 12px; + display: inline-flex; + min-height: 40px; + min-width: 40px; + padding: 0 16px; + position: absolute; + z-index: 100000; +} +.sf-fab.sf-btn .sf-btn-icon { + margin-top: 0; + font-size: 14px; +} +.sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-fab.sf-btn.sf-fab-fixed { + position: fixed; +} +.sf-fab.sf-btn.sf-fab-top { + top: 16px; +} +.sf-fab.sf-btn.sf-fab-top.sf-fab-middle { + top: 50%; + transform: translateY(-50%); +} +.sf-fab.sf-btn.sf-fab-top.sf-fab-middle.sf-fab-left.sf-fab-center { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.sf-fab.sf-btn.sf-fab-bottom { + bottom: 16px; +} +.sf-fab.sf-btn.sf-fab-left { + left: 16px; +} +.sf-fab.sf-btn.sf-fab-left.sf-fab-center { + left: 50%; + transform: translateX(-50%); +} +.sf-fab.sf-btn.sf-fab-right { + right: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-top { + top: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-top.sf-fab-middle { + top: 50%; + transform: translateY(-50%); +} +.sf-rtl.sf-fab.sf-btn.sf-fab-top.sf-fab-middle.sf-fab-right.sf-fab-center { + right: 50%; + top: 50%; + transform: translate(50%, -50%); +} +.sf-rtl.sf-fab.sf-btn.sf-fab-bottom { + bottom: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-right { + right: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-right.sf-fab-center { + right: 50%; + transform: translateX(50%); +} +.sf-rtl.sf-fab.sf-btn.sf-fab-left { + left: 16px; +} +.sf-fab-hidden { + visibility: hidden; +} +.sf-small.sf-fab.sf-btn, +.sf-small .sf-fab.sf-btn { + border-radius: 8px; + min-height: 32px; + min-width: 32px; + padding: 0 12px; +} +.sf-small.sf-fab.sf-btn.sf-icon-btn, +.sf-small .sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-small.sf-fab.sf-btn .sf-btn-icon, +.sf-small .sf-fab.sf-btn .sf-btn-icon { + font-size: 12px; +} +.sf-large.sf-fab.sf-btn, +.sf-large .sf-fab.sf-btn { + border-radius: 16px; + min-height: 56px; + min-width: 56px; + padding: 0 19px; +} +.sf-large.sf-fab.sf-btn.sf-icon-btn, +.sf-large .sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-large.sf-fab.sf-btn .sf-btn-icon, +.sf-large .sf-fab.sf-btn .sf-btn-icon { + font-size: 14px; +} +.sf-large.sf-small.sf-fab.sf-btn, +.sf-large.sf-small .sf-fab.sf-btn, +.sf-large .sf-small.sf-fab.sf-btn, +.sf-small .sf-large.sf-fab.sf-btn { + border-radius: 16px; + min-height: 48px; + min-width: 48px; + padding: 0 19px; +} +.sf-large.sf-small.sf-fab.sf-btn.sf-icon-btn, +.sf-large.sf-small .sf-fab.sf-btn.sf-icon-btn, +.sf-large .sf-small.sf-fab.sf-btn.sf-icon-btn, +.sf-small .sf-large.sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-large.sf-small.sf-fab.sf-btn .sf-btn-icon, +.sf-large.sf-small .sf-fab.sf-btn .sf-btn-icon, +.sf-large .sf-small.sf-fab.sf-btn .sf-btn-icon, +.sf-small .sf-large.sf-fab.sf-btn .sf-btn-icon { + font-size: 14px; +} +.sf-fab.sf-btn { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12); +} +.sf-fab.sf-btn:hover:not(:focus), .sf-fab.sf-btn:active, .sf-fab.sf-btn.sf-active, .sf-fab.sf-btn:disabled { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12); +} +.sf-fab.sf-btn:focus { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12); +} \ No newline at end of file diff --git a/components/buttons/styles/material3-dark.scss b/components/buttons/styles/material3-dark.scss new file mode 100644 index 0000000..6af73e7 --- /dev/null +++ b/components/buttons/styles/material3-dark.scss @@ -0,0 +1,13 @@ +@import 'react-base/styles/definition/material3-dark.scss'; +@import 'button/material3-dark-definition.scss'; +@import 'button/all.scss'; +@import 'check-box/material3-dark-definition.scss'; +@import 'check-box/all.scss'; +@import 'radio-button/material3-dark-definition.scss'; +@import 'radio-button/all.scss'; +@import 'switch/material3-dark-definition.scss'; +@import 'switch/all.scss'; +@import 'chips/material3-dark-definition.scss'; +@import 'chips/all.scss'; +@import 'floating-action-button/material3-dark-definition.scss'; +@import 'floating-action-button/all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/material3.css b/components/buttons/styles/material3.css new file mode 100644 index 0000000..5c24690 --- /dev/null +++ b/components/buttons/styles/material3.css @@ -0,0 +1,5746 @@ +.sf-dark-mode { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 208, 188, 255; + --color-sf-primary-container: 79, 55, 139; + --color-sf-secondary: 204, 194, 220; + --color-sf-secondary-container: 74, 68, 88; + --color-sf-tertiary: 239, 184, 200; + --color-sf-tertiary-container: 99, 59, 72; + --color-sf-surface: 28, 27, 31; + --color-sf-surface-variant: 73, 69, 79; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 55, 30, 115; + --color-sf-on-primary-container: 234, 221, 255; + --color-sf-on-secondary: 51, 45, 65; + --color-sf-on-secondary-container: 232, 222, 248; + --color-sf-on-tertiary: 73, 37, 50; + --color-sf-on-tertiary-containe: 255, 216, 228; + --color-sf-on-surface: 230, 225, 229; + --color-sf-on-surface-variant: 202, 196, 208; + --color-sf-on-background: 230, 225, 229; + --color-sf-outline: 147, 143, 153; + --color-sf-outline-variant: 68, 71, 70; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 208, 188, 255; + --color-sf-inverse-surface: 230, 225, 229; + --color-sf-inverse-on-surface: 49, 48, 51; + --color-sf-inverse-primary: 103, 80, 164; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 242, 184, 181; + --color-sf-error-container: 140, 29, 24; + --color-sf-on-error: 96, 20, 16; + --color-sf-on-error-container: 249, 222, 220; + --color-sf-success: 83, 202, 23; + --color-sf-success-container: 22, 62, 2; + --color-sf-on-success: 13, 39, 0; + --color-sf-on-success-container: 183, 250, 150; + --color-sf-info: 71, 172, 251; + --color-sf-info-container: 0, 67, 120; + --color-sf-on-info: 0, 51, 91; + --color-sf-on-info-container: 173, 219, 255; + --color-sf-warning: 245, 180, 130; + --color-sf-warning-container: 123, 65, 0; + --color-sf-on-warning: 99, 52, 0; + --color-sf-on-warning-container: 255, 220, 193; + --color-sf-spreadsheet-gridline: 231, 224, 236; + --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff; + --color-sf-success-text: 0, 0, 0; + --color-sf-warning-text: 0, 0, 0; + --color-sf-info-text: 0, 0, 0; + --color-sf-danger-text: 0, 0, 0; + --color-sf-diagram-palette-background: var(--color-sf-inverse-surface); + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary); +} +.sf-btn, +.sf-css.sf-btn { + /* stylelint-disable property-no-vendor-prefix */ + position: relative; + -webkit-font-smoothing: antialiased; + border: 1px solid; + border-radius: 4px; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 500; + justify-content: center; + line-height: 1; + outline: none; + padding: 8px 16px; + text-align: center; + text-decoration: none; + text-transform: none; + user-select: none; + vertical-align: middle; + white-space: nowrap; + letter-spacing: 0.15px; +} +.sf-btn:disabled, +.sf-css.sf-btn:disabled { + cursor: default; +} +.sf-btn:hover, .sf-btn:focus, +.sf-css.sf-btn:hover, +.sf-css.sf-btn:focus { + text-decoration: none; +} +.sf-btn::-moz-focus-inner, +.sf-css.sf-btn::-moz-focus-inner { + border: 0; + padding: 0; +} +.sf-btn .sf-btn-icon, +.sf-css.sf-btn .sf-btn-icon { + display: inline-block; + font-size: 18px; + margin-top: 0; + vertical-align: middle; + width: 1em; + line-height: 1px; +} +.sf-btn .sf-btn-icon.sf-icon-left, +.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.5em; + width: 2em; +} +.sf-btn .sf-btn-icon.sf-icon-right, +.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + width: 2em; + margin-right: -0.5em; +} +.sf-btn .sf-btn-icon.sf-icon-top, +.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 8px; + display: block; + margin-top: 0; + width: auto; +} +.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 8px; + display: block; + margin-top: 0; + width: auto; +} +.sf-btn .sf-btn-icon path, +.sf-css.sf-btn .sf-btn-icon path { + fill-rule: evenodd; + clip-rule: evenodd; +} +.sf-btn.sf-icon-btn, +.sf-css.sf-btn.sf-icon-btn { + padding: 7px 7px; + border-radius: 4px; +} +.sf-btn.sf-top-icon-btn, .sf-btn.sf-bottom-icon-btn, +.sf-css.sf-btn.sf-top-icon-btn, +.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 12px 12px; +} +.sf-btn.sf-round, +.sf-css.sf-btn.sf-round { + border-radius: 50%; + height: 32px; + line-height: 1; + padding: 0; + width: 32px; +} +.sf-btn.sf-round .sf-btn-icon, +.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 1.5em; + margin-top: 0; + width: auto; +} +.sf-btn.sf-rounded, +.sf-css.sf-btn.sf-rounded { + border-radius: 40px; +} +.sf-btn.sf-round-corner, +.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 8px 16px; +} +.sf-btn.sf-rtl .sf-icon-right, +.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.5em; + margin-right: 0; +} +.sf-btn.sf-rtl .sf-icon-left, +.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.5em; +} +.sf-btn.sf-flat, +.sf-css.sf-btn.sf-flat { + border: 1px solid; +} +.sf-btn.sf-small, +.sf-css.sf-btn.sf-small { + font-size: 11px; + line-height: 1.092; + padding: 5px 12px; +} +.sf-btn.sf-small.sf-round-corner, +.sf-css.sf-btn.sf-small.sf-round-corner { + border-radius: 25px; + padding: 5px 12px; +} +.sf-btn.sf-small .sf-btn-icon, +.sf-css.sf-btn.sf-small .sf-btn-icon { + font-size: 16px; + width: 1em; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-left { + margin-left: -0.57143em; + width: 2em; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-right { + margin-right: -0.57143em; + width: 2em; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-btn.sf-small.sf-icon-btn, +.sf-css.sf-btn.sf-small.sf-icon-btn { + padding: 4px 4px; + border-radius: 4px; +} +.sf-btn.sf-small.sf-top-icon-btn, .sf-btn.sf-small.sf-bottom-icon-btn, +.sf-css.sf-btn.sf-small.sf-top-icon-btn, +.sf-css.sf-btn.sf-small.sf-bottom-icon-btn { + line-height: 1; + padding: 12px 12px; +} +.sf-btn.sf-small.sf-round, +.sf-css.sf-btn.sf-small.sf-round { + height: 24px; + line-height: 1; + padding: 0; + width: 24px; + border-radius: 50%; +} +.sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-css.sf-btn.sf-small.sf-round .sf-btn-icon { + font-size: 16px; + line-height: 1; + width: auto; +} +.sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-right { + margin-left: -0.57143em; + margin-right: 0; +} +.sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.57143em; +} +.sf-btn.sf-block, +.sf-css.sf-btn.sf-block { + display: block; + width: 100%; +} +.sf-small .sf-btn, +.sf-small.sf-btn, +.sf-small .sf-css.sf-btn, +.sf-small.sf-css.sf-btn { + font-size: 11px; + line-height: 1.092; + padding: 5px 12px; +} +.sf-small .sf-btn.sf-round-corner, +.sf-small.sf-btn.sf-round-corner, +.sf-small .sf-css.sf-btn.sf-round-corner, +.sf-small.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 5px 12px; +} +.sf-small .sf-btn .sf-btn-icon, +.sf-small.sf-btn .sf-btn-icon, +.sf-small .sf-css.sf-btn .sf-btn-icon, +.sf-small.sf-css.sf-btn .sf-btn-icon { + font-size: 16px; + width: 1em; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-left, +.sf-small.sf-btn .sf-btn-icon.sf-icon-left, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-left, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.57143em; + width: 2em; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-right, +.sf-small.sf-btn .sf-btn-icon.sf-icon-right, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-right, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + margin-right: -0.57143em; + width: 2em; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-top, +.sf-small.sf-btn .sf-btn-icon.sf-icon-top, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-top, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-small .sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-small.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-small .sf-btn.sf-icon-btn, +.sf-small.sf-btn.sf-icon-btn, +.sf-small .sf-css.sf-btn.sf-icon-btn, +.sf-small.sf-css.sf-btn.sf-icon-btn { + padding: 4px 4px; + border-radius: 4px; +} +.sf-small .sf-btn.sf-top-icon-btn, .sf-small .sf-btn.sf-bottom-icon-btn, +.sf-small.sf-btn.sf-top-icon-btn, +.sf-small.sf-btn.sf-bottom-icon-btn, +.sf-small .sf-css.sf-btn.sf-top-icon-btn, +.sf-small .sf-css.sf-btn.sf-bottom-icon-btn, +.sf-small.sf-css.sf-btn.sf-top-icon-btn, +.sf-small.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 12px 12px; +} +.sf-small .sf-btn.sf-round, +.sf-small.sf-btn.sf-round, +.sf-small .sf-css.sf-btn.sf-round, +.sf-small.sf-css.sf-btn.sf-round { + height: 24px; + line-height: 1; + padding: 0; + width: 24px; + border-radius: 50%; +} +.sf-small .sf-btn.sf-round .sf-btn-icon, +.sf-small.sf-btn.sf-round .sf-btn-icon, +.sf-small .sf-css.sf-btn.sf-round .sf-btn-icon, +.sf-small.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 16px; + line-height: 1; + width: auto; +} +.sf-small .sf-btn.sf-rtl .sf-icon-right, +.sf-small.sf-btn.sf-rtl .sf-icon-right, +.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-right, +.sf-small.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.57143em; + margin-right: 0; +} +.sf-small .sf-btn.sf-rtl .sf-icon-left, +.sf-small.sf-btn.sf-rtl .sf-icon-left, +.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-left, +.sf-small.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.57143em; +} +.sf-large.sf-small .sf-btn, +.sf-large .sf-small.sf-btn, +.sf-large.sf-small .sf-css.sf-btn, +.sf-large .sf-small.sf-css.sf-btn { + font-size: 14px; + line-height: 1.476; + padding: 7px 20px; +} +.sf-large.sf-small .sf-btn.sf-round-corner, +.sf-large .sf-small.sf-btn.sf-round-corner, +.sf-large.sf-small .sf-css.sf-btn.sf-round-corner, +.sf-large .sf-small.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 7px 20px; +} +.sf-large.sf-small .sf-btn .sf-btn-icon, +.sf-large .sf-small.sf-btn .sf-btn-icon, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon { + font-size: 18px; + width: 1em; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-left, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.5em; + width: 2em; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-right, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + margin-right: -0.5em; + width: 2em; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-top, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-large.sf-small .sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-small.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-small .sf-css.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-small.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-large.sf-small .sf-btn.sf-icon-btn, +.sf-large .sf-small.sf-btn.sf-icon-btn, +.sf-large.sf-small .sf-css.sf-btn.sf-icon-btn, +.sf-large .sf-small.sf-css.sf-btn.sf-icon-btn { + padding: 6px 13px; + border-radius: 4px; +} +.sf-large.sf-small .sf-btn.sf-top-icon-btn, .sf-large.sf-small .sf-btn.sf-bottom-icon-btn, +.sf-large .sf-small.sf-btn.sf-top-icon-btn, +.sf-large .sf-small.sf-btn.sf-bottom-icon-btn, +.sf-large.sf-small .sf-css.sf-btn.sf-top-icon-btn, +.sf-large.sf-small .sf-css.sf-btn.sf-bottom-icon-btn, +.sf-large .sf-small.sf-css.sf-btn.sf-top-icon-btn, +.sf-large .sf-small.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 16px 16px; +} +.sf-large.sf-small .sf-btn.sf-round, +.sf-large .sf-small.sf-btn.sf-round, +.sf-large.sf-small .sf-css.sf-btn.sf-round, +.sf-large .sf-small.sf-css.sf-btn.sf-round { + height: 36px; + line-height: 1; + padding: 0; + width: 36px; +} +.sf-large.sf-small .sf-btn.sf-round .sf-btn-icon, +.sf-large .sf-small.sf-btn.sf-round .sf-btn-icon, +.sf-large.sf-small .sf-css.sf-btn.sf-round .sf-btn-icon, +.sf-large .sf-small.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 0; + width: auto; +} +.sf-large.sf-small .sf-btn.sf-rtl .sf-icon-right, +.sf-large .sf-small.sf-btn.sf-rtl .sf-icon-right, +.sf-large.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-right, +.sf-large .sf-small.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.5em; + margin-right: 0; +} +.sf-large.sf-small .sf-btn.sf-rtl .sf-icon-left, +.sf-large .sf-small.sf-btn.sf-rtl .sf-icon-left, +.sf-large.sf-small .sf-css.sf-btn.sf-rtl .sf-icon-left, +.sf-large .sf-small.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.5em; +} +.sf-large .sf-btn, +.sf-large.sf-btn, +.sf-large .sf-css.sf-btn, +.sf-large.sf-css.sf-btn { + font-size: 14px; + line-height: 1.286; + padding: 10px 24px; +} +.sf-large .sf-btn.sf-round-corner, +.sf-large.sf-btn.sf-round-corner, +.sf-large .sf-css.sf-btn.sf-round-corner, +.sf-large.sf-css.sf-btn.sf-round-corner { + border-radius: 25px; + padding: 10px 24px; +} +.sf-large .sf-btn .sf-btn-icon, +.sf-large.sf-btn .sf-btn-icon, +.sf-large .sf-css.sf-btn .sf-btn-icon, +.sf-large.sf-css.sf-btn .sf-btn-icon { + font-size: 22px; + width: 1em; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-left, +.sf-large.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-left, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-left { + margin-left: -0.2em; + width: 2em; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-right, +.sf-large.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-right, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-right { + margin-right: -0.2em; + width: 2em; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-top, +.sf-large.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-top, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-top { + padding-bottom: 8px; + width: auto; +} +.sf-large .sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-css.sf-btn .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-css.sf-btn .sf-btn-icon.sf-icon-bottom { + padding-top: 8px; + width: auto; +} +.sf-large .sf-btn.sf-icon-btn, +.sf-large.sf-btn.sf-icon-btn, +.sf-large .sf-css.sf-btn.sf-icon-btn, +.sf-large.sf-css.sf-btn.sf-icon-btn { + padding: 11px 11px; + border-radius: 4px; +} +.sf-large .sf-btn.sf-top-icon-btn, .sf-large .sf-btn.sf-bottom-icon-btn, +.sf-large.sf-btn.sf-top-icon-btn, +.sf-large.sf-btn.sf-bottom-icon-btn, +.sf-large .sf-css.sf-btn.sf-top-icon-btn, +.sf-large .sf-css.sf-btn.sf-bottom-icon-btn, +.sf-large.sf-css.sf-btn.sf-top-icon-btn, +.sf-large.sf-css.sf-btn.sf-bottom-icon-btn { + line-height: 1; + padding: 16px 16px; +} +.sf-large .sf-btn.sf-round, +.sf-large.sf-btn.sf-round, +.sf-large .sf-css.sf-btn.sf-round, +.sf-large.sf-css.sf-btn.sf-round { + height: 40px; + line-height: 1; + padding: 0; + width: 40px; + border-radius: 50%; +} +.sf-large .sf-btn.sf-round .sf-btn-icon, +.sf-large.sf-btn.sf-round .sf-btn-icon, +.sf-large .sf-css.sf-btn.sf-round .sf-btn-icon, +.sf-large.sf-css.sf-btn.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 1.5em; + width: auto; +} +.sf-large .sf-btn.sf-rtl .sf-icon-right, +.sf-large.sf-btn.sf-rtl .sf-icon-right, +.sf-large .sf-css.sf-btn.sf-rtl .sf-icon-right, +.sf-large.sf-css.sf-btn.sf-rtl .sf-icon-right { + margin-left: -0.2em; + margin-right: 0; +} +.sf-large .sf-btn.sf-rtl .sf-icon-left, +.sf-large.sf-btn.sf-rtl .sf-icon-left, +.sf-large .sf-css.sf-btn.sf-rtl .sf-icon-left, +.sf-large.sf-css.sf-btn.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.2em; +} +.sf-large .sf-btn.sf-small, +.sf-large.sf-btn.sf-small, +.sf-large .sf-css.sf-btn.sf-small, +.sf-large.sf-css.sf-btn.sf-small { + font-size: 14px; + line-height: 1.476; + padding: 7px 20px; +} +.sf-large .sf-btn.sf-small.sf-round-corner, +.sf-large.sf-btn.sf-small.sf-round-corner, +.sf-large .sf-css.sf-btn.sf-small.sf-round-corner, +.sf-large.sf-css.sf-btn.sf-small.sf-round-corner { + border-radius: 25px; + padding: 7px 20px; +} +.sf-large .sf-btn.sf-small .sf-btn-icon, +.sf-large.sf-btn.sf-small .sf-btn-icon, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon { + font-size: 18px; + width: 1em; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-left, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-left { + margin-left: -0.5em; + width: 2em; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-right, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-right { + margin-right: -0.5em; + width: 2em; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-top, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-top { + padding-bottom: 6px; + width: auto; +} +.sf-large .sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-large .sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom, +.sf-large.sf-css.sf-btn.sf-small .sf-btn-icon.sf-icon-bottom { + padding-top: 6px; + width: auto; +} +.sf-large .sf-btn.sf-small.sf-icon-btn, +.sf-large.sf-btn.sf-small.sf-icon-btn, +.sf-large .sf-css.sf-btn.sf-small.sf-icon-btn, +.sf-large.sf-css.sf-btn.sf-small.sf-icon-btn { + padding: 6px 13px; + border-radius: 4px; +} +.sf-large .sf-btn.sf-small.sf-top-icon-btn, .sf-large .sf-btn.sf-small.sf-bottom-icon-btn, +.sf-large.sf-btn.sf-small.sf-top-icon-btn, +.sf-large.sf-btn.sf-small.sf-bottom-icon-btn, +.sf-large .sf-css.sf-btn.sf-small.sf-top-icon-btn, +.sf-large .sf-css.sf-btn.sf-small.sf-bottom-icon-btn, +.sf-large.sf-css.sf-btn.sf-small.sf-top-icon-btn, +.sf-large.sf-css.sf-btn.sf-small.sf-bottom-icon-btn { + line-height: 1; + padding: 16px 16px; +} +.sf-large .sf-btn.sf-small.sf-round, +.sf-large.sf-btn.sf-small.sf-round, +.sf-large .sf-css.sf-btn.sf-small.sf-round, +.sf-large.sf-css.sf-btn.sf-small.sf-round { + height: 36px; + line-height: 1; + padding: 0; + width: 36px; + border-radius: 50%; +} +.sf-large .sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-large.sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-large .sf-css.sf-btn.sf-small.sf-round .sf-btn-icon, +.sf-large.sf-css.sf-btn.sf-small.sf-round .sf-btn-icon { + font-size: 18px; + line-height: 0; + width: auto; +} +.sf-large .sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-large.sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-large .sf-css.sf-btn.sf-small.sf-rtl .sf-icon-right, +.sf-large.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-right { + margin-left: -0.5em; + margin-right: 0; +} +.sf-large .sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-large.sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-large .sf-css.sf-btn.sf-small.sf-rtl .sf-icon-left, +.sf-large.sf-css.sf-btn.sf-small.sf-rtl .sf-icon-left { + margin-left: 0; + margin-right: -0.5em; +} +/* stylelint-disable property-no-vendor-prefix */ +.sf-btn, +.sf-css.sf-btn { + -webkit-tap-highlight-color: transparent; + background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-surface), 0), rgba(var(--color-sf-surface), 0)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); +} +.sf-btn:hover, +.sf-css.sf-btn:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn:focus, +.sf-css.sf-btn:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + color: rgba(var(--color-sf-on-surface)); + outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid; + outline-offset: 0; + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn:focus-visible, +.sf-css.sf-btn:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn:active, +.sf-css.sf-btn:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-active, +.sf-css.sf-btn.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn:disabled, .sf-btn.sf-disabled, +.sf-css.sf-btn:disabled, +.sf-css.sf-btn.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn .sf-ripple-element, +.sf-css.sf-btn .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.24); +} +.sf-btn.sf-round, .sf-btn.sf-round-edge, +.sf-css.sf-btn.sf-round, +.sf-css.sf-btn.sf-round-edge { + background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 0), rgba(var(--color-sf-surface), 0)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-round:hover, .sf-btn.sf-round-edge:hover, +.sf-css.sf-btn.sf-round:hover, +.sf-css.sf-btn.sf-round-edge:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-round:focus, .sf-btn.sf-round-edge:focus, +.sf-css.sf-btn.sf-round:focus, +.sf-css.sf-btn.sf-round-edge:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); + outline: rgba(var(--color-sf-white)) 0 solid; + outline-offset: 0; +} +.sf-btn.sf-round:focus-visible, .sf-btn.sf-round-edge:focus-visible, +.sf-css.sf-btn.sf-round:focus-visible, +.sf-css.sf-btn.sf-round-edge:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-round:active, .sf-btn.sf-round-edge:active, +.sf-css.sf-btn.sf-round:active, +.sf-css.sf-btn.sf-round-edge:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-surface)); + outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid; + outline-offset: 0; +} +.sf-btn.sf-round:disabled, .sf-btn.sf-round.sf-disabled, .sf-btn.sf-round-edge:disabled, .sf-btn.sf-round-edge.sf-disabled, +.sf-css.sf-btn.sf-round:disabled, +.sf-css.sf-btn.sf-round.sf-disabled, +.sf-css.sf-btn.sf-round-edge:disabled, +.sf-css.sf-btn.sf-round-edge.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-round.sf-primary:hover, .sf-btn.sf-round.sf-filled:hover, .sf-btn.sf-round-edge.sf-primary:hover, .sf-btn.sf-round-edge.sf-filled:hover, +.sf-css.sf-btn.sf-round.sf-primary:hover, +.sf-css.sf-btn.sf-round.sf-filled:hover, +.sf-css.sf-btn.sf-round-edge.sf-primary:hover, +.sf-css.sf-btn.sf-round-edge.sf-filled:hover { + border-color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-round.sf-primary:focus, .sf-btn.sf-round.sf-filled:focus, .sf-btn.sf-round-edge.sf-primary:focus, .sf-btn.sf-round-edge.sf-filled:focus, +.sf-css.sf-btn.sf-round.sf-primary:focus, +.sf-css.sf-btn.sf-round.sf-filled:focus, +.sf-css.sf-btn.sf-round-edge.sf-primary:focus, +.sf-css.sf-btn.sf-round-edge.sf-filled:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-primary:focus-visible, .sf-btn.sf-round.sf-filled:focus-visible, .sf-btn.sf-round-edge.sf-primary:focus-visible, .sf-btn.sf-round-edge.sf-filled:focus-visible, +.sf-css.sf-btn.sf-round.sf-primary:focus-visible, +.sf-css.sf-btn.sf-round.sf-filled:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-primary:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-round.sf-success:hover, .sf-btn.sf-round-edge.sf-success:hover, +.sf-css.sf-btn.sf-round.sf-success:hover, +.sf-css.sf-btn.sf-round-edge.sf-success:hover { + border-color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-round.sf-success:focus, .sf-btn.sf-round-edge.sf-success:focus, +.sf-css.sf-btn.sf-round.sf-success:focus, +.sf-css.sf-btn.sf-round-edge.sf-success:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-success:focus-visible, .sf-btn.sf-round-edge.sf-success:focus-visible, +.sf-css.sf-btn.sf-round.sf-success:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-round.sf-info:hover, .sf-btn.sf-round-edge.sf-info:hover, +.sf-css.sf-btn.sf-round.sf-info:hover, +.sf-css.sf-btn.sf-round-edge.sf-info:hover { + border-color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-round.sf-info:focus, .sf-btn.sf-round-edge.sf-info:focus, +.sf-css.sf-btn.sf-round.sf-info:focus, +.sf-css.sf-btn.sf-round-edge.sf-info:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-info:focus-visible, .sf-btn.sf-round-edge.sf-info:focus-visible, +.sf-css.sf-btn.sf-round.sf-info:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-round.sf-warning:hover, .sf-btn.sf-round-edge.sf-warning:hover, +.sf-css.sf-btn.sf-round.sf-warning:hover, +.sf-css.sf-btn.sf-round-edge.sf-warning:hover { + border-color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-round.sf-warning:focus, .sf-btn.sf-round-edge.sf-warning:focus, +.sf-css.sf-btn.sf-round.sf-warning:focus, +.sf-css.sf-btn.sf-round-edge.sf-warning:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-warning:focus-visible, .sf-btn.sf-round-edge.sf-warning:focus-visible, +.sf-css.sf-btn.sf-round.sf-warning:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-round.sf-danger:hover, .sf-btn.sf-round-edge.sf-danger:hover, +.sf-css.sf-btn.sf-round.sf-danger:hover, +.sf-css.sf-btn.sf-round-edge.sf-danger:hover { + border-color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-round.sf-danger:focus, .sf-btn.sf-round-edge.sf-danger:focus, +.sf-css.sf-btn.sf-round.sf-danger:focus, +.sf-css.sf-btn.sf-round-edge.sf-danger:focus { + outline: rgba(var(--color-sf-white)) 0 solid; +} +.sf-btn.sf-round.sf-danger:focus-visible, .sf-btn.sf-round-edge.sf-danger:focus-visible, +.sf-css.sf-btn.sf-round.sf-danger:focus-visible, +.sf-css.sf-btn.sf-round-edge.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-filled, +.sf-css.sf-btn.sf-filled { + background: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: none; +} +.sf-btn.sf-filled:hover, +.sf-css.sf-btn.sf-filled:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-filled:focus, +.sf-css.sf-btn.sf-filled:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid; + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-filled:focus-visible, +.sf-css.sf-btn.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-filled:active, +.sf-css.sf-btn.sf-filled:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-filled.sf-active, +.sf-css.sf-btn.sf-filled.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-filled:disabled, .sf-btn.sf-filled.sf-disabled, +.sf-css.sf-btn.sf-filled:disabled, +.sf-css.sf-btn.sf-filled.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-filled .sf-ripple-element, +.sf-css.sf-btn.sf-filled .sf-ripple-element { + background: rgba(var(--color-sf-on-primary), 0.24); +} +.sf-btn.sf-success, +.sf-css.sf-btn.sf-success { + background: rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: none; +} +.sf-btn.sf-success:hover, +.sf-css.sf-btn.sf-success:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-success-text)); +} +.sf-btn.sf-success:focus, +.sf-css.sf-btn.sf-success:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-success:focus-visible, +.sf-css.sf-btn.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-success:active, .sf-btn.sf-success.sf-active, +.sf-css.sf-btn.sf-success:active, +.sf-css.sf-btn.sf-success.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-success:disabled, .sf-btn.sf-success.sf-disabled, +.sf-css.sf-btn.sf-success:disabled, +.sf-css.sf-btn.sf-success.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-success .sf-ripple-element, +.sf-css.sf-btn.sf-success .sf-ripple-element { + background: rgba(var(--color-sf-success-text), 0.24); +} +.sf-btn.sf-info, +.sf-css.sf-btn.sf-info { + background: rgba(var(--color-sf-info)); + border-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + box-shadow: none; +} +.sf-btn.sf-info:hover, +.sf-css.sf-btn.sf-info:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-info-text)); +} +.sf-btn.sf-info:focus, +.sf-css.sf-btn.sf-info:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + border-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-info:focus-visible, +.sf-css.sf-btn.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-info:active, .sf-btn.sf-info.sf-active, +.sf-css.sf-btn.sf-info:active, +.sf-css.sf-btn.sf-info.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + border-color: rgba(var(--color-sf-info)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-info:disabled, .sf-btn.sf-info.sf-disabled, +.sf-css.sf-btn.sf-info:disabled, +.sf-css.sf-btn.sf-info.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-info .sf-ripple-element, +.sf-css.sf-btn.sf-info .sf-ripple-element { + background: rgba(var(--color-sf-info-text), 0.24); +} +.sf-btn.sf-warning, +.sf-css.sf-btn.sf-warning { + background: rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: none; +} +.sf-btn.sf-warning:hover, +.sf-css.sf-btn.sf-warning:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-warning-text)); +} +.sf-btn.sf-warning:focus, +.sf-css.sf-btn.sf-warning:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-warning:focus-visible, +.sf-css.sf-btn.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-warning:active, .sf-btn.sf-warning.sf-active, +.sf-css.sf-btn.sf-warning:active, +.sf-css.sf-btn.sf-warning.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-warning:disabled, .sf-btn.sf-warning.sf-disabled, +.sf-css.sf-btn.sf-warning:disabled, +.sf-css.sf-btn.sf-warning.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-warning .sf-ripple-element, +.sf-css.sf-btn.sf-warning .sf-ripple-element { + background: rgba(var(--color-sf-warning-text), 0.24); +} +.sf-btn.sf-danger, +.sf-css.sf-btn.sf-danger { + background: rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: none; +} +.sf-btn.sf-danger:hover, +.sf-css.sf-btn.sf-danger:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-danger:focus, +.sf-css.sf-btn.sf-danger:focus { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-danger:focus-visible, +.sf-css.sf-btn.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-danger:active, +.sf-css.sf-btn.sf-danger:active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); +} +.sf-btn.sf-danger.sf-active, +.sf-css.sf-btn.sf-danger.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-danger:disabled, .sf-btn.sf-danger.sf-disabled, +.sf-css.sf-btn.sf-danger:disabled, +.sf-css.sf-btn.sf-danger.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-color: rgba(var(--color-sf-secondary), 0); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-danger .sf-ripple-element, +.sf-css.sf-btn.sf-danger .sf-ripple-element { + background: rgba(var(--color-sf-danger-text), 0.24); +} +.sf-btn.sf-flat, +.sf-css.sf-btn.sf-flat { + background: transparent; + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-flat:hover, +.sf-css.sf-btn.sf-flat:hover { + background: rgba(var(--color-sf-on-surface), 0.08); + border-color: none; + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-flat:focus, +.sf-css.sf-btn.sf-flat:focus { + background: rgba(var(--color-sf-on-surface), 0.08); + border-color: none; + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-btn.sf-flat:focus-visible, +.sf-css.sf-btn.sf-flat:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-flat:active, .sf-btn.sf-flat.sf-active, +.sf-css.sf-btn.sf-flat:active, +.sf-css.sf-btn.sf-flat.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-btn.sf-flat:disabled, .sf-btn.sf-flat.sf-disabled, +.sf-css.sf-btn.sf-flat:disabled, +.sf-css.sf-btn.sf-flat.sf-disabled { + background: transparent; + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat .sf-ripple-element, +.sf-css.sf-btn.sf-flat .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.24); +} +.sf-btn.sf-flat.sf-primary, .sf-btn.sf-flat.sf-filled, +.sf-css.sf-btn.sf-flat.sf-primary, +.sf-css.sf-btn.sf-flat.sf-filled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:hover, .sf-btn.sf-flat.sf-filled:hover, +.sf-css.sf-btn.sf-flat.sf-primary:hover, +.sf-css.sf-btn.sf-flat.sf-filled:hover { + background: rgba(var(--color-sf-primary), 0.08); + border-color: none; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:focus, .sf-btn.sf-flat.sf-filled:focus, +.sf-css.sf-btn.sf-flat.sf-primary:focus, +.sf-css.sf-btn.sf-flat.sf-filled:focus { + background: rgba(var(--color-sf-primary), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:focus-visible, .sf-btn.sf-flat.sf-filled:focus-visible, +.sf-css.sf-btn.sf-flat.sf-primary:focus-visible, +.sf-css.sf-btn.sf-flat.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-flat.sf-primary:active, .sf-btn.sf-flat.sf-primary.sf-active, .sf-btn.sf-flat.sf-filled:active, .sf-btn.sf-flat.sf-filled.sf-active, +.sf-css.sf-btn.sf-flat.sf-primary:active, +.sf-css.sf-btn.sf-flat.sf-primary.sf-active, +.sf-css.sf-btn.sf-flat.sf-filled:active, +.sf-css.sf-btn.sf-flat.sf-filled.sf-active { + background: rgba(var(--color-sf-primary), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-flat.sf-primary:disabled, .sf-btn.sf-flat.sf-primary.sf-disabled, .sf-btn.sf-flat.sf-filled:disabled, .sf-btn.sf-flat.sf-filled.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-primary:disabled, +.sf-css.sf-btn.sf-flat.sf-primary.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-filled:disabled, +.sf-css.sf-btn.sf-flat.sf-filled.sf-disabled { + background: transparent; + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-primary .sf-ripple-element, .sf-btn.sf-flat.sf-filled .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-primary .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-filled .sf-ripple-element { + background: rgba(var(--color-sf-on-primary), 0.24); +} +.sf-btn.sf-flat.sf-success, +.sf-css.sf-btn.sf-flat.sf-success { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-flat.sf-success:hover, +.sf-css.sf-btn.sf-flat.sf-success:hover { + background: rgba(var(--color-sf-success), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-flat.sf-success:focus, +.sf-css.sf-btn.sf-flat.sf-success:focus { + background: rgba(var(--color-sf-success), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-success)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-success:focus-visible, +.sf-css.sf-btn.sf-flat.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-success-text)); +} +.sf-btn.sf-flat.sf-success:active, .sf-btn.sf-flat.sf-success.sf-active, +.sf-css.sf-btn.sf-flat.sf-success:active, +.sf-css.sf-btn.sf-flat.sf-success.sf-active { + background: rgba(var(--color-sf-success), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-success)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-success:disabled, .sf-btn.sf-flat.sf-success.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-success:disabled, +.sf-css.sf-btn.sf-flat.sf-success.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-success .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-success .sf-ripple-element { + background: rgba(var(--color-sf-success-text), 0.24); +} +.sf-btn.sf-flat.sf-info, +.sf-css.sf-btn.sf-flat.sf-info { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-flat.sf-info:hover, +.sf-css.sf-btn.sf-flat.sf-info:hover { + background: rgba(var(--color-sf-info), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-flat.sf-info:focus, +.sf-css.sf-btn.sf-flat.sf-info:focus { + background: rgba(var(--color-sf-info), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-info)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-info:focus-visible, +.sf-css.sf-btn.sf-flat.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-info-text)); +} +.sf-btn.sf-flat.sf-info:active, .sf-btn.sf-flat.sf-info.sf-active, +.sf-css.sf-btn.sf-flat.sf-info:active, +.sf-css.sf-btn.sf-flat.sf-info.sf-active { + background: rgba(var(--color-sf-info), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-info)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-info:disabled, .sf-btn.sf-flat.sf-info.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-info:disabled, +.sf-css.sf-btn.sf-flat.sf-info.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-info .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-info .sf-ripple-element { + background: rgba(var(--color-sf-info-text), 0.24); +} +.sf-btn.sf-flat.sf-warning, +.sf-css.sf-btn.sf-flat.sf-warning { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-flat.sf-warning:hover, +.sf-css.sf-btn.sf-flat.sf-warning:hover { + background: rgba(var(--color-sf-warning), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-flat.sf-warning:focus, +.sf-css.sf-btn.sf-flat.sf-warning:focus { + background: rgba(var(--color-sf-warning), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-warning)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-warning:focus-visible, +.sf-css.sf-btn.sf-flat.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-warning-text)); +} +.sf-btn.sf-flat.sf-warning:active, .sf-btn.sf-flat.sf-warning.sf-active, +.sf-css.sf-btn.sf-flat.sf-warning:active, +.sf-css.sf-btn.sf-flat.sf-warning.sf-active { + background: rgba(var(--color-sf-warning), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-warning)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-warning:disabled, .sf-btn.sf-flat.sf-warning.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-warning:disabled, +.sf-css.sf-btn.sf-flat.sf-warning.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-warning .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-warning .sf-ripple-element { + background: rgba(var(--color-sf-warning-text), 0.24); +} +.sf-btn.sf-flat.sf-danger, +.sf-css.sf-btn.sf-flat.sf-danger { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-flat.sf-danger:hover, +.sf-css.sf-btn.sf-flat.sf-danger:hover { + background: rgba(var(--color-sf-error), 0.08); + border-color: transparent; + box-shadow: none; + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-flat.sf-danger:focus, +.sf-css.sf-btn.sf-flat.sf-danger:focus { + background: rgba(var(--color-sf-error), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-error)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-danger:focus-visible, +.sf-css.sf-btn.sf-flat.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-flat.sf-danger:active, .sf-btn.sf-flat.sf-danger.sf-active, +.sf-css.sf-btn.sf-flat.sf-danger:active, +.sf-css.sf-btn.sf-flat.sf-danger.sf-active { + background: rgba(var(--color-sf-error), 0.12); + border-color: transparent; + color: rgba(var(--color-sf-error)); + box-shadow: none; +} +.sf-btn.sf-flat.sf-danger:disabled, .sf-btn.sf-flat.sf-danger.sf-disabled, +.sf-css.sf-btn.sf-flat.sf-danger:disabled, +.sf-css.sf-btn.sf-flat.sf-danger.sf-disabled { + background: transparent; + border-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-flat.sf-danger .sf-ripple-element, +.sf-css.sf-btn.sf-flat.sf-danger .sf-ripple-element { + background: rgba(var(--color-sf-danger-text), 0.24); +} +.sf-btn.sf-outlined, +.sf-css.sf-btn.sf-outlined { + background: transparent; + border-color: rgba(var(--color-sf-outline)); + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); + border: 1px solid; +} +.sf-btn.sf-outlined:hover, +.sf-css.sf-btn.sf-outlined:hover { + background: rgba(var(--color-sf-on-surface), 0.08); + border-color: rgba(var(--color-sf-outline)); + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-outlined:focus, +.sf-css.sf-btn.sf-outlined:focus { + background: rgba(var(--color-sf-on-surface), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-outlined:focus-visible, +.sf-css.sf-btn.sf-outlined:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-outlined:active, .sf-btn.sf-outlined.sf-active, +.sf-css.sf-btn.sf-outlined:active, +.sf-css.sf-btn.sf-outlined.sf-active { + background: rgba(var(--color-sf-on-surface), 0.12); + border-color: rgba(var(--color-sf-outline)); + box-shadow: none; + color: rgba(var(--color-sf-on-surface)); +} +.sf-btn.sf-outlined:disabled, .sf-btn.sf-outlined.sf-disabled, +.sf-css.sf-btn.sf-outlined:disabled, +.sf-css.sf-btn.sf-outlined.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-primary, .sf-btn.sf-outlined.sf-filled, +.sf-css.sf-btn.sf-outlined.sf-primary, +.sf-css.sf-btn.sf-outlined.sf-filled { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:hover, .sf-btn.sf-outlined.sf-filled:hover, +.sf-css.sf-btn.sf-outlined.sf-primary:hover, +.sf-css.sf-btn.sf-outlined.sf-filled:hover { + background: rgba(var(--color-sf-primary), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:focus, .sf-btn.sf-outlined.sf-filled:focus, +.sf-css.sf-btn.sf-outlined.sf-primary:focus, +.sf-css.sf-btn.sf-outlined.sf-filled:focus { + background: rgba(var(--color-sf-primary), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:focus-visible, .sf-btn.sf-outlined.sf-filled:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-primary:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-filled:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-on-primary)); +} +.sf-btn.sf-outlined.sf-primary:active, .sf-btn.sf-outlined.sf-primary.sf-active, .sf-btn.sf-outlined.sf-filled:active, .sf-btn.sf-outlined.sf-filled.sf-active, +.sf-css.sf-btn.sf-outlined.sf-primary:active, +.sf-css.sf-btn.sf-outlined.sf-primary.sf-active, +.sf-css.sf-btn.sf-outlined.sf-filled:active, +.sf-css.sf-btn.sf-outlined.sf-filled.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; + color: rgba(var(--color-sf-on-primary)); + background: rgba(var(--color-sf-primary), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-primary)); +} +.sf-btn.sf-outlined.sf-primary:disabled, .sf-btn.sf-outlined.sf-primary.sf-disabled, .sf-btn.sf-outlined.sf-filled:disabled, .sf-btn.sf-outlined.sf-filled.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-primary:disabled, +.sf-css.sf-btn.sf-outlined.sf-primary.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-filled:disabled, +.sf-css.sf-btn.sf-outlined.sf-filled.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-success, +.sf-css.sf-btn.sf-outlined.sf-success { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:hover, +.sf-css.sf-btn.sf-outlined.sf-success:hover { + background: rgba(var(--color-sf-success), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:focus, +.sf-css.sf-btn.sf-outlined.sf-success:focus { + background: rgba(var(--color-sf-success), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-success:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-success-text)); +} +.sf-btn.sf-outlined.sf-success:active, .sf-btn.sf-outlined.sf-success.sf-active, +.sf-css.sf-btn.sf-outlined.sf-success:active, +.sf-css.sf-btn.sf-outlined.sf-success.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-color: rgba(var(--color-sf-success)); + box-shadow: none; + color: rgba(var(--color-sf-success-text)); + background: rgba(var(--color-sf-success), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-success)); +} +.sf-btn.sf-outlined.sf-success:disabled, .sf-btn.sf-outlined.sf-success.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-success:disabled, +.sf-css.sf-btn.sf-outlined.sf-success.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-info, +.sf-css.sf-btn.sf-outlined.sf-info { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:hover, +.sf-css.sf-btn.sf-outlined.sf-info:hover { + background: rgba(var(--color-sf-info), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:focus, +.sf-css.sf-btn.sf-outlined.sf-info:focus { + background: rgba(var(--color-sf-info), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-info:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-info-text)); +} +.sf-btn.sf-outlined.sf-info:active, .sf-btn.sf-outlined.sf-info.sf-active, +.sf-css.sf-btn.sf-outlined.sf-info:active, +.sf-css.sf-btn.sf-outlined.sf-info.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-color: rgba(var(--color-sf-info)); + box-shadow: none; + color: rgba(var(--color-sf-info-text)); + background: rgba(var(--color-sf-info), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-outlined.sf-info:disabled, .sf-btn.sf-outlined.sf-info.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-info:disabled, +.sf-css.sf-btn.sf-outlined.sf-info.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-warning, +.sf-css.sf-btn.sf-outlined.sf-warning { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:hover, +.sf-css.sf-btn.sf-outlined.sf-warning:hover { + background: rgba(var(--color-sf-warning), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:focus, +.sf-css.sf-btn.sf-outlined.sf-warning:focus { + background: rgba(var(--color-sf-warning), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-warning:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-warning-text)); +} +.sf-btn.sf-outlined.sf-warning:active, .sf-btn.sf-outlined.sf-warning.sf-active, +.sf-css.sf-btn.sf-outlined.sf-warning:active, +.sf-css.sf-btn.sf-outlined.sf-warning.sf-active { + background: rgba(var(--color-sf-warning)); + border-color: transparent; + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-color: rgba(var(--color-sf-warning)); + box-shadow: none; + color: rgba(var(--color-sf-warning-text)); + background: rgba(var(--color-sf-warning), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-warning)); +} +.sf-btn.sf-outlined.sf-warning:disabled, .sf-btn.sf-outlined.sf-warning.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-warning:disabled, +.sf-css.sf-btn.sf-outlined.sf-warning.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-outlined.sf-danger, +.sf-css.sf-btn.sf-outlined.sf-danger { + background: transparent; + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-outlined.sf-danger:hover, +.sf-css.sf-btn.sf-outlined.sf-danger:hover { + background: rgba(var(--color-sf-error), 0.08); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-outlined.sf-danger:focus, +.sf-css.sf-btn.sf-outlined.sf-danger:focus { + background: rgba(var(--color-sf-error), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-outlined.sf-danger:focus-visible, +.sf-css.sf-btn.sf-outlined.sf-danger:focus-visible { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; + color: rgba(var(--color-sf-danger-text)); +} +.sf-btn.sf-outlined.sf-danger:active, .sf-btn.sf-outlined.sf-danger.sf-active, +.sf-css.sf-btn.sf-outlined.sf-danger:active, +.sf-css.sf-btn.sf-outlined.sf-danger.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-color: rgba(var(--color-sf-error)); + box-shadow: none; + color: rgba(var(--color-sf-danger-text)); + background: rgba(var(--color-sf-error), 0.12); + border: 1px solid rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-error)); +} +.sf-btn.sf-outlined.sf-danger:disabled, .sf-btn.sf-outlined.sf-danger.sf-disabled, +.sf-css.sf-btn.sf-outlined.sf-danger:disabled, +.sf-css.sf-btn.sf-outlined.sf-danger.sf-disabled { + background: transparent; + border-color: rgba(var(--color-sf-secondary), 0.12); + box-shadow: none; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-btn.sf-link, +.sf-css.sf-btn.sf-link { + background: transparent; + border-color: transparent; + border-radius: 0; + box-shadow: none; + color: rgba(var(--color-sf-info)); +} +.sf-btn.sf-link:hover, +.sf-css.sf-btn.sf-link:hover { + border-radius: 4px; + text-decoration: underline; +} +.sf-btn.sf-link:focus, +.sf-css.sf-btn.sf-link:focus { + border-radius: 4px; + text-decoration: underline; +} +.sf-btn.sf-link:focus:not(:focus-visible), +.sf-css.sf-btn.sf-link:focus:not(:focus-visible) { + outline: none !important; /* stylelint-disable-line declaration-no-important */ +} +.sf-btn.sf-link:focus-visible, +.sf-css.sf-btn.sf-link:focus-visible { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; +} +.sf-btn.sf-link:disabled, +.sf-css.sf-btn.sf-link:disabled { + color: rgba(var(--color-sf-on-surface), 0.38); + background: transparent; + box-shadow: none; + text-decoration: none; +} +.sf-btn.sf-inherit, +.sf-css.sf-btn.sf-inherit { + color: inherit; + background: inherit; + border-color: transparent; + box-shadow: none; +} +.sf-btn.sf-inherit:hover, .sf-btn.sf-inherit:focus, .sf-btn.sf-inherit:active, .sf-btn.sf-inherit.sf-active, +.sf-css.sf-btn.sf-inherit:hover, +.sf-css.sf-btn.sf-inherit:focus, +.sf-css.sf-btn.sf-inherit:active, +.sf-css.sf-btn.sf-inherit.sf-active { + background: rgba(0, 0, 0, 0.056); + border-color: transparent; + box-shadow: none; + color: inherit; + outline: none; +} +.sf-btn.sf-inherit:disabled, +.sf-css.sf-btn.sf-inherit:disabled { + background: inherit; + color: inherit; + border-color: transparent; + box-shadow: none; + opacity: 0.5; +} +.sf-checkbox-wrapper, +.sf-css.sf-checkbox-wrapper { + cursor: pointer; + display: inline-block; + line-height: 1; + outline: none; + user-select: none; +} +.sf-checkbox-wrapper label, +.sf-css.sf-checkbox-wrapper label { + cursor: pointer; + display: inline-block; + line-height: 0; + margin: 0; + position: relative; + white-space: nowrap; +} +.sf-checkbox-wrapper:hover .sf-ripple-container, +.sf-css.sf-checkbox-wrapper:hover .sf-ripple-container { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-checkbox-wrapper:hover .sf-ripple-container.sf-ripple-check, +.sf-css.sf-checkbox-wrapper:hover .sf-ripple-container.sf-ripple-check { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper:hover .sf-frame, +.sf-css.sf-checkbox-wrapper:hover .sf-frame { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-checkbox-wrapper:hover .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper:hover .sf-frame.sf-check { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper:hover .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper:hover .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-checkbox-wrapper:hover .sf-label, +.sf-css.sf-checkbox-wrapper:hover .sf-label { + color: rgba(var(--color-sf-on-surface)); +} +.sf-checkbox-wrapper:focus .sf-ripple-container, .sf-checkbox-wrapper.sf-focus .sf-ripple-container, +.sf-css.sf-checkbox-wrapper:focus .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-checkbox-wrapper:focus .sf-ripple-container.sf-ripple-check, .sf-checkbox-wrapper.sf-focus .sf-ripple-container.sf-ripple-check, +.sf-css.sf-checkbox-wrapper:focus .sf-ripple-container.sf-ripple-check, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-ripple-container.sf-ripple-check { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper:focus .sf-frame, .sf-checkbox-wrapper:focus .sf-frame.sf-check, .sf-checkbox-wrapper.sf-focus .sf-frame, .sf-checkbox-wrapper.sf-focus .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper:focus .sf-frame, +.sf-css.sf-checkbox-wrapper:focus .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-frame.sf-check { + outline: rgba(var(--color-sf-primary), 0.25); + outline-offset: 0; +} +.sf-checkbox-wrapper:focus .sf-frame, .sf-checkbox-wrapper.sf-focus .sf-frame, +.sf-css.sf-checkbox-wrapper:focus .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-focus .sf-frame { + box-shadow: none; +} +.sf-checkbox-wrapper:active .sf-ripple-element, +.sf-css.sf-checkbox-wrapper:active .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-checkbox-wrapper:active .sf-ripple-check .sf-ripple-element, +.sf-css.sf-checkbox-wrapper:active .sf-ripple-check .sf-ripple-element { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper .sf-ripple-check .sf-ripple-element, +.sf-css.sf-checkbox-wrapper .sf-ripple-check .sf-ripple-element { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-checkbox-wrapper .sf-ripple-container, +.sf-css.sf-checkbox-wrapper .sf-ripple-container { + border-radius: 50%; + bottom: -9.5px; + height: 34px; + left: -9.5px; + pointer-events: none; + position: absolute; + right: -9.5px; + top: -9.5px; + width: 34px; + z-index: 1; +} +.sf-checkbox-wrapper .sf-ripple-container .sf-ripple-element, +.sf-css.sf-checkbox-wrapper .sf-ripple-container .sf-ripple-element { + border-radius: 50%; +} +.sf-checkbox-wrapper .sf-ripple-element, +.sf-css.sf-checkbox-wrapper .sf-ripple-element { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-checkbox-wrapper .sf-label, +.sf-css.sf-checkbox-wrapper .sf-label { + color: rgba(var(--color-sf-on-surface)); + cursor: pointer; + display: inline-block; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: normal; + line-height: 16px; + user-select: none; + vertical-align: middle; + white-space: normal; +} +.sf-checkbox-wrapper .sf-checkbox, +.sf-css.sf-checkbox-wrapper .sf-checkbox { + height: 1px; + opacity: 0; + position: absolute; + width: 1px; +} +.sf-checkbox-wrapper .sf-checkbox + .sf-label, +.sf-css.sf-checkbox-wrapper .sf-checkbox + .sf-label { + margin-right: 8px; +} +.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame, .sf-checkbox-wrapper .sf-checkbox:active + .sf-frame, +.sf-css.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame, +.sf-css.sf-checkbox-wrapper .sf-checkbox:active + .sf-frame { + background-color: transparent; + border-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + box-shadow: none; +} +.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-check, .sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-check { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-stop, .sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper .sf-checkbox:focus + .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper .sf-checkbox:active + .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-frame, +.sf-css.sf-checkbox-wrapper .sf-frame { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); + border: 2px solid; + border-radius: 2px; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + font-family: "e-icons"; + height: 16px; + padding: 0; + text-align: center; + vertical-align: middle; + width: 16px; +} +.sf-checkbox-wrapper .sf-frame + .sf-label, +.sf-css.sf-checkbox-wrapper .sf-frame + .sf-label { + margin-left: 8px; +} +.sf-checkbox-wrapper .sf-frame + .sf-ripple-container, +.sf-css.sf-checkbox-wrapper .sf-frame + .sf-ripple-container { + left: auto; +} +.sf-checkbox-wrapper .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper .sf-frame.sf-check { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper .sf-check, +.sf-css.sf-checkbox-wrapper .sf-check { + font-size: 10px; +} +.sf-checkbox-wrapper .sf-stop, +.sf-css.sf-checkbox-wrapper .sf-stop { + font-size: 10px; +} +.sf-checkbox-wrapper.sf-checkbox-disabled, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled { + cursor: default; + pointer-events: none; +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame { + cursor: default; + background-color: transparent; + border: 2px solid rgba(var(--color-sf-on-surface), 0.38); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-check, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-check { + background-color: rgba(var(--color-sf-on-surface), 0.38); + border: none; + border-color: rgba(var(--color-sf-on-surface), 0.38); + line-height: 14px; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-stop, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-frame.sf-stop { + background-color: rgba(var(--color-sf-on-surface), 0.38); + border: none; + border: rgba(var(--color-sf-on-surface), 0.38); + line-height: 14px; + color: rgba(var(--color-sf-on-primary)); +} +.sf-checkbox-wrapper.sf-checkbox-disabled .sf-label, +.sf-css.sf-checkbox-wrapper.sf-checkbox-disabled .sf-label { + color: rgba(var(--color-sf-on-surface), 0.38); + cursor: default; +} +.sf-checkbox-wrapper.sf-rtl .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-ripple-container { + right: -9.5px; +} +.sf-checkbox-wrapper.sf-rtl .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-frame { + margin: 0; +} +.sf-checkbox-wrapper.sf-rtl .sf-frame:hover, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-frame:hover { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-checkbox-wrapper.sf-rtl .sf-frame + .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-frame + .sf-ripple-container { + left: -9.5px; + right: auto; +} +.sf-checkbox-wrapper.sf-rtl .sf-label, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-label { + margin-left: 0; + margin-right: 8px; +} +.sf-checkbox-wrapper.sf-rtl .sf-label + .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-label + .sf-frame { + margin: 0; +} +.sf-checkbox-wrapper.sf-rtl .sf-checkbox + .sf-label, +.sf-css.sf-checkbox-wrapper.sf-rtl .sf-checkbox + .sf-label { + margin-left: 8px; + margin-right: 0; +} +.sf-checkbox-wrapper.sf-small .sf-frame, +.sf-css.sf-checkbox-wrapper.sf-small .sf-frame { + height: 14px; + line-height: 11px; + width: 14px; +} +.sf-checkbox-wrapper.sf-small .sf-check, +.sf-css.sf-checkbox-wrapper.sf-small .sf-check { + font-size: 8px; +} +.sf-checkbox-wrapper.sf-small .sf-stop, +.sf-css.sf-checkbox-wrapper.sf-small .sf-stop { + font-size: 8px; + line-height: 11px; +} +.sf-checkbox-wrapper.sf-small .sf-label, +.sf-css.sf-checkbox-wrapper.sf-small .sf-label { + font-size: 10px; + line-height: 14px; +} +.sf-checkbox-wrapper.sf-small .sf-ripple-container, +.sf-css.sf-checkbox-wrapper.sf-small .sf-ripple-container { + bottom: -5px; + height: 24px; + left: -5px; + right: -5px; + top: -5px; + width: 24px; +} +.sf-css.sf-checkbox-wrapper .sf-ripple-container { + right: -9.5px; + top: -4.5px; +} +.sf-checkbox-wrapper[readonly] { + pointer-events: none; +} +.sf-small .sf-checkbox-wrapper .sf-frame, +.sf-small.sf-checkbox-wrapper .sf-frame, +.sf-small .sf-css.sf-checkbox-wrapper .sf-frame, +.sf-small.sf-css.sf-checkbox-wrapper .sf-frame { + height: 14px; + line-height: 11px; + width: 14px; +} +.sf-small .sf-checkbox-wrapper .sf-frame:hover, +.sf-small.sf-checkbox-wrapper .sf-frame:hover, +.sf-small .sf-css.sf-checkbox-wrapper .sf-frame:hover, +.sf-small.sf-css.sf-checkbox-wrapper .sf-frame:hover { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-small .sf-checkbox-wrapper .sf-check, +.sf-small.sf-checkbox-wrapper .sf-check, +.sf-small .sf-css.sf-checkbox-wrapper .sf-check, +.sf-small.sf-css.sf-checkbox-wrapper .sf-check { + font-size: 8px; +} +.sf-small .sf-checkbox-wrapper .sf-stop, +.sf-small.sf-checkbox-wrapper .sf-stop, +.sf-small .sf-css.sf-checkbox-wrapper .sf-stop, +.sf-small.sf-css.sf-checkbox-wrapper .sf-stop { + font-size: 8px; + line-height: 11px; +} +.sf-small .sf-checkbox-wrapper .sf-label, +.sf-small.sf-checkbox-wrapper .sf-label, +.sf-small .sf-css.sf-checkbox-wrapper .sf-label, +.sf-small.sf-css.sf-checkbox-wrapper .sf-label { + font-size: 10px; + line-height: 14px; +} +.sf-small .sf-checkbox-wrapper .sf-ripple-container, +.sf-small.sf-checkbox-wrapper .sf-ripple-container, +.sf-small .sf-css.sf-checkbox-wrapper .sf-ripple-container, +.sf-small.sf-css.sf-checkbox-wrapper .sf-ripple-container { + bottom: -5px; + height: 24px; + left: -5px; + right: -5px; + top: -5px; + width: 24px; +} +.sf-radio-wrapper { + display: inline-block; + line-height: 1; + position: relative; +} +/* stylelint-disable property-no-vendor-prefix */ +.sf-radio { + -webkit-appearance: none; + height: 1px; + opacity: 0; + position: absolute; + width: 1px; +} +.sf-radio:not(:checked):not(:disabled):hover + label.sf-rtl::after, +.sf-radio:not(:checked):not(:disabled):hover + label.sf-right::after { + left: auto; +} +.sf-radio + label { + -webkit-tap-highlight-color: transparent; + cursor: pointer; + display: inline-block; + margin: 0; + position: relative; + user-select: none; + vertical-align: middle; + white-space: nowrap; +} +.sf-radio + label .sf-label { + color: rgba(var(--color-sf-on-surface)); + display: inline-block; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: normal; + line-height: 1; + padding-left: 22px; + vertical-align: text-top; + white-space: normal; +} +.sf-radio + label:focus .sf-ripple-container, .sf-radio + label.sf-focus .sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-radio + label .sf-ripple-element { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio + label::before { + border: 1px solid; + border-radius: 50%; + box-sizing: border-box; + content: ""; + height: 14px; + left: 0; + position: absolute; + width: 14px; + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-radio + label:focus::before { + box-shadow: none; +} +.sf-radio + label:active .sf-ripple-element { + background-color: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-radio + label::after { + border: 1px solid; + border-radius: 50%; + box-sizing: border-box; + content: ""; + height: 6px; + left: 4px; + position: absolute; + top: 4px; + transform: scale(0); + width: 6px; +} +.sf-radio + label .sf-ripple-container { + border-radius: 50%; + height: 30px; + left: -8px; + position: absolute; + top: -8px; + width: 30px; + z-index: 1; +} +.sf-radio + label .sf-ripple-container .sf-ripple-element { + border-radius: 50%; +} +.sf-radio + label.sf-right .sf-label, .sf-radio + label.sf-rtl .sf-label { + padding-left: 0; + padding-right: 22px; +} +.sf-radio + label.sf-right::before, .sf-radio + label.sf-rtl::before { + left: auto; + right: 0; +} +.sf-radio + label.sf-right::after, .sf-radio + label.sf-rtl::after { + left: auto; + right: 4px; +} +.sf-radio + label.sf-right .sf-ripple-container, .sf-radio + label.sf-rtl .sf-ripple-container { + left: auto; + right: -8px; +} +.sf-radio + label.sf-right.sf-rtl .sf-label { + padding-left: 22px; + padding-right: 0; +} +.sf-radio + label.sf-right.sf-rtl::before { + left: 0; + right: auto; +} +.sf-radio + label.sf-right.sf-rtl::after { + left: 4px; + right: auto; +} +.sf-radio + label.sf-right.sf-rtl .sf-ripple-container { + left: -8px; + right: auto; +} +.sf-radio + label.sf-small .sf-label { + line-height: 1; + padding-left: 22px; +} +.sf-radio + label.sf-small::before { + height: 14px; + width: 14px; +} +.sf-radio + label.sf-small::after { + height: 6px; + left: 4px; + top: 4px; + width: 6px; +} +.sf-radio + label.sf-small .sf-ripple-container { + left: -9px; + top: -9px; +} +.sf-radio + label.sf-small.sf-right .sf-label, .sf-radio + label.sf-small.sf-rtl .sf-label { + padding-left: 0; + padding-right: 22px; +} +.sf-radio + label.sf-small.sf-right::after, .sf-radio + label.sf-small.sf-rtl::after { + left: auto; + right: 4px; +} +.sf-radio + label.sf-small.sf-right .sf-ripple-container, .sf-radio + label.sf-small.sf-rtl .sf-ripple-container { + left: auto; + right: -9px; +} +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-label { + padding-left: 22px; + padding-right: 0; +} +.sf-radio + label.sf-small.sf-right.sf-rtl::after { + left: 4px; + right: auto; +} +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-ripple-container { + left: -10px; + right: auto; +} +.sf-radio:focus + label::before { + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; +} +.sf-radio:focus + label::before { + border-color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-radio:checked + label::after { + transform: scale(1); + transition: none; +} +.sf-radio:hover + label .sf-ripple-container { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-radio:hover + label::before { + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-radio:checked + label::before { + background-color: transparent; + border-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label::after { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label:active .sf-ripple-element { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio:checked + .sf-focus .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio:checked + .sf-focus::before { + outline: transparent 0 solid; + outline-offset: 0; +} +.sf-radio:checked:focus + label::before { + border-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked:focus + label::after { + background-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label:hover .sf-ripple-container { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio:checked + label:hover::before { + border-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label:hover::after { + background-color: rgba(var(--color-sf-primary)); +} +.sf-radio:disabled + label { + cursor: default; + pointer-events: none; +} +.sf-radio:disabled + label::before { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface), 0.38); + cursor: default; +} +.sf-radio:disabled + label .sf-ripple-container { + background-color: transparent; +} +.sf-radio:disabled + label .sf-ripple-container::after { + background-color: transparent; + cursor: default; +} +.sf-radio:disabled + label .sf-label { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-radio:disabled:checked + label::before { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-radio:disabled:checked + label::after { + background-color: rgba(var(--color-sf-on-surface), 0.38); + border-color: rgba(var(--color-sf-on-surface), 0.38); + cursor: default; +} +.sf-radio:disabled:checked + label .sf-ripple-container, .sf-radio:disabled:checked + label .sf-ripple-container::after { + background-color: transparent; +} +.sf-small .sf-radio + label .sf-label, +.sf-radio + label.sf-small .sf-label { + line-height: 1; + padding-left: 22px; +} +.sf-small .sf-radio + label::before, +.sf-radio + label.sf-small::before { + height: 14px; + width: 14px; +} +.sf-small .sf-radio + label::after, +.sf-radio + label.sf-small::after { + height: 6px; + left: 4px; + top: 4px; + width: 6px; +} +.sf-small .sf-radio + label .sf-ripple-container, +.sf-radio + label.sf-small .sf-ripple-container { + left: -9px; + top: -9px; +} +.sf-small .sf-radio + label.sf-right .sf-label, .sf-small .sf-radio + label.sf-rtl .sf-label, +.sf-radio + label.sf-small.sf-right .sf-label, +.sf-radio + label.sf-small.sf-rtl .sf-label { + padding-left: 0; + padding-right: 22px; +} +.sf-small .sf-radio + label.sf-right::after, .sf-small .sf-radio + label.sf-rtl::after, +.sf-radio + label.sf-small.sf-right::after, +.sf-radio + label.sf-small.sf-rtl::after { + left: auto; + right: 4px; +} +.sf-small .sf-radio + label.sf-right .sf-ripple-container, .sf-small .sf-radio + label.sf-rtl .sf-ripple-container, +.sf-radio + label.sf-small.sf-right .sf-ripple-container, +.sf-radio + label.sf-small.sf-rtl .sf-ripple-container { + left: auto; + right: -9px; +} +.sf-small .sf-radio + label.sf-right.sf-rtl .sf-label, +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-label { + padding-left: 22px; + padding-right: 0; +} +.sf-small .sf-radio + label.sf-right.sf-rtl::after, +.sf-radio + label.sf-small.sf-right.sf-rtl::after { + left: 4px; + right: auto; +} +.sf-small .sf-radio + label.sf-right.sf-rtl .sf-ripple-container, +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-ripple-container { + left: -10px; + right: auto; +} +.sf-switch-wrapper, +.sf-css.sf-switch-wrapper { + cursor: pointer; + display: inline-block; + height: 24px; + position: relative; + user-select: none; + width: 48px; +} +.sf-switch-wrapper .sf-switch, +.sf-css.sf-switch-wrapper .sf-switch { + /* stylelint-disable property-no-vendor-prefix */ + -moz-appearance: none; + height: 1px; + opacity: 0; + position: absolute; + width: 1px; +} +.sf-switch-wrapper .sf-switch-inner, +.sf-css.sf-switch-wrapper .sf-switch-inner { + -ms-transition: all 0.2s ease-in-out; + -webkit-transition: all 0.2s ease-in-out; + border: 2px solid rgba(var(--color-sf-outline)); + border-radius: 20px; + box-sizing: border-box; + height: 100%; + left: 0; + overflow: hidden; + position: absolute; + top: 0; + transition: all 0.2s ease-in-out; + width: 100%; +} +.sf-switch-wrapper .sf-switch-on, .sf-switch-wrapper .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-off { + -ms-transition: all 0.2s ease-in-out 0.1s; + -webkit-transition: all 0.2s ease-in-out 0.1s; + align-items: center; + border-radius: inherit; + display: flex; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 12px; + height: 100%; + justify-content: center; + left: 0; + position: absolute; + transition: all 0.2s ease-in-out 0.1s; + width: 100%; +} +.sf-switch-wrapper .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-on { + left: -100%; + text-indent: -16px; +} +.sf-switch-wrapper .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-off { + left: 0; + opacity: 1; + text-indent: 18px; +} +.sf-switch-wrapper .sf-switch-handle, +.sf-css.sf-switch-wrapper .sf-switch-handle { + -ms-transition: all 0.2s linear; + -webkit-transition: all 0.2s linear; + border-radius: 50%; + bottom: 2px; + height: 12px; + left: 6px; + margin: auto 0; + position: absolute; + top: 1.5px; + transition: all 0.2s linear; + width: 12px; +} +.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; + opacity: 1; +} +.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-off { + left: 100%; +} +.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -22px; + height: 18px; + width: 18px; +} +.sf-switch-wrapper.sf-switch-disabled, +.sf-css.sf-switch-wrapper.sf-switch-disabled { + cursor: default; + pointer-events: none; +} +.sf-switch-wrapper .sf-ripple-container, +.sf-css.sf-switch-wrapper .sf-ripple-container { + border-radius: 50%; + bottom: -9px; + height: 52px; + left: -17px; + pointer-events: none; + position: absolute; + top: -17px; + width: 52px; + z-index: 1; + height: 32px; + left: -10px; + top: -10px; + width: 32px; +} +.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -6px !important; /* stylelint-disable-line declaration-no-important */ + top: -6.5px !important; /* stylelint-disable-line declaration-no-important */ +} +.sf-switch-wrapper .sf-ripple-container .sf-ripple-element, +.sf-css.sf-switch-wrapper .sf-ripple-container .sf-ripple-element { + border-radius: 50%; +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -22px; +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +.sf-switch-wrapper.sf-rtl .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; +} +.sf-switch-wrapper.sf-rtl .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + border-radius: 50%; + height: 12px; + left: 6px; + margin: auto 0; + position: absolute; + top: 1.5px; + transition: all 0.2s linear; + width: 12px; +} +.sf-switch-wrapper.sf-small, +.sf-css.sf-switch-wrapper.sf-small { + height: 20px; + width: 46px; +} +.sf-switch-wrapper.sf-small .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle { + height: 10px; + width: 10px; +} +.sf-switch-wrapper.sf-small .sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-small .sf-ripple-container { + border-radius: 50%; + height: 24px; + left: -3px; + pointer-events: none; + position: absolute; + top: -5px; + width: 24px; + z-index: 1; +} +.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -19px; + height: 14px; + width: 14px; +} +.sf-switch-wrapper.sf-small .sf-switch-on, .sf-switch-wrapper.sf-small .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + font-size: 10px; +} +.sf-switch-wrapper.sf-small .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-on { + text-indent: -11px; +} +.sf-switch-wrapper.sf-small .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + text-indent: 14px; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -19px; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + height: 10px; + width: 10px; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off { + left: 0; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active { + left: 22px; + height: 14px; + width: 14px; +} +*.sf-small .sf-switch-wrapper, +*.sf-small.sf-switch-wrapper, +*.sf-small .sf-css.sf-switch-wrapper, +*.sf-small.sf-css.sf-switch-wrapper { + height: 20px; + width: 46px; +} +*.sf-small .sf-switch-wrapper .sf-switch-handle, +*.sf-small.sf-switch-wrapper .sf-switch-handle, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle { + height: 10px; + width: 10px; + left: 5px; + top: 2px; +} +*.sf-small .sf-switch-wrapper .sf-ripple-container, +*.sf-small.sf-switch-wrapper .sf-ripple-container, +*.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container, +*.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container { + border-radius: 50%; + height: 24px; + left: -3px; + pointer-events: none; + position: absolute; + top: -5px; + width: 24px; + z-index: 1; + left: -7px; + top: -7px; +} +*.sf-small .sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-small.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -3px !important; /* stylelint-disable-line declaration-no-important */ + top: -5px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-small .sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-small.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -19px; + height: 14px; + width: 14px; +} +*.sf-small .sf-switch-wrapper .sf-switch-on, *.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + font-size: 10px; +} +*.sf-small .sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-on { + text-indent: -11px; +} +*.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + text-indent: 14px; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -19px; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + height: 10px; + width: 10px; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + left: 22px; + height: 14px; + width: 14px; +} +*.sf-bigger.sf-small .sf-switch-wrapper, +*.sf-bigger.sf-small.sf-switch-wrapper, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper { + height: 28px; + width: 60px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle { + height: 16px; + left: 6px; + top: 1px; + width: 16px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container { + border-radius: 50%; + height: 36px; + left: -7px; + pointer-events: none; + position: absolute; + top: -8px; + width: 36px; + z-index: 1; + left: -10px; + top: -10px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -7px !important; /* stylelint-disable-line declaration-no-important */ + top: -8px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -25px; + height: 20px; + width: 20px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-on, *.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + font-size: 12px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-on { + text-indent: -14px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + text-indent: 14px; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -25px; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + height: 16px; + width: 16px; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + left: 30px; + height: 20px; + width: 20px; +} +*.sf-bigger .sf-switch-wrapper, +*.sf-bigger.sf-switch-wrapper, +*.sf-bigger .sf-css.sf-switch-wrapper, +*.sf-bigger.sf-css.sf-switch-wrapper { + height: 32px; + width: 66px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-handle { + height: 16px; + left: 6px; + top: 2px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -29px; + height: 24px; + width: 24px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-on, *.sf-bigger .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-switch-wrapper .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-off { + font-size: 14px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-switch-wrapper .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-on { + text-indent: -15px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-switch-wrapper .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-off { + text-indent: 18px; +} +*.sf-bigger .sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-ripple-container { + height: 40px; + left: -7px; + top: -8px; + width: 40px; + left: -12px; + top: -12px; +} +*.sf-bigger .sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -7px !important; /* stylelint-disable-line declaration-no-important */ + top: -8px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + height: 16px; + left: 100%; + margin-left: -29px; + top: 2px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + left: 32px; + height: 24px; + width: 24px; +} +*.sf-bigger .sf-switch-wrapper.sf-small, +*.sf-bigger.sf-switch-wrapper.sf-small, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small { + height: 28px; + width: 60px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle { + height: 16px; + left: 6px; + top: 1px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-ripple-container, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-ripple-container, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-ripple-container, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-ripple-container { + border-radius: 50%; + height: 36px; + left: -7px; + pointer-events: none; + position: absolute; + top: -8px; + width: 36px; + z-index: 1; + left: -10px; + top: -10px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check { + left: -7px !important; /* stylelint-disable-line declaration-no-important */ + top: -8px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -25px; + height: 20px; + width: 20px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-on, *.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + font-size: 12px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-on { + text-indent: -14px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + text-indent: 14px; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -25px; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + height: 16px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active { + left: 30px; +} +.sf-switch-wrapper, +.sf-css.sf-switch-wrapper { + /* stylelint-disable property-no-vendor-prefix */ + -webkit-tap-highlight-color: transparent; +} +.sf-switch-wrapper .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-off { + background-color: rgba(var(--color-sf-surface-variant)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-switch-wrapper .sf-switch-handle, +.sf-css.sf-switch-wrapper .sf-switch-handle { + background-color: rgba(var(--color-sf-outline)); + box-shadow: none; +} +.sf-switch-wrapper .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper .sf-switch-inner, +.sf-css.sf-switch-wrapper .sf-switch-inner { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper .sf-ripple-element, +.sf-css.sf-switch-wrapper .sf-ripple-element { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper .sf-ripple-check .sf-ripple-element, +.sf-css.sf-switch-wrapper .sf-ripple-check .sf-ripple-element { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle.sf-switch-active { + box-shadow: none; +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle:not(.sf-switch-active), +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle:not(.sf-switch-active) { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); + box-shadow: none; +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-off { + opacity: 1; + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + opacity: 1; + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + opacity: 1; + border-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle:not(.sf-switch-active), +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle:not(.sf-switch-active) { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner { + border-color: rgba(var(--color-sf-on-surface), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-white)); +} +.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper:hover .sf-switch-inner { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-outline)); +} +.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-container, +.sf-css.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-check.sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper:not(.sf-switch-disabled):hover .sf-switch-handle:not(.sf-switch-active), +.sf-css.sf-switch-wrapper:not(.sf-switch-disabled):hover .sf-switch-handle:not(.sf-switch-active) { + background-color: rgba(var(--color-sf-outline)); +} +.sf-switch-wrapper.sf-focus .sf-switch-inner, .sf-switch-wrapper:focus .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-focus .sf-switch-inner, +.sf-css.sf-switch-wrapper:focus .sf-switch-inner { + background-color: rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + box-shadow: none; + outline: none; + outline-offset: initial; +} +.sf-switch-wrapper.sf-focus .sf-switch-inner.sf-switch-active, .sf-switch-wrapper:focus .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-focus .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper:focus .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + outline: none; +} +.sf-switch-wrapper.sf-focus .sf-ripple-container, .sf-switch-wrapper:focus .sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-focus .sf-ripple-container, +.sf-css.sf-switch-wrapper:focus .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper.sf-focus .sf-ripple-check.sf-ripple-container, .sf-switch-wrapper:focus .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-focus .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper:focus .sf-ripple-check.sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper.sf-active .sf-switch-inner, .sf-switch-wrapper:active .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-active .sf-switch-inner, +.sf-css.sf-switch-wrapper:active .sf-switch-inner { + background-color: rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + box-shadow: none; + outline: none; + outline-offset: initial; +} +.sf-switch-wrapper.sf-active .sf-switch-inner.sf-switch-active, .sf-switch-wrapper:active .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-active .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper:active .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + outline: none; +} +.sf-switch-wrapper.sf-active .sf-ripple-container, .sf-switch-wrapper:active .sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-active .sf-ripple-container, +.sf-css.sf-switch-wrapper:active .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper.sf-active .sf-ripple-check.sf-ripple-container, .sf-switch-wrapper:active .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-active .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper:active .sf-ripple-check.sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-on { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-off { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + outline: none; +} +.sf-switch-wrapper.sf-rtl .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + background-color: rgba(var(--color-sf-outline)); + box-shadow: none; +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + background-color: rgba(var(--color-sf-surface-variant)); +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner { + border-color: rgba(var(--color-sf-outline)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + opacity: 1; + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-off { + opacity: 1; + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); + box-shadow: none; +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); + box-shadow: none; +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); + opacity: 1; +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner { + border-color: rgba(var(--color-sf-on-surface), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); +} +.sf-switch-wrapper .sf-switch:focus, +.sf-css.sf-switch-wrapper .sf-switch:focus { + box-shadow: none; +} +.sf-switch-wrapper.sf-small.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active { + background-color: transparent; +} +.sf-chip-list { + display: flex; + padding: 0; +} +.sf-chip-list.sf-chip, +.sf-chip-list .sf-chip { + -webkit-tap-highlight-color: transparent; + border: 1px solid; + border-radius: 12px; + font-size: 11px; + margin: 4px; + align-items: center; + justify-content: center; + line-height: 14px; + box-shadow: none; + box-sizing: border-box; + cursor: pointer; + display: inline-flex; + font-weight: 500; + height: 24px; + outline: none; + overflow: hidden; + padding: 0 8px; + position: relative; + transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); + user-select: none; +} +.sf-chip-list.sf-chip .sf-chip-avatar, +.sf-chip-list .sf-chip .sf-chip-avatar { + background-size: cover; + display: flex; + overflow: hidden; + height: 20px; + width: 20px; + border-radius: 12px; + font-size: 12px; + margin: 0 4px 0 -6px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-chip-avatar-wrap, .sf-chip-list.sf-chip.sf-chip-avatar-wrap, +.sf-chip-list .sf-chip .sf-chip-avatar-wrap, +.sf-chip-list .sf-chip.sf-chip-avatar-wrap { + border-radius: 12px; +} +.sf-chip-list.sf-chip .sf-chip-icon, +.sf-chip-list .sf-chip .sf-chip-icon { + background-size: cover; + display: flex; + overflow: hidden; + height: 20px; + width: 20px; + border-radius: 50%; + font-size: 14px; + margin: 0 4px 0 -6px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-chip-text, +.sf-chip-list .sf-chip .sf-chip-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.sf-chip-list.sf-chip .sf-chip-delete, +.sf-chip-list .sf-chip .sf-chip-delete { + background-size: cover; + display: flex; + overflow: hidden; + height: 18px; + width: 14px; + border-radius: 50%; + font-size: 14px; + margin: 0 -2px 0 8px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-image-url, +.sf-chip-list .sf-chip .sf-image-url { + background-size: cover; + display: flex; + overflow: hidden; + height: 20px; + width: 20px; + border-radius: 50%; + font-size: 14px; + margin: 0 4px 0 -6px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-image-url .sf-leading-image, +.sf-chip-list .sf-chip .sf-image-url .sf-leading-image { + width: 100%; + height: 100%; + object-fit: cover; +} +.sf-chip-list.sf-chip .sf-trailing-icon-url, +.sf-chip-list .sf-chip .sf-trailing-icon-url { + background-size: cover; + display: flex; + overflow: hidden; + height: 18px; + width: 18px; + border-radius: 50%; + font-size: 14px; + margin: 0 -2px 0 8px; + align-items: center; + justify-content: center; + line-height: 1; +} +.sf-chip-list.sf-chip .sf-trailing-icon-url .sf-trailing-image, +.sf-chip-list .sf-chip .sf-trailing-icon-url .sf-trailing-image { + width: 100%; + height: 100%; + object-fit: cover; +} +.sf-chip-list.sf-chip .sf-chip-template, +.sf-chip-list .sf-chip .sf-chip-template { + display: inline-flex; +} +.sf-chip-list:not(.sf-chip) { + flex-wrap: wrap; +} +.sf-chip-list.sf-multi-selection .sf-chip .sf-selectable-icon { + align-items: center; + justify-content: center; + line-height: 1; + display: flex; + height: 20px; + width: 20px; + margin: 0 4px 0 -6px; + overflow: hidden; + transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); +} +.sf-chip-list.sf-multi-selection .sf-chip:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) .sf-selectable-icon { + width: 0; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-chip-icon-wrap .sf-selectable-icon, .sf-chip-list.sf-multi-selection .sf-chip.sf-chip-avatar-wrap .sf-selectable-icon { + display: none; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-chip-avatar-wrap .sf-selectable-icon { + height: 20px; + width: 20px; + margin: 0 4px 0 -6px; + margin-top: 0; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-active .sf-chip-icon, .sf-chip-list.sf-multi-selection .sf-chip.sf-active .sf-chip-avatar { + display: none; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-active.sf-chip-icon-wrap .sf-selectable-icon, .sf-chip-list.sf-multi-selection .sf-chip.sf-active.sf-chip-avatar-wrap .sf-selectable-icon { + display: flex; +} +.sf-chip-list.sf-multi-selection .sf-chip.sf-active:not(.sf-chip-icon-wrap):not(.sf-chip-avatar-wrap) .sf-selectable-icon { + width: 20px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-chip-avatar, .sf-chip-list.sf-rtl .sf-chip .sf-chip-avatar { + margin: 0 -6px 0 4px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-chip-icon, .sf-chip-list.sf-rtl .sf-chip .sf-chip-icon { + margin: 0 -6px 0 4px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-chip-delete, .sf-chip-list.sf-rtl .sf-chip .sf-chip-delete { + margin: 0 8px 0 -2px; +} +.sf-chip-list.sf-rtl.sf-chip .sf-trailing-icon-url, .sf-chip-list.sf-rtl .sf-chip .sf-trailing-icon-url { + margin: 0 8px 0 -2px; +} +.sf-chip-list.sf-rtl.sf-multi-selection .sf-chip .sf-selectable-icon { + margin: 0 -6px 0 4px; + margin-top: 0; +} +.sf-chip-list.sf-rtl.sf-multi-selection .sf-chip.sf-chip-avatar-wrap .sf-selectable-icon { + margin: 0 -6px 0 4px; + margin-top: 0; +} +.sf-chip-list.sf-selection .sf-chip.sf-active { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled { + background: rgba(var(--color-sf-secondary), 0); + border-image: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + border-width: 1px; +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: none; +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip.sf-active.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-selection .sf-chip:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-selection .sf-chip:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-icon, +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-selection .sf-chip:active.sf-outline .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip, .sf-chip-list .sf-chip { + background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip .sf-selectable-icon path, .sf-chip-list .sf-chip .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip .sf-chip-icon, +.sf-chip-list.sf-chip .sf-chip-delete, .sf-chip-list .sf-chip .sf-chip-icon, +.sf-chip-list .sf-chip .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip .sf-chip-icon path, +.sf-chip-list.sf-chip .sf-chip-delete path, .sf-chip-list .sf-chip .sf-chip-icon path, +.sf-chip-list .sf-chip .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip .sf-chip-avatar, .sf-chip-list .sf-chip .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary-container)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:hover, .sf-chip-list .sf-chip:hover { + background: rgba(var(--color-sf-on-surface), 0.05); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip:hover .sf-selectable-icon path, .sf-chip-list .sf-chip:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip:hover .sf-chip-icon, +.sf-chip-list.sf-chip:hover .sf-chip-delete, .sf-chip-list .sf-chip:hover .sf-chip-icon, +.sf-chip-list .sf-chip:hover .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:hover .sf-chip-icon path, +.sf-chip-list.sf-chip:hover .sf-chip-delete path, .sf-chip-list .sf-chip:hover .sf-chip-icon path, +.sf-chip-list .sf-chip:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:hover .sf-chip-avatar, .sf-chip-list .sf-chip:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused, .sf-chip-list .sf-chip.sf-focused { + box-shadow: none; + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.12), rgba(var(--color-sf-primary), 0.12)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-active, .sf-chip-list .sf-chip.sf-active { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active, .sf-chip-list .sf-chip:active { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip:active .sf-selectable-icon path, .sf-chip-list .sf-chip:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active .sf-chip-icon, +.sf-chip-list.sf-chip:active .sf-chip-delete, .sf-chip-list .sf-chip:active .sf-chip-icon, +.sf-chip-list .sf-chip:active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active .sf-chip-icon path, +.sf-chip-list.sf-chip:active .sf-chip-delete path, .sf-chip-list .sf-chip:active .sf-chip-icon path, +.sf-chip-list .sf-chip:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip:active .sf-chip-avatar, .sf-chip-list .sf-chip:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-disabled, .sf-chip-list .sf-chip.sf-disabled { + background: rgba(var(--color-sf-secondary), 0); + border-image: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); + opacity: 1; + pointer-events: none; +} +.sf-chip-list.sf-chip.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline, .sf-chip-list .sf-chip.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); + border-width: 1px; +} +.sf-chip-list.sf-chip.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline .sf-chip-delete { + color: var(--color-sf-on-surface-variant); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline .sf-chip-delete path { + fill: var(--color-sf-on-surface-variant); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); +} +.sf-chip-list.sf-chip.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover, .sf-chip-list .sf-chip.sf-outline:hover { + background: rgba(var(--color-sf-on-surface), 0.05); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-outline.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-outline.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:active, .sf-chip-list .sf-chip.sf-outline:active { + background: rgba(var(--color-sf-on-surface), 0.08); + border-image: rgba(var(--color-sf-outline)); + color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface-variant)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary, .sf-chip-list .sf-chip.sf-primary { + background: rgba(var(--color-sf-primary)); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-primary .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-primary:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover, .sf-chip-list .sf-chip.sf-primary:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary:hover .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused, .sf-chip-list .sf-chip.sf-primary.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active, .sf-chip-list .sf-chip.sf-primary:active { + background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary:active .sf-chip-delete { + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary:active .sf-chip-delete path { + fill: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled, .sf-chip-list .sf-chip.sf-primary.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline, .sf-chip-list .sf-chip.sf-primary.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-primary.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover { + background: rgba(var(--color-sf-primary), 0.08); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused { + background: rgba(var(--color-sf-primary), 0.12); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-primary), 0.16); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active { + background: rgba(var(--color-sf-primary), 0.16); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active, .sf-chip-list .sf-chip.sf-primary.sf-outline:active { + background: rgba(var(--color-sf-primary), 0.16); + border-image: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled { + background: transparent; + border-image: rgba(var(--color-sf-on-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-primary.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success, .sf-chip-list .sf-chip.sf-success { + background: rgba(var(--color-sf-success)); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success .sf-chip-delete, .sf-chip-list .sf-chip.sf-success .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-success .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-success:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover, .sf-chip-list .sf-chip.sf-success:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-success:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success:hover .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused, .sf-chip-list .sf-chip.sf-success.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active, .sf-chip-list .sf-chip.sf-success.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active, .sf-chip-list .sf-chip.sf-success:active { + background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success:active .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success:active .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled, .sf-chip-list .sf-chip.sf-success.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline, .sf-chip-list .sf-chip.sf-success.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-success.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover, .sf-chip-list .sf-chip.sf-success.sf-outline:hover { + background: rgba(var(--color-sf-success), 0.08); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused { + background: rgba(var(--color-sf-success), 0.12); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-success), 0.16); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active { + background: rgba(var(--color-sf-success), 0.16); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active, .sf-chip-list .sf-chip.sf-success.sf-outline:active { + background: rgba(var(--color-sf-success), 0.16); + border-image: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-success)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-success)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-success.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info, .sf-chip-list .sf-chip.sf-info { + background: rgba(var(--color-sf-info)); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info .sf-chip-delete, .sf-chip-list .sf-chip.sf-info .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-info .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-info:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover, .sf-chip-list .sf-chip.sf-info:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-info:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info:hover .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused, .sf-chip-list .sf-chip.sf-info.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active, .sf-chip-list .sf-chip.sf-info.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active, .sf-chip-list .sf-chip.sf-info:active { + background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info:active .sf-chip-delete { + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info:active .sf-chip-delete path { + fill: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled, .sf-chip-list .sf-chip.sf-info.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-info.sf-outline, .sf-chip-list .sf-chip.sf-info.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-info.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover, .sf-chip-list .sf-chip.sf-info.sf-outline:hover { + background: rgba(var(--color-sf-info), 0.08); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused { + background: rgba(var(--color-sf-info), 0.12); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-info), 0.16); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active { + background: rgba(var(--color-sf-info), 0.16); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active, .sf-chip-list .sf-chip.sf-info.sf-outline:active { + background: rgba(var(--color-sf-info), 0.12); + border-image: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-info)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-info)); + color: rgba(var(--color-sf-info-text)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled { + background: transparent; + border-image: rgba(var(--color-sf-on-surface)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface)); +} +.sf-chip-list.sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-info.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning, .sf-chip-list .sf-chip.sf-warning { + background: rgba(var(--color-sf-warning)); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-warning .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-warning:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover, .sf-chip-list .sf-chip.sf-warning:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning:hover .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused, .sf-chip-list .sf-chip.sf-warning.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active, .sf-chip-list .sf-chip.sf-warning:active { + background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning:active .sf-chip-delete { + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning:active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled, .sf-chip-list .sf-chip.sf-warning.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline, .sf-chip-list .sf-chip.sf-warning.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-warning.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover { + background: rgba(var(--color-sf-warning), 0.08); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused { + background: rgba(var(--color-sf-warning), 0.12); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active { + background: rgba(var(--color-sf-warning), 0.16); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active { + background: rgba(var(--color-sf-warning), 0.16); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active, .sf-chip-list .sf-chip.sf-warning.sf-outline:active { + background: rgba(var(--color-sf-warning), 0.16); + border-image: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-warning)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-warning)); + color: rgba(var(--color-sf-warning-text)); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled { + background: transparent; + border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-warning.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger, .sf-chip-list .sf-chip.sf-danger { + background: rgba(var(--color-sf-error)); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-danger .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-danger:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover, .sf-chip-list .sf-chip.sf-danger:hover { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger:hover .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger:hover .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused, .sf-chip-list .sf-chip.sf-danger.sf-focused { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-focused .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-success-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-focused.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active, .sf-chip-list .sf-chip.sf-danger:active { + background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + border-image: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger:active .sf-chip-delete { + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger:active .sf-chip-delete path { + fill: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger:active .sf-chip-avatar { + background-color: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled, .sf-chip-list .sf-chip.sf-danger.sf-disabled { + background: rgba(var(--color-sf-secondary), 0.12); + border-image: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-disabled .sf-chip-avatar { + background-color: rgba(var(--color-sf-secondary), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline, .sf-chip-list .sf-chip.sf-danger.sf-outline { + background: transparent; + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-delete.sf-dlt-btn path, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-delete.sf-dlt-btn path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path, .sf-chip-list .sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:hover path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path, .sf-chip-list .sf-chip.sf-danger.sf-outline:not(.sf-active) .sf-chip-delete.sf-dlt-btn:active path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover { + background: rgba(var(--color-sf-error), 0.08); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:hover .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline:hover .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused { + background: rgba(var(--color-sf-error), 0.12); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active { + background: rgba(var(--color-sf-error), 0.16); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); + box-shadow: none; +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-focused.sf-focused.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active { + background: rgba(var(--color-sf-error), 0.16); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-active .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active, .sf-chip-list .sf-chip.sf-danger.sf-outline:active { + background: rgba(var(--color-sf-error), 0.16); + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-selectable-icon path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-delete { + color: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-delete path { + fill: rgba(var(--color-sf-error)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline:active .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline:active .sf-chip-avatar { + background-color: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-danger-text)); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled { + background: transparent; + border-image: rgba(var(--color-sf-error)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-selectable-icon path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-selectable-icon path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete path, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-icon path, +.sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-delete path { + fill: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-chip-list.sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-avatar, .sf-chip-list .sf-chip.sf-danger.sf-outline.sf-disabled .sf-chip-avatar { + background-color: transparent; + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-fab.sf-btn { + align-items: center; + border-radius: 12px; + display: inline-flex; + min-height: 40px; + min-width: 40px; + padding: 0 16px; + position: absolute; + z-index: 100000; +} +.sf-fab.sf-btn .sf-btn-icon { + margin-top: 0; + font-size: 14px; +} +.sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-fab.sf-btn.sf-fab-fixed { + position: fixed; +} +.sf-fab.sf-btn.sf-fab-top { + top: 16px; +} +.sf-fab.sf-btn.sf-fab-top.sf-fab-middle { + top: 50%; + transform: translateY(-50%); +} +.sf-fab.sf-btn.sf-fab-top.sf-fab-middle.sf-fab-left.sf-fab-center { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.sf-fab.sf-btn.sf-fab-bottom { + bottom: 16px; +} +.sf-fab.sf-btn.sf-fab-left { + left: 16px; +} +.sf-fab.sf-btn.sf-fab-left.sf-fab-center { + left: 50%; + transform: translateX(-50%); +} +.sf-fab.sf-btn.sf-fab-right { + right: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-top { + top: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-top.sf-fab-middle { + top: 50%; + transform: translateY(-50%); +} +.sf-rtl.sf-fab.sf-btn.sf-fab-top.sf-fab-middle.sf-fab-right.sf-fab-center { + right: 50%; + top: 50%; + transform: translate(50%, -50%); +} +.sf-rtl.sf-fab.sf-btn.sf-fab-bottom { + bottom: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-right { + right: 16px; +} +.sf-rtl.sf-fab.sf-btn.sf-fab-right.sf-fab-center { + right: 50%; + transform: translateX(50%); +} +.sf-rtl.sf-fab.sf-btn.sf-fab-left { + left: 16px; +} +.sf-fab-hidden { + visibility: hidden; +} +.sf-small.sf-fab.sf-btn, +.sf-small .sf-fab.sf-btn { + border-radius: 8px; + min-height: 32px; + min-width: 32px; + padding: 0 12px; +} +.sf-small.sf-fab.sf-btn.sf-icon-btn, +.sf-small .sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-small.sf-fab.sf-btn .sf-btn-icon, +.sf-small .sf-fab.sf-btn .sf-btn-icon { + font-size: 12px; +} +.sf-large.sf-fab.sf-btn, +.sf-large .sf-fab.sf-btn { + border-radius: 16px; + min-height: 56px; + min-width: 56px; + padding: 0 19px; +} +.sf-large.sf-fab.sf-btn.sf-icon-btn, +.sf-large .sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-large.sf-fab.sf-btn .sf-btn-icon, +.sf-large .sf-fab.sf-btn .sf-btn-icon { + font-size: 14px; +} +.sf-large.sf-small.sf-fab.sf-btn, +.sf-large.sf-small .sf-fab.sf-btn, +.sf-large .sf-small.sf-fab.sf-btn, +.sf-small .sf-large.sf-fab.sf-btn { + border-radius: 16px; + min-height: 48px; + min-width: 48px; + padding: 0 19px; +} +.sf-large.sf-small.sf-fab.sf-btn.sf-icon-btn, +.sf-large.sf-small .sf-fab.sf-btn.sf-icon-btn, +.sf-large .sf-small.sf-fab.sf-btn.sf-icon-btn, +.sf-small .sf-large.sf-fab.sf-btn.sf-icon-btn { + padding: 0; +} +.sf-large.sf-small.sf-fab.sf-btn .sf-btn-icon, +.sf-large.sf-small .sf-fab.sf-btn .sf-btn-icon, +.sf-large .sf-small.sf-fab.sf-btn .sf-btn-icon, +.sf-small .sf-large.sf-fab.sf-btn .sf-btn-icon { + font-size: 14px; +} +.sf-fab.sf-btn { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12); +} +.sf-fab.sf-btn:hover:not(:focus), .sf-fab.sf-btn:active, .sf-fab.sf-btn.sf-active, .sf-fab.sf-btn:disabled { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12); +} +.sf-fab.sf-btn:focus { + box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12); +} \ No newline at end of file diff --git a/components/buttons/styles/material3.scss b/components/buttons/styles/material3.scss new file mode 100644 index 0000000..ce39da6 --- /dev/null +++ b/components/buttons/styles/material3.scss @@ -0,0 +1,13 @@ +@import 'react-base/styles/definition/material3.scss'; +@import 'button/material3-definition.scss'; +@import 'button/all.scss'; +@import 'check-box/material3-definition.scss'; +@import 'check-box/all.scss'; +@import 'radio-button/material3-definition.scss'; +@import 'radio-button/all.scss'; +@import 'switch/material3-definition.scss'; +@import 'switch/all.scss'; +@import 'chips/material3-definition.scss'; +@import 'chips/all.scss'; +@import 'floating-action-button/material3-definition.scss'; +@import 'floating-action-button/all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/radio-button/_all.scss b/components/buttons/styles/radio-button/_all.scss new file mode 100644 index 0000000..f4d67e8 --- /dev/null +++ b/components/buttons/styles/radio-button/_all.scss @@ -0,0 +1 @@ +@import 'layout.scss'; diff --git a/components/buttons/styles/radio-button/_layout.scss b/components/buttons/styles/radio-button/_layout.scss new file mode 100644 index 0000000..ce3f379 --- /dev/null +++ b/components/buttons/styles/radio-button/_layout.scss @@ -0,0 +1,486 @@ + +@include export-module('radiobutton-layout') { + .sf-radio-wrapper { + display: inline-block; + line-height: 1; + position: relative; + } + + /* stylelint-disable property-no-vendor-prefix */ + .sf-radio { + -webkit-appearance: none; + height: 1px; + opacity: 0; + position: absolute; + width: 1px; + + &:not(:checked):not(:disabled):hover { + +label.sf-rtl, + +label.sf-right { + &::after { + left: auto; + } + } + } + + &:focus-visible { + +label { + @if $skin-name == 'fluent2' { + box-shadow: $switch-box-shadow; + border-radius: 1px; + } + } + } + + +label { + -webkit-tap-highlight-color: transparent; + cursor: pointer; + display: inline-block; + margin: 0; + position: relative; + user-select: none; + vertical-align: middle; + white-space: nowrap; + @if $skin-name == 'fluent2' { + margin: 7.6px; + } + + & .sf-label { + color: $radio-btn-font-color; + display: inline-block; + font-family: $font-family; + font-size: $radio-btn-font-size; + font-weight: normal; + line-height: $radio-btn-line-height; + padding-left: $radio-btn-padding-left; + vertical-align: text-top; + white-space: normal; + @if $skin-name == 'tailwind3' { + font-weight: $font-weight-medium; + } + } + + &:focus, + &.sf-focus { + & .sf-ripple-container { + background-color: $radio-btn-focus-ripple-bgcolor; + } + } + + & .sf-ripple-element { + background-color: $radio-btn-checked-ripple-bgcolor; + } + + &::before { + border: $radio-btn-border; + border-radius: 50%; + box-sizing: border-box; + content: ''; + height: $radio-btn-height; + left: 0; + position: absolute; + width: $radio-btn-width; + background-color: $radio-btn-background-color; + border-color: $radio-btn-border-color; + } + + &:focus { + &::before { + box-shadow: $radio-btn-focussed-box-shadow; + @if $skin-name == 'bootstrap5.3' { + border-color: $border-selected; + } + } + } + + &:active { + &::before { + @if $skin-name == 'bootstrap5.3' { + box-shadow: $radio-btn-focussed-box-shadow; + border-color: $border-selected !important; /* stylelint-disable-line declaration-no-important */ + background-color: $content-bg-color-pressed; + } + @if $skin-name == 'tailwind3' { + box-shadow: $radio-btn-focussed-box-shadow; + } + } + + & .sf-ripple-element { + background-color: $radio-btn-ripple-bgcolor; + } + } + + &::after { + border: 1px solid; + border-radius: 50%; + box-sizing: border-box; + content: ''; + height: $radio-btn-icon-height; + left: $radio-btn-icon-left; + position: absolute; + top: $radio-btn-icon-top; + transform: scale(0); + width: $radio-btn-icon-width; + } + + & .sf-ripple-container { + border-radius: 50%; + height: $radio-btn-ripple-size; + left: $radio-btn-ripple-position; + position: absolute; + top: $radio-btn-ripple-position; + width: $radio-btn-ripple-size; + z-index: 1; + + & .sf-ripple-element { + @if $skin-name == 'Material3' { + border-radius: 50%; + } + } + } + + &.sf-right, + &.sf-rtl { + & .sf-label { + padding-left: 0; + padding-right: $radio-btn-padding-left; + } + + &::before { + left: auto; + right: 0; + } + + &::after { + left: auto; + right: $radio-btn-icon-right; + } + + & .sf-ripple-container { + left: auto; + right: $radio-btn-ripple-position; + } + } + + &.sf-right { + &.sf-rtl { + & .sf-label { + padding-left: $radio-btn-padding-left; + padding-right: 0; + } + + &::before { + left: 0; + right: auto; + } + + &::after { + left: $radio-btn-icon-right; + right: auto; + } + + & .sf-ripple-container { + left: -8px; + right: auto; + } + } + } + + &.sf-small { + + & .sf-label { + line-height: $radio-btn-small-line-height; + padding-left: $radio-btn-small-padding; + } + + &::before { + height: $radio-btn-small-height; + width: $radio-btn-small-width; + } + + &::after { + height: $radio-btn-small-icon-height; + left: $radio-btn-small-icon-left; + top: $radio-btn-small-icon-top; + width: $radio-btn-small-icon-width; + } + + & .sf-ripple-container { + left: $radio-btn-small-ripple-position; + top: $radio-btn-small-ripple-position; + } + + &.sf-right, + &.sf-rtl { + & .sf-label { + padding-left: 0; + padding-right: $radio-btn-small-padding; + } + + &::after { + left: auto; + right: $radio-btn-small-icon-right; + } + + & .sf-ripple-container { + left: auto; + right: $radio-btn-small-ripple-position; + } + } + + &.sf-right { + &.sf-rtl { + & .sf-label { + padding-left: $radio-btn-small-padding; + padding-right: 0; + } + + &::after { + left: $radio-btn-small-icon-right; + right: auto; + } + + & .sf-ripple-container { + left: -10px; + right: auto; + } + } + } + } + } + + + &:focus { + +label { + &::before { + border-color: $radio-btn-focus-check-border-color; + box-shadow: $radio-btn-focussed-box-shadow; + } + } + } + + &:focus { + +label { + &::before { + border-color: $radio-btn-hover-border-color; + box-shadow: $radio-btn-focussed-box-shadow; + } + } + } + + &:checked { + +label { + &::after { + transform: scale(1); + transition: $radio-btn-check-transition; + } + } + } + + &:hover { + +label { + & .sf-ripple-container { + @if $skin-name == 'Material3' { + background: $radio-btn-ripple-bgcolor; + } + } + } + + +label { + &::before { + border-color: $radio-btn-hover-border-color; + } + } + } + + &:checked { + +label { + &::before { + background-color: $radio-btn-checked-background-color; + border-color: $radio-btn-checked-border-color; + } + + &::after { + background-color: $radio-btn-checked-color; + color: $radio-btn-checked-color; + } + + &:active { + & .sf-ripple-element { + background-color: $radio-btn-checked-ripple-bgcolor; + } + } + } + + +.sf-focus { + & .sf-ripple-container { + background-color: $radio-btn-checked-ripple-bgcolor; + } + + &::before { + outline: $radio-btn-focus-outline; + outline-offset: $radio-btn-focus-outline-offset; + } + } + } + + &:checked { + &:focus { + +label { + &::before { + border-color: $radio-btn-focus-check-border-color; + } + + &::after { + background-color: $radio-btn-focus-check-bg-color; + @if $skin-name == 'fluent2' { + color: $radio-btn-focus-check-bg-color; + } + } + } + } + + +label { + &:hover { + & .sf-ripple-container { + @if $skin-name == 'Material3' { + background: $radio-btn-checked-ripple-bgcolor; + } + } + &::before { + border-color: $radio-btn-hover-check-border-color; + } + + &::after { + background-color: $radio-btn-hover-check-bg-color; + @if $skin-name == 'fluent2' { + color: $radio-btn-hover-check-bg-color; + } + } + } + } + } + + &:disabled { + +label { + cursor: default; + pointer-events: none; + @if $skin-name == 'bootstrap5.3' { + opacity: .5; + } + + &::before { + @if $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' { + background-color: $radio-btn-disabled-not-checked-bg-color; + } + @else { + background-color: $radio-btn-disabled-background-color; + } + border-color: $radio-btn-disabled-border-color; + cursor: default; + } + + & .sf-ripple-container { + background-color: transparent; + + &::after { + background-color: transparent; + cursor: default; + } + } + + & .sf-label { + color: $radio-btn-disabled-color; + } + } + + &:checked { + +label { + &::before { + background-color: $radio-btn-disabled-background-color; + border-color: $radio-btn-disabled-checked-border-color; + } + + &::after { + background-color: $radio-btn-disabled-checked-color; + border-color: $radio-btn-disabled-checked-color; + cursor: default; + } + + & .sf-ripple-container, + & .sf-ripple-container::after { + background-color: transparent; + } + } + } + } + } + + .sf-small .sf-radio + label, + .sf-radio + label.sf-small { + @if $skin-name == 'fluent2' { + margin: 5.6px; + } + & .sf-label { + line-height: $radio-btn-small-line-height; + padding-left: $radio-btn-small-padding; + @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' { + font-size: 12px; + } + } + + &::before { + height: $radio-btn-small-height; + width: $radio-btn-small-width; + } + + &::after { + height: $radio-btn-small-icon-height; + left: $radio-btn-small-icon-left; + top: $radio-btn-small-icon-top; + width: $radio-btn-small-icon-width; + } + + & .sf-ripple-container { + left: $radio-btn-small-ripple-position; + top: $radio-btn-small-ripple-position; + } + + &.sf-right, + &.sf-rtl { + & .sf-label { + padding-left: 0; + padding-right: $radio-btn-small-padding; + } + + &::after { + left: auto; + right: $radio-btn-small-icon-right; + } + + & .sf-ripple-container { + left: auto; + right: $radio-btn-small-ripple-position; + } + } + + &.sf-right { + &.sf-rtl { + & .sf-label { + padding-left: $radio-btn-small-padding; + padding-right: 0; + } + + &::after { + left: $radio-btn-small-icon-right; + right: auto; + } + + & .sf-ripple-container { + left: -10px; + right: auto; + } + } + } + } +} diff --git a/components/buttons/styles/radio-button/_material3-dark-definition.scss b/components/buttons/styles/radio-button/_material3-dark-definition.scss new file mode 100644 index 0000000..356e259 --- /dev/null +++ b/components/buttons/styles/radio-button/_material3-dark-definition.scss @@ -0,0 +1 @@ +@import './material3-definition.scss'; diff --git a/components/buttons/styles/radio-button/_material3-definition.scss b/components/buttons/styles/radio-button/_material3-definition.scss new file mode 100644 index 0000000..d703853 --- /dev/null +++ b/components/buttons/styles/radio-button/_material3-definition.scss @@ -0,0 +1,47 @@ +$radio-btn-border: 1px solid !default; +$radio-btn-height: 14px !default; +$radio-btn-width: 14px !default; +$radio-btn-small-height: 14px !default; +$radio-btn-small-width: 14px !default; +$radio-btn-icon-left: 4px !default; +$radio-btn-icon-top: 4px !default; +$radio-btn-icon-right: 4px !default; +$radio-btn-ripple-position: -8px !default; +$radio-btn-ripple-size: 30px !default; +$radio-btn-small-icon-left: 4px !default; +$radio-btn-small-icon-top: 4px !default; +$radio-btn-small-icon-right: 4px !default; +$radio-btn-small-ripple-position: -9px !default; +$radio-btn-icon-height: 6px !default; +$radio-btn-icon-width: 6px !default; +$radio-btn-small-icon-height: 6px !default; +$radio-btn-small-icon-width: 6px !default; +$radio-btn-line-height: 1 !default; +$radio-btn-padding-left: 22px !default; +$radio-btn-small-line-height: 1 !default; +$radio-btn-small-padding: 22px !default; +$radio-btn-focus-outline-offset: 0 !default; +$radio-btn-font-size: 14px !default; +$radio-btn-background-color: $transparent !default; +$radio-btn-border-color: rgba($content-text-color-alt1) !default; +$radio-btn-checked-border-color: rgba($primary) !default; +$radio-btn-checked-color: rgba($primary) !default; +$radio-btn-checked-background-color: $transparent !default; +$radio-btn-checked-ripple-bgcolor: rgba($primary, .08) !default; +$radio-btn-check-transition: none !default; +$radio-btn-disabled-border-color: rgba($content-text-color, .38) !default; +$radio-btn-disabled-checked-border-color: rgba($content-text-color, .38) !default; +$radio-btn-disabled-background-color: transparent !default; +$radio-btn-disabled-color: $content-text-color-disabled !default; +$radio-btn-disabled-checked-color: rgba($content-text-color, .38) !default; +$radio-btn-font-color: rgba($content-text-color) !default; +$radio-btn-focus-ripple-bgcolor: rgba($content-text-color, .12) !default; +$radio-btn-focussed-box-shadow: none !default; +$radio-btn-hover-bgcolor: $transparent !default; +$radio-btn-hover-border-color: rgba($content-text-color) !default; +$radio-btn-hover-check-bg-color: rgba($primary) !default; +$radio-btn-hover-check-border-color: rgba($primary) !default; +$radio-btn-ripple-bgcolor: rgba($content-text-color, .08) !default; +$radio-btn-focus-check-bg-color: rgba($primary) !default; +$radio-btn-focus-check-border-color: rgba($primary) !default; +$radio-btn-focus-outline: $radio-btn-background-color 0 solid !default; diff --git a/components/buttons/styles/radio-button/material3-dark.css b/components/buttons/styles/radio-button/material3-dark.css new file mode 100644 index 0000000..647e02d --- /dev/null +++ b/components/buttons/styles/radio-button/material3-dark.css @@ -0,0 +1,297 @@ +.sf-radio-wrapper { + display: inline-block; + line-height: 1; + position: relative; +} +/* stylelint-disable property-no-vendor-prefix */ +.sf-radio { + -webkit-appearance: none; + height: 1px; + opacity: 0; + position: absolute; + width: 1px; +} +.sf-radio:not(:checked):not(:disabled):hover + label.sf-rtl::after, +.sf-radio:not(:checked):not(:disabled):hover + label.sf-right::after { + left: auto; +} +.sf-radio + label { + -webkit-tap-highlight-color: transparent; + cursor: pointer; + display: inline-block; + margin: 0; + position: relative; + user-select: none; + vertical-align: middle; + white-space: nowrap; +} +.sf-radio + label .sf-label { + color: rgba(var(--color-sf-on-surface)); + display: inline-block; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: normal; + line-height: 1; + padding-left: 22px; + vertical-align: text-top; + white-space: normal; +} +.sf-radio + label:focus .sf-ripple-container, .sf-radio + label.sf-focus .sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-radio + label .sf-ripple-element { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio + label::before { + border: 1px solid; + border-radius: 50%; + box-sizing: border-box; + content: ""; + height: 14px; + left: 0; + position: absolute; + width: 14px; + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-radio + label:focus::before { + box-shadow: none; +} +.sf-radio + label:active .sf-ripple-element { + background-color: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-radio + label::after { + border: 1px solid; + border-radius: 50%; + box-sizing: border-box; + content: ""; + height: 6px; + left: 4px; + position: absolute; + top: 4px; + transform: scale(0); + width: 6px; +} +.sf-radio + label .sf-ripple-container { + border-radius: 50%; + height: 30px; + left: -8px; + position: absolute; + top: -8px; + width: 30px; + z-index: 1; +} +.sf-radio + label .sf-ripple-container .sf-ripple-element { + border-radius: 50%; +} +.sf-radio + label.sf-right .sf-label, .sf-radio + label.sf-rtl .sf-label { + padding-left: 0; + padding-right: 22px; +} +.sf-radio + label.sf-right::before, .sf-radio + label.sf-rtl::before { + left: auto; + right: 0; +} +.sf-radio + label.sf-right::after, .sf-radio + label.sf-rtl::after { + left: auto; + right: 4px; +} +.sf-radio + label.sf-right .sf-ripple-container, .sf-radio + label.sf-rtl .sf-ripple-container { + left: auto; + right: -8px; +} +.sf-radio + label.sf-right.sf-rtl .sf-label { + padding-left: 22px; + padding-right: 0; +} +.sf-radio + label.sf-right.sf-rtl::before { + left: 0; + right: auto; +} +.sf-radio + label.sf-right.sf-rtl::after { + left: 4px; + right: auto; +} +.sf-radio + label.sf-right.sf-rtl .sf-ripple-container { + left: -8px; + right: auto; +} +.sf-radio + label.sf-small .sf-label { + line-height: 1; + padding-left: 22px; +} +.sf-radio + label.sf-small::before { + height: 14px; + width: 14px; +} +.sf-radio + label.sf-small::after { + height: 6px; + left: 4px; + top: 4px; + width: 6px; +} +.sf-radio + label.sf-small .sf-ripple-container { + left: -9px; + top: -9px; +} +.sf-radio + label.sf-small.sf-right .sf-label, .sf-radio + label.sf-small.sf-rtl .sf-label { + padding-left: 0; + padding-right: 22px; +} +.sf-radio + label.sf-small.sf-right::after, .sf-radio + label.sf-small.sf-rtl::after { + left: auto; + right: 4px; +} +.sf-radio + label.sf-small.sf-right .sf-ripple-container, .sf-radio + label.sf-small.sf-rtl .sf-ripple-container { + left: auto; + right: -9px; +} +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-label { + padding-left: 22px; + padding-right: 0; +} +.sf-radio + label.sf-small.sf-right.sf-rtl::after { + left: 4px; + right: auto; +} +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-ripple-container { + left: -10px; + right: auto; +} +.sf-radio:focus + label::before { + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; +} +.sf-radio:focus + label::before { + border-color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-radio:checked + label::after { + transform: scale(1); + transition: none; +} +.sf-radio:hover + label .sf-ripple-container { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-radio:hover + label::before { + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-radio:checked + label::before { + background-color: transparent; + border-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label::after { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label:active .sf-ripple-element { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio:checked + .sf-focus .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio:checked + .sf-focus::before { + outline: transparent 0 solid; + outline-offset: 0; +} +.sf-radio:checked:focus + label::before { + border-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked:focus + label::after { + background-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label:hover .sf-ripple-container { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio:checked + label:hover::before { + border-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label:hover::after { + background-color: rgba(var(--color-sf-primary)); +} +.sf-radio:disabled + label { + cursor: default; + pointer-events: none; +} +.sf-radio:disabled + label::before { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface), 0.38); + cursor: default; +} +.sf-radio:disabled + label .sf-ripple-container { + background-color: transparent; +} +.sf-radio:disabled + label .sf-ripple-container::after { + background-color: transparent; + cursor: default; +} +.sf-radio:disabled + label .sf-label { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-radio:disabled:checked + label::before { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-radio:disabled:checked + label::after { + background-color: rgba(var(--color-sf-on-surface), 0.38); + border-color: rgba(var(--color-sf-on-surface), 0.38); + cursor: default; +} +.sf-radio:disabled:checked + label .sf-ripple-container, .sf-radio:disabled:checked + label .sf-ripple-container::after { + background-color: transparent; +} +.sf-small .sf-radio + label .sf-label, +.sf-radio + label.sf-small .sf-label { + line-height: 1; + padding-left: 22px; +} +.sf-small .sf-radio + label::before, +.sf-radio + label.sf-small::before { + height: 14px; + width: 14px; +} +.sf-small .sf-radio + label::after, +.sf-radio + label.sf-small::after { + height: 6px; + left: 4px; + top: 4px; + width: 6px; +} +.sf-small .sf-radio + label .sf-ripple-container, +.sf-radio + label.sf-small .sf-ripple-container { + left: -9px; + top: -9px; +} +.sf-small .sf-radio + label.sf-right .sf-label, .sf-small .sf-radio + label.sf-rtl .sf-label, +.sf-radio + label.sf-small.sf-right .sf-label, +.sf-radio + label.sf-small.sf-rtl .sf-label { + padding-left: 0; + padding-right: 22px; +} +.sf-small .sf-radio + label.sf-right::after, .sf-small .sf-radio + label.sf-rtl::after, +.sf-radio + label.sf-small.sf-right::after, +.sf-radio + label.sf-small.sf-rtl::after { + left: auto; + right: 4px; +} +.sf-small .sf-radio + label.sf-right .sf-ripple-container, .sf-small .sf-radio + label.sf-rtl .sf-ripple-container, +.sf-radio + label.sf-small.sf-right .sf-ripple-container, +.sf-radio + label.sf-small.sf-rtl .sf-ripple-container { + left: auto; + right: -9px; +} +.sf-small .sf-radio + label.sf-right.sf-rtl .sf-label, +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-label { + padding-left: 22px; + padding-right: 0; +} +.sf-small .sf-radio + label.sf-right.sf-rtl::after, +.sf-radio + label.sf-small.sf-right.sf-rtl::after { + left: 4px; + right: auto; +} +.sf-small .sf-radio + label.sf-right.sf-rtl .sf-ripple-container, +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-ripple-container { + left: -10px; + right: auto; +} \ No newline at end of file diff --git a/components/buttons/styles/radio-button/material3-dark.scss b/components/buttons/styles/radio-button/material3-dark.scss new file mode 100644 index 0000000..bc1eba0 --- /dev/null +++ b/components/buttons/styles/radio-button/material3-dark.scss @@ -0,0 +1,3 @@ +@import 'react-base/styles/definition/material3-dark.scss'; +@import 'material3-dark-definition.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/radio-button/material3.css b/components/buttons/styles/radio-button/material3.css new file mode 100644 index 0000000..b50ab44 --- /dev/null +++ b/components/buttons/styles/radio-button/material3.css @@ -0,0 +1,351 @@ +.sf-dark-mode { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 208, 188, 255; + --color-sf-primary-container: 79, 55, 139; + --color-sf-secondary: 204, 194, 220; + --color-sf-secondary-container: 74, 68, 88; + --color-sf-tertiary: 239, 184, 200; + --color-sf-tertiary-container: 99, 59, 72; + --color-sf-surface: 28, 27, 31; + --color-sf-surface-variant: 73, 69, 79; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 55, 30, 115; + --color-sf-on-primary-container: 234, 221, 255; + --color-sf-on-secondary: 51, 45, 65; + --color-sf-on-secondary-container: 232, 222, 248; + --color-sf-on-tertiary: 73, 37, 50; + --color-sf-on-tertiary-containe: 255, 216, 228; + --color-sf-on-surface: 230, 225, 229; + --color-sf-on-surface-variant: 202, 196, 208; + --color-sf-on-background: 230, 225, 229; + --color-sf-outline: 147, 143, 153; + --color-sf-outline-variant: 68, 71, 70; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 208, 188, 255; + --color-sf-inverse-surface: 230, 225, 229; + --color-sf-inverse-on-surface: 49, 48, 51; + --color-sf-inverse-primary: 103, 80, 164; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 242, 184, 181; + --color-sf-error-container: 140, 29, 24; + --color-sf-on-error: 96, 20, 16; + --color-sf-on-error-container: 249, 222, 220; + --color-sf-success: 83, 202, 23; + --color-sf-success-container: 22, 62, 2; + --color-sf-on-success: 13, 39, 0; + --color-sf-on-success-container: 183, 250, 150; + --color-sf-info: 71, 172, 251; + --color-sf-info-container: 0, 67, 120; + --color-sf-on-info: 0, 51, 91; + --color-sf-on-info-container: 173, 219, 255; + --color-sf-warning: 245, 180, 130; + --color-sf-warning-container: 123, 65, 0; + --color-sf-on-warning: 99, 52, 0; + --color-sf-on-warning-container: 255, 220, 193; + --color-sf-spreadsheet-gridline: 231, 224, 236; + --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff; + --color-sf-success-text: 0, 0, 0; + --color-sf-warning-text: 0, 0, 0; + --color-sf-info-text: 0, 0, 0; + --color-sf-danger-text: 0, 0, 0; + --color-sf-diagram-palette-background: var(--color-sf-inverse-surface); + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary); +} +.sf-radio-wrapper { + display: inline-block; + line-height: 1; + position: relative; +} +/* stylelint-disable property-no-vendor-prefix */ +.sf-radio { + -webkit-appearance: none; + height: 1px; + opacity: 0; + position: absolute; + width: 1px; +} +.sf-radio:not(:checked):not(:disabled):hover + label.sf-rtl::after, +.sf-radio:not(:checked):not(:disabled):hover + label.sf-right::after { + left: auto; +} +.sf-radio + label { + -webkit-tap-highlight-color: transparent; + cursor: pointer; + display: inline-block; + margin: 0; + position: relative; + user-select: none; + vertical-align: middle; + white-space: nowrap; +} +.sf-radio + label .sf-label { + color: rgba(var(--color-sf-on-surface)); + display: inline-block; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: normal; + line-height: 1; + padding-left: 22px; + vertical-align: text-top; + white-space: normal; +} +.sf-radio + label:focus .sf-ripple-container, .sf-radio + label.sf-focus .sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-radio + label .sf-ripple-element { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio + label::before { + border: 1px solid; + border-radius: 50%; + box-sizing: border-box; + content: ""; + height: 14px; + left: 0; + position: absolute; + width: 14px; + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface-variant)); +} +.sf-radio + label:focus::before { + box-shadow: none; +} +.sf-radio + label:active .sf-ripple-element { + background-color: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-radio + label::after { + border: 1px solid; + border-radius: 50%; + box-sizing: border-box; + content: ""; + height: 6px; + left: 4px; + position: absolute; + top: 4px; + transform: scale(0); + width: 6px; +} +.sf-radio + label .sf-ripple-container { + border-radius: 50%; + height: 30px; + left: -8px; + position: absolute; + top: -8px; + width: 30px; + z-index: 1; +} +.sf-radio + label .sf-ripple-container .sf-ripple-element { + border-radius: 50%; +} +.sf-radio + label.sf-right .sf-label, .sf-radio + label.sf-rtl .sf-label { + padding-left: 0; + padding-right: 22px; +} +.sf-radio + label.sf-right::before, .sf-radio + label.sf-rtl::before { + left: auto; + right: 0; +} +.sf-radio + label.sf-right::after, .sf-radio + label.sf-rtl::after { + left: auto; + right: 4px; +} +.sf-radio + label.sf-right .sf-ripple-container, .sf-radio + label.sf-rtl .sf-ripple-container { + left: auto; + right: -8px; +} +.sf-radio + label.sf-right.sf-rtl .sf-label { + padding-left: 22px; + padding-right: 0; +} +.sf-radio + label.sf-right.sf-rtl::before { + left: 0; + right: auto; +} +.sf-radio + label.sf-right.sf-rtl::after { + left: 4px; + right: auto; +} +.sf-radio + label.sf-right.sf-rtl .sf-ripple-container { + left: -8px; + right: auto; +} +.sf-radio + label.sf-small .sf-label { + line-height: 1; + padding-left: 22px; +} +.sf-radio + label.sf-small::before { + height: 14px; + width: 14px; +} +.sf-radio + label.sf-small::after { + height: 6px; + left: 4px; + top: 4px; + width: 6px; +} +.sf-radio + label.sf-small .sf-ripple-container { + left: -9px; + top: -9px; +} +.sf-radio + label.sf-small.sf-right .sf-label, .sf-radio + label.sf-small.sf-rtl .sf-label { + padding-left: 0; + padding-right: 22px; +} +.sf-radio + label.sf-small.sf-right::after, .sf-radio + label.sf-small.sf-rtl::after { + left: auto; + right: 4px; +} +.sf-radio + label.sf-small.sf-right .sf-ripple-container, .sf-radio + label.sf-small.sf-rtl .sf-ripple-container { + left: auto; + right: -9px; +} +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-label { + padding-left: 22px; + padding-right: 0; +} +.sf-radio + label.sf-small.sf-right.sf-rtl::after { + left: 4px; + right: auto; +} +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-ripple-container { + left: -10px; + right: auto; +} +.sf-radio:focus + label::before { + border-color: rgba(var(--color-sf-primary)); + box-shadow: none; +} +.sf-radio:focus + label::before { + border-color: rgba(var(--color-sf-on-surface)); + box-shadow: none; +} +.sf-radio:checked + label::after { + transform: scale(1); + transition: none; +} +.sf-radio:hover + label .sf-ripple-container { + background: rgba(var(--color-sf-on-surface), 0.08); +} +.sf-radio:hover + label::before { + border-color: rgba(var(--color-sf-on-surface)); +} +.sf-radio:checked + label::before { + background-color: transparent; + border-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label::after { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label:active .sf-ripple-element { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio:checked + .sf-focus .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio:checked + .sf-focus::before { + outline: transparent 0 solid; + outline-offset: 0; +} +.sf-radio:checked:focus + label::before { + border-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked:focus + label::after { + background-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label:hover .sf-ripple-container { + background: rgba(var(--color-sf-primary), 0.08); +} +.sf-radio:checked + label:hover::before { + border-color: rgba(var(--color-sf-primary)); +} +.sf-radio:checked + label:hover::after { + background-color: rgba(var(--color-sf-primary)); +} +.sf-radio:disabled + label { + cursor: default; + pointer-events: none; +} +.sf-radio:disabled + label::before { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface), 0.38); + cursor: default; +} +.sf-radio:disabled + label .sf-ripple-container { + background-color: transparent; +} +.sf-radio:disabled + label .sf-ripple-container::after { + background-color: transparent; + cursor: default; +} +.sf-radio:disabled + label .sf-label { + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-radio:disabled:checked + label::before { + background-color: transparent; + border-color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-radio:disabled:checked + label::after { + background-color: rgba(var(--color-sf-on-surface), 0.38); + border-color: rgba(var(--color-sf-on-surface), 0.38); + cursor: default; +} +.sf-radio:disabled:checked + label .sf-ripple-container, .sf-radio:disabled:checked + label .sf-ripple-container::after { + background-color: transparent; +} +.sf-small .sf-radio + label .sf-label, +.sf-radio + label.sf-small .sf-label { + line-height: 1; + padding-left: 22px; +} +.sf-small .sf-radio + label::before, +.sf-radio + label.sf-small::before { + height: 14px; + width: 14px; +} +.sf-small .sf-radio + label::after, +.sf-radio + label.sf-small::after { + height: 6px; + left: 4px; + top: 4px; + width: 6px; +} +.sf-small .sf-radio + label .sf-ripple-container, +.sf-radio + label.sf-small .sf-ripple-container { + left: -9px; + top: -9px; +} +.sf-small .sf-radio + label.sf-right .sf-label, .sf-small .sf-radio + label.sf-rtl .sf-label, +.sf-radio + label.sf-small.sf-right .sf-label, +.sf-radio + label.sf-small.sf-rtl .sf-label { + padding-left: 0; + padding-right: 22px; +} +.sf-small .sf-radio + label.sf-right::after, .sf-small .sf-radio + label.sf-rtl::after, +.sf-radio + label.sf-small.sf-right::after, +.sf-radio + label.sf-small.sf-rtl::after { + left: auto; + right: 4px; +} +.sf-small .sf-radio + label.sf-right .sf-ripple-container, .sf-small .sf-radio + label.sf-rtl .sf-ripple-container, +.sf-radio + label.sf-small.sf-right .sf-ripple-container, +.sf-radio + label.sf-small.sf-rtl .sf-ripple-container { + left: auto; + right: -9px; +} +.sf-small .sf-radio + label.sf-right.sf-rtl .sf-label, +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-label { + padding-left: 22px; + padding-right: 0; +} +.sf-small .sf-radio + label.sf-right.sf-rtl::after, +.sf-radio + label.sf-small.sf-right.sf-rtl::after { + left: 4px; + right: auto; +} +.sf-small .sf-radio + label.sf-right.sf-rtl .sf-ripple-container, +.sf-radio + label.sf-small.sf-right.sf-rtl .sf-ripple-container { + left: -10px; + right: auto; +} \ No newline at end of file diff --git a/components/buttons/styles/radio-button/material3.scss b/components/buttons/styles/radio-button/material3.scss new file mode 100644 index 0000000..3130aa3 --- /dev/null +++ b/components/buttons/styles/radio-button/material3.scss @@ -0,0 +1,3 @@ +@import 'react-base/styles/definition/material3.scss'; +@import 'material3-definition.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/switch/_all.scss b/components/buttons/styles/switch/_all.scss new file mode 100644 index 0000000..a0fe77d --- /dev/null +++ b/components/buttons/styles/switch/_all.scss @@ -0,0 +1,2 @@ +@import 'layout.scss'; +@import 'theme.scss'; diff --git a/components/buttons/styles/switch/_layout.scss b/components/buttons/styles/switch/_layout.scss new file mode 100644 index 0000000..422d9ba --- /dev/null +++ b/components/buttons/styles/switch/_layout.scss @@ -0,0 +1,644 @@ +@include export-module('switch-layout') { + .sf-switch-wrapper, + .sf-css.sf-switch-wrapper { + cursor: pointer; + display: inline-block; + height: $switch-wrapper-height; + position: relative; + user-select: none; + width: $switch-wrapper-width; + @if $skin-name == 'fluent2' { + margin: 8px; + } + + &:focus, + &.sf-focus { + @if $skin-name == 'fluent2' { + box-shadow: $switch-box-shadow !important; /* stylelint-disable-line declaration-no-important */ + border-radius: 1px; + } + } + + @at-root { + & .sf-switch { + /* stylelint-disable property-no-vendor-prefix */ + -moz-appearance: none; + height: 1px; + opacity: 0; + position: absolute; + width: 1px; + } + + & .sf-switch-inner { + -ms-transition: $switch-inner-transition; + -webkit-transition: $switch-inner-transition; + border: $switch-inner-border-style; + border-radius: $switch-border-radius; + box-sizing: border-box; + height: $switch-inner-height; + left: $switch-inner-left; + overflow: hidden; + position: absolute; + top: $switch-inner-top; + transition: $switch-inner-transition; + width: $switch-inner-width; + } + + & .sf-switch-on, + & .sf-switch-off { + -ms-transition: $switch-transition; + -webkit-transition: $switch-transition; + align-items: center; + border-radius: inherit; + display: flex; + font-family: $switch-font-family; + font-size: $switch-font-size; + height: $switch-inner-height; + justify-content: center; + left: $switch-inner-left; + position: absolute; + transition: $switch-transition; + width: $switch-inner-width; + } + + & .sf-switch-on { + left: $switch-on-position-left; + text-indent: $switch-on-text-indent; + } + + & .sf-switch-off { + left: $switch-off-position-left; + opacity: $switch-off-opacity; + text-indent: $switch-off-text-indent; + } + + & .sf-switch-handle { + -ms-transition: $switch-handle-transition; + -webkit-transition: $switch-handle-transition; + border-radius: $switch-handle-radius; + bottom: $switch-handle-bottom; + height: $switch-handle-height; + left: $switch-handle-left; + margin: $switch-handle-margin; + position: absolute; + top: $switch-handle-top; + transition: $switch-handle-transition; + width: $switch-handle-width; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-on { + left: $switch-active-on-position-left; + opacity: $switch-active-on-opacity; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-off { + left: $switch-off-active-left; + } + + & .sf-switch-handle.sf-switch-active { + left: $switch-handle-active; + margin-left: $switch-handle-margin-left; + @if $skin-name == 'Material3' { + height: $switch-handle-active-height; + width: $switch-handle-active-width; + } + } + + &.sf-switch-disabled { + cursor: default; + pointer-events: none; + } + + & .sf-ripple-container { + border-radius: 50%; + bottom: -9px; + height: 52px; + left: -17px; + pointer-events: none; + position: absolute; + top: -17px; + width: 52px; + z-index: 1; + @if $skin-name == 'Material3' { + height: $switch-ripple-height; + left: $switch-off-ripple-left; + top: $switch-off-ripple-top; + width: $switch-ripple-width; + } + + &.sf-ripple-check { + @if $skin-name == 'Material3' { + left: $switch-ripple-left !important; /* stylelint-disable-line declaration-no-important */ + top: $switch-ripple-top !important; /* stylelint-disable-line declaration-no-important */ + } + } + + & .sf-ripple-element { + @if $skin-name == 'Material3' { + border-radius: 50%; + } + } + } + + &.sf-rtl { + & .sf-switch-handle { + left: $switch-handle-active; + margin-left: $switch-handle-margin-left; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-on { + left: $switch-on-position-left-rtl; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-off { + left: $switch-off-position-left-rtl; + } + + & .sf-switch-on { + left: $switch-on-rtl; + } + + & .sf-switch-off { + left: $switch-off-rtl; + } + + & .sf-switch-handle.sf-switch-active { + border-radius: $switch-handle-radius; + height: $switch-handle-height; + left: $switch-handle-left; + margin: $switch-handle-margin; + position: absolute; + top: $switch-handle-top; + transition: $switch-handle-transition; + width: $switch-handle-width; + } + } + + &.sf-small { + height: $switch-small-wrapper-height; + width: $switch-small-wrapper-width; + + & .sf-switch-handle { + height: $switch-small-handle-height; + width: $switch-small-handle-width; + } + + & .sf-ripple-container { + border-radius: 50%; + height: $switch-small-ripple-height; + left: $switch-small-ripple-left; + pointer-events: none; + position: absolute; + top: $switch-small-ripple-top; + width: $switch-small-ripple-width; + z-index: 1; + } + + & .sf-switch-handle.sf-switch-active { + left: $switch-small-handle-active-left; + margin-left: $switch-small-handle-margin-left; + @if $skin-name == 'Material3' { + height: $switch-handle-small-active-height; + width: $switch-handle-small-active-width; + } + } + + & .sf-switch-on, + & .sf-switch-off { + font-size: $switch-small-font-size; + } + + & .sf-switch-on { + text-indent: $switch-small-on-text-indent; + } + + & .sf-switch-off { + text-indent: $switch-small-off-text-indent; + } + + &.sf-rtl { + & .sf-switch-handle { + left: $switch-small-handle-active-left; + margin-left: $switch-small-handle-margin-left; + } + + & .sf-switch-handle { + height: $switch-small-handle-height; + width: $switch-small-handle-width; + } + + & .sf-switch-on { + left: $switch-small-on-rtl; + opacity: $switch-active-on-opacity; + } + + & .sf-switch-off { + left: $switch-small-off-rtl; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-on { + left: $switch-small-on-position-left-rtl; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-off { + left: $switch-small-off-position-left-rtl; + } + + & .sf-switch-handle.sf-switch-active { + left: $switch-small-handle-active-left-rtl; + @if $skin-name == 'Material3' { + height: $switch-handle-small-active-height; + width: $switch-handle-small-active-width; + } + } + } + } + } + } + + #{if(&, '&', '*')}.sf-small .sf-switch-wrapper, + #{if(&, '&', '*')}.sf-small.sf-switch-wrapper, + #{if(&, '&', '*')}.sf-small .sf-css.sf-switch-wrapper, + #{if(&, '&', '*')}.sf-small.sf-css.sf-switch-wrapper { + height: $switch-small-wrapper-height; + width: $switch-small-wrapper-width; + @if $skin-name == 'fluent2' { + margin: 6px; + } + + & .sf-switch-handle { + height: $switch-small-handle-height; + width: $switch-small-handle-width; + @if $skin-name == 'Material3' { + left: $switch-small-handle-left; + top: $switch-small-handle-top; + } + } + + & .sf-ripple-container { + border-radius: 50%; + height: $switch-small-ripple-height; + left: $switch-small-ripple-left; + pointer-events: none; + position: absolute; + top: $switch-small-ripple-top; + width: $switch-small-ripple-width; + z-index: 1; + @if $skin-name == 'Material3' { + left: $switch-small-off-ripple-left; + top: $switch-small-off-ripple-top; + } + + &.sf-ripple-check { + @if $skin-name == 'Material3' { + left: $switch-small-ripple-left !important; /* stylelint-disable-line declaration-no-important */ + top: $switch-small-ripple-top !important; /* stylelint-disable-line declaration-no-important */ + } + } + } + + & .sf-switch-handle.sf-switch-active { + left: $switch-small-handle-active-left; + margin-left: $switch-small-handle-margin-left; + @if $skin-name == 'Material3' { + height: $switch-handle-small-active-height; + width: $switch-handle-small-active-width; + } + } + + & .sf-switch-on, + & .sf-switch-off { + font-size: $switch-small-font-size; + } + + & .sf-switch-on { + text-indent: $switch-small-on-text-indent; + } + + & .sf-switch-off { + text-indent: $switch-small-off-text-indent; + } + + &.sf-rtl { + & .sf-switch-handle { + left: $switch-small-handle-active-left; + margin-left: $switch-small-handle-margin-left; + } + + & .sf-switch-handle { + height: $switch-small-handle-height; + width: $switch-small-handle-width; + } + + & .sf-switch-on { + left: $switch-small-on-rtl; + opacity: $switch-active-on-opacity; + } + + & .sf-switch-off { + left: $switch-small-off-rtl; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-on { + left: $switch-small-on-position-left-rtl; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-off { + left: $switch-small-off-position-left-rtl; + } + + & .sf-switch-handle.sf-switch-active { + left: $switch-small-handle-active-left-rtl; + @if $skin-name == 'Material3' { + height: $switch-handle-small-active-height; + width: $switch-handle-small-active-width; + } + } + } + } +} + +@include export-module('switch-bigger') { + #{if(&, '&', '*')}.sf-bigger.sf-small .sf-switch-wrapper, + #{if(&, '&', '*')}.sf-bigger.sf-small.sf-switch-wrapper, + #{if(&, '&', '*')}.sf-bigger.sf-small .sf-css.sf-switch-wrapper, + #{if(&, '&', '*')}.sf-bigger.sf-small.sf-css.sf-switch-wrapper { + height: $switch-bigger-small-wrapper-height; + width: $switch-bigger-small-wrapper-width; + @if $skin-name == 'fluent2' { + margin: 8px; + } + + & .sf-switch-handle { + height: $switch-bigger-small-handle-height; + left: $switch-bigger-small-handle-left; + top: $switch-bigger-small-handle-to; + width: $switch-bigger-small-handle-width; + } + + & .sf-ripple-container { + border-radius: 50%; + height: $switch-bigger-small-ripple-height; + left: $switch-bigger-small-ripple-left; + pointer-events: none; + position: absolute; + top: $switch-bigger-small-ripple-top; + width: $switch-bigger-small-ripple-width; + z-index: 1; + @if $skin-name == 'Material3' { + left: $switch-bigger-small-off-ripple-left; + top: $switch-bigger-small-off-ripple-top; + } + + &.sf-ripple-check { + @if $skin-name == 'Material3' { + left: $switch-bigger-small-ripple-left !important; /* stylelint-disable-line declaration-no-important */ + top: $switch-bigger-small-ripple-top !important; /* stylelint-disable-line declaration-no-important */ + } + } + } + + & .sf-switch-handle.sf-switch-active { + left: $switch-bigger-small-handle-active-left; + margin-left: $switch-bigger-small-handle-margin-left; + @if $skin-name == 'Material3' { + height: $switch-handle-bigger-small-active-height; + width: $switch-handle-bigger-small-active-width; + } + } + + & .sf-switch-on, + & .sf-switch-off { + font-size: $switch-bigger-small-font-size; + } + + & .sf-switch-on { + text-indent: $switch-bigger-small-on-text-indent; + } + + & .sf-switch-off { + text-indent: $switch-bigger-small-off-text-indent; + } + + &.sf-rtl { + & .sf-switch-handle { + left: $switch-bigger-small-handle-active-left; + margin-left: $switch-bigger-small-handle-margin-left; + } + + & .sf-switch-handle { + height: $switch-bigger-small-handle-height; + width: $switch-bigger-small-handle-width; + } + + & .sf-switch-on { + left: $switch-bigger-small-on-rtl; + opacity: $switch-active-on-opacity; + } + + & .sf-switch-off { + left: $switch-bigger-small-off-rtl; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-on { + left: $switch-bigger-small-on-position-left-rtl; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-off { + left: $switch-bigger-small-off-position-left-rtl; + } + + & .sf-switch-handle.sf-switch-active { + left: $switch-bigger-small-handle-active-left-rtl; + @if $skin-name == 'Material3' { + height: $switch-handle-bigger-small-active-height; + width: $switch-handle-bigger-small-active-width; + } + } + } + } + + #{if(&, '&', '*')}.sf-bigger .sf-switch-wrapper, + #{if(&, '&', '*')}.sf-bigger.sf-switch-wrapper, + #{if(&, '&', '*')}.sf-bigger .sf-css.sf-switch-wrapper, + #{if(&, '&', '*')}.sf-bigger.sf-css.sf-switch-wrapper { + height: $switch-bigger-wrapper-height; + width: $switch-bigger-wrapper-width; + @if $skin-name == 'fluent2' { + margin: 10px; + } + + & .sf-switch-handle { + height: $switch-bigger-handle-height; + left: $switch-bigger-handle-left; + top: $switch-bigger-handle-top; + width: $switch-bigger-handle-width; + } + + & .sf-switch-handle.sf-switch-active { + left: $switch-bigger-handle-active-left; + margin-left: $switch-bigger-handle-margin-left; + @if $skin-name == 'Material3' { + height: $switch-handle-bigger-active-height; + width: $switch-handle-bigger-active-width; + } + } + + & .sf-switch-on, + & .sf-switch-off { + font-size: $switch-bigger-font-size; + } + + & .sf-switch-on { + text-indent: $switch-bigger-on-text-indent; + } + + & .sf-switch-off { + text-indent: $switch-bigger-off-text-indent; + } + + & .sf-ripple-container { + height: $switch-bigger-ripple-height; + left: $switch-bigger-ripple-left; + top: $switch-bigger-ripple-top; + width: $switch-bigger-ripple-width; + @if $skin-name == 'Material3' { + left: $switch-bigger-off-ripple-left; + top: $switch-bigger-off-ripple-top; + } + + &.sf-ripple-check { + @if $skin-name == 'Material3' { + left: $switch-bigger-ripple-left !important; /* stylelint-disable-line declaration-no-important */ + top: $switch-bigger-ripple-top !important; /* stylelint-disable-line declaration-no-important */ + } + } + } + + &.sf-rtl { + & .sf-switch-handle { + height: $switch-bigger-handle-height; + left: $switch-bigger-handle-active-left; + margin-left: $switch-bigger-handle-margin-left; + top: $switch-bigger-handle-top; + width: $switch-bigger-handle-width; + } + + & .sf-switch-on { + left: $switch-bigger-on-rtl; + opacity: $switch-active-on-opacity; + } + + & .sf-switch-off { + left: $switch-bigger-off-rtl; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-on { + left: $switch-bigger-on-position-left-rtl; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-off { + left: $switch-bigger-off-position-left-rtl; + } + + & .sf-switch-handle.sf-switch-active { + left: $switch-bigger-handle-active-left-rtl; + @if $skin-name == 'Material3' { + height: $switch-handle-bigger-active-height; + width: $switch-handle-bigger-active-width; + } + } + } + + &.sf-small { + height: $switch-bigger-small-wrapper-height; + width: $switch-bigger-small-wrapper-width; + + & .sf-switch-handle { + height: $switch-bigger-small-handle-height; + left: $switch-bigger-small-handle-left; + top: $switch-bigger-small-handle-to; + width: $switch-bigger-small-handle-width; + } + + & .sf-ripple-container { + border-radius: 50%; + height: $switch-bigger-small-ripple-height; + left: $switch-bigger-small-ripple-left; + pointer-events: none; + position: absolute; + top: $switch-bigger-small-ripple-top; + width: $switch-bigger-small-ripple-width; + z-index: 1; + @if $skin-name == 'Material3' { + left: $switch-bigger-small-off-ripple-left; + top: $switch-bigger-small-off-ripple-top; + } + + &.sf-ripple-check { + @if $skin-name == 'Material3' { + left: $switch-bigger-small-ripple-left !important; /* stylelint-disable-line declaration-no-important */ + top: $switch-bigger-small-ripple-top !important; /* stylelint-disable-line declaration-no-important */ + } + } + } + + & .sf-switch-handle.sf-switch-active { + left: $switch-bigger-small-handle-active-left; + margin-left: $switch-bigger-small-handle-margin-left; + @if $skin-name == 'Material3' { + height: $switch-handle-bigger-small-active-height; + width: $switch-handle-bigger-small-active-width; + } + } + + & .sf-switch-on, + & .sf-switch-off { + font-size: $switch-bigger-small-font-size; + } + + & .sf-switch-on { + text-indent: $switch-bigger-small-on-text-indent; + } + + & .sf-switch-off { + text-indent: $switch-bigger-small-off-text-indent; + } + + &.sf-rtl { + & .sf-switch-handle { + left: $switch-bigger-small-handle-active-left; + margin-left: $switch-bigger-small-handle-margin-left; + } + + & .sf-switch-handle { + height: $switch-bigger-small-handle-height; + width: $switch-bigger-small-handle-width; + } + + & .sf-switch-on { + left: $switch-bigger-small-on-rtl; + @if $skin-name != 'tailwind3' { + opacity: $switch-active-on-opacity; + } + } + + & .sf-switch-off { + left: $switch-bigger-small-off-rtl; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-on { + left: $switch-bigger-small-on-position-left-rtl; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-off { + left: $switch-bigger-small-off-position-left-rtl; + } + + & .sf-switch-handle.sf-switch-active { + left: $switch-bigger-small-handle-active-left-rtl; + } + } + } + } +} diff --git a/components/buttons/styles/switch/_material3-dark-definition.scss b/components/buttons/styles/switch/_material3-dark-definition.scss new file mode 100644 index 0000000..356e259 --- /dev/null +++ b/components/buttons/styles/switch/_material3-dark-definition.scss @@ -0,0 +1 @@ +@import './material3-definition.scss'; diff --git a/components/buttons/styles/switch/_material3-definition.scss b/components/buttons/styles/switch/_material3-definition.scss new file mode 100644 index 0000000..8e784f4 --- /dev/null +++ b/components/buttons/styles/switch/_material3-definition.scss @@ -0,0 +1,160 @@ +$switch-wrapper-width: 48px !default; +$switch-wrapper-height: 24px !default; +$switch-inner-width: 100% !default; +$switch-inner-height: 100% !default; +$switch-handle-top: 1.5px !default; +$switch-handle-left: 6px !default; +$switch-handle-margin: auto 0 !default; +$switch-inner-top: 0 !default; +$switch-inner-left: 0 !default; +$switch-off-text-indent: 18px !default; +$switch-on-text-indent: -16px !default; +$switch-handle-active: 100% !default; +$switch-handle-margin-left: -22px !default; +$switch-active-on-opacity: 1 !default; +$switch-off-opacity: 1 !default; +$switch-handle-height: 12px !default; +$switch-handle-width: 12px !default; +$switch-transition: all .2s ease-in-out .1s !default; +$switch-inner-transition: all .2s ease-in-out !default; +$switch-handle-transition: all .2s linear !default; +$switch-active-on-position-left: 0 !default; +$switch-off-active-left: 100% !default; +$switch-on-position-left: -100% !default; +$switch-on-position-left-rtl: 0 !default; +$switch-off-position-left: 0 !default; +$switch-off-position-left-rtl: -100% !default; +$switch-on-rtl: 100% !default; +$switch-off-rtl: 0 !default; +$switch-handle-radius: 50% !default; +$switch-handle-bottom: 2px !default; +$switch-border-radius: 20px !default; +$switch-ripple-height: 32px !default; +$switch-ripple-width: 32px !default; +$switch-ripple-left: -6px !default; +$switch-ripple-top: -6.5px !default; +$switch-small-ripple-height: 24px !default; +$switch-small-ripple-left: -3px !default; +$switch-small-ripple-top: -5px !default; +$switch-small-ripple-width: 24px !default; +$switch-small-wrapper-height: 20px !default; +$switch-small-wrapper-width: 46px !default; +$switch-small-handle-width: 10px !default; +$switch-small-handle-height: 10px !default; +$switch-small-handle-active-left: 100% !default; +$switch-small-handle-margin-left: -19px !default; +$switch-small-handle-active-left-rtl: 22px !default; +$switch-small-font-size: $text-xxs !default; +$small-switch-text-indent: 14px !default; +$switch-small-on-rtl: 100% !default; +$switch-small-off-rtl: 0 !default; +$switch-small-on-position-left-rtl: 0 !default; +$switch-small-off-position-left-rtl: -100% !default; +$switch-small-on-text-indent: -11px !default; +$switch-small-off-text-indent: 14px !default; +$switch-focused-outline: none !default; +$switch-focused-outline-offset: initial !default; +$switch-focused-outline-active: none !default; +$bigger-small-switch-text-indent: 14px !default; +$switch-on-off-disabled-bg-color-opacity: 1 !default; +$switch-active-handle-bg: rgba($content-bg-color) !default; +$switch-inner-border-style: 2px solid rgba($border) !default; +$switch-inner-active: rgba($primary) !default; +$switch-inner-active-bg: rgba($primary) !default; +$switch-focus-inner-box-shadow: none !default; +$switch-inner-active-border-color: rgba($primary) !default; +$switch-active-background: transparent !default; +$switch-handle-shadow: none !default; +$switch-handle-shadow-disabled: none !default; +$switch-off-bg-color: rgba($series-1) !default; +$switch-inner-bg: rgba($content-bg-color) !default; +$switch-handle-bg-color: rgba($border) !default; +$switch-hover-bg-color: $content-bg-color-alt3 !default; +$switch-font-family: $font-family !default; +$switch-font-size: $text-xs !default; +$switch-inner-hover-bg-color: rgba($primary) !default; +$switch-inner-hover-border-color: rgba($primary) !default; +$switch-inner-on-font-color: rgba($primary-text-color) !default; +$switch-inner-off-font-color: rgba($content-text-color) !default; +$switch-inner-focus-border: $content-bg-color-alt3 !default; +$switch-on-hover-bg-color: rgba($primary) !default; +$switch-on-off-disabled-bg-color: $content-bg-color-alt1 !default; +$switch-handle-disabled-bg-color: rgba($white) !default; +$switch-handle-disabled-border-color: rgba($content-text-color, .12) !default; +$switch-handle-on-disabled-bg-color: rgba($content-bg-color) !default; +$switch-border-disabled-bg-color: rgba($content-text-color, .12) !default; +$switch-disabled-font-color: $content-text-color-disabled !default; +$switch-on-off-hover-bg-color: rgba($content-bg-color) !default; +$switch-inner-focus-bg-color: rgba($primary) !default; +$switch-inner-focus-off-bg: rgba($content-bg-color) !default; +$switch-focus-border-color-active: rgba($primary) !default; +$switch-hover-border: rgba($border) !default; +$switch-hover-active-border: rgba($primary) !default; +$switch-handle-hover-bg-color: rgba($content-bg-color) !default; +$switch-small-disabled-rtl-active-bg-color: transparent !default; +$switch-on-bg-color: rgba($primary) !default; +$switch-checked-ripple-bg-color: rgba($primary, .08) !default; +$switch-ripple-bg-color: rgba($content-text-color-alt1, .08) !default; +$switch-on-disabled-bg-color: rgba($content-text-color, .12) !default; +$switch-inner-hover-on-font-color: rgba($primary-text-color) !default; +$switch-handle-off-hover-bg-color: rgba($border) !default; + +// Material3 +$switch-small-handle-left: 5px !default; +$switch-small-handle-top: 2px !default; +$switch-handle-active-height: 18px !default; +$switch-handle-active-width: 18px !default; +$switch-handle-small-active-height: 14px !default; +$switch-handle-small-active-width: 14px !default; +$switch-handle-bigger-active-height: 24px !default; +$switch-handle-bigger-active-width: 24px !default; +$switch-handle-bigger-small-active-height: 20px !default; +$switch-handle-bigger-small-active-width: 20px !default; +$switch-off-ripple-top: -10px !default; +$switch-off-ripple-left: -10px !default; +$switch-small-off-ripple-top: -7px !default; +$switch-small-off-ripple-left: -7px !default; +$switch-bigger-small-wrapper-height: 28px !default; +$switch-bigger-small-wrapper-width: 60px !default; +$switch-bigger-small-handle-height: 16px !default; +$switch-bigger-small-handle-active-left: 100% !default; +$switch-bigger-small-handle-margin-left: -25px !default; +$switch-bigger-small-handle-active-left-rtl: 30px !default; +$switch-bigger-wrapper-height: 32px !default; +$switch-bigger-wrapper-width: 66px !default; +$switch-bigger-handle-width: 16px !default; +$switch-bigger-handle-height: 16px !default; +$switch-bigger-handle-active-left: 100% !default; +$switch-bigger-handle-margin-left: -29px !default; +$switch-bigger-handle-active-left-rtl: 32px !default; +$switch-bigger-on-rtl: 100% !default; +$switch-bigger-off-rtl: 0 !default; +$switch-bigger-on-position-left-rtl: 0 !default; +$switch-bigger-off-position-left-rtl: -100% !default; +$switch-bigger-handle-top: 2px !default; +$switch-bigger-handle-left: 6px !default; +$switch-bigger-ripple-height: 40px !default; +$switch-bigger-ripple-left: -7px !default; +$switch-bigger-ripple-top: -8px !default; +$switch-bigger-ripple-width: 40px !default; +$switch-bigger-small-on-rtl: 100% !default; +$switch-bigger-small-off-rtl: 0 !default; +$switch-bigger-small-on-position-left-rtl: 0 !default; +$switch-bigger-small-off-position-left-rtl: -100% !default; +$switch-bigger-small-on-text-indent: -14px !default; +$switch-bigger-small-off-text-indent: 14px !default; +$switch-bigger-small-handle-to: 1px !default; +$switch-bigger-small-handle-left: 6px !default; +$switch-bigger-small-ripple-height: 36px !default; +$switch-bigger-small-ripple-left: -7px !default; +$switch-bigger-small-ripple-top: -8px !default; +$switch-bigger-small-ripple-width: 36px !default; +$switch-bigger-small-handle-width: 16px !default; +$switch-bigger-on-text-indent: -15px !default; +$switch-bigger-off-text-indent: 18px !default; +$switch-bigger-small-font-size: $text-xs !default; +$switch-bigger-font-size: $text-sm !default; +$switch-bigger-off-ripple-left: -12px !default; +$switch-bigger-small-off-ripple-left: -10px !default; +$switch-bigger-small-off-ripple-top: -10px !default; +$switch-bigger-off-ripple-top: -12px !default; \ No newline at end of file diff --git a/components/buttons/styles/switch/_theme.scss b/components/buttons/styles/switch/_theme.scss new file mode 100644 index 0000000..08a232a --- /dev/null +++ b/components/buttons/styles/switch/_theme.scss @@ -0,0 +1,406 @@ +@include export-module('switch-theme') { + .sf-switch-wrapper, + .sf-css.sf-switch-wrapper { + /* stylelint-disable property-no-vendor-prefix */ + -webkit-tap-highlight-color: transparent; + + & .sf-switch-off { + background-color: $switch-off-bg-color; + color: $switch-inner-off-font-color; + } + + & .sf-switch-handle { + background-color: $switch-handle-bg-color; + box-shadow: $switch-handle-shadow; + } + + & .sf-switch-on { + background-color: $switch-on-bg-color; + color: $switch-inner-on-font-color; + } + + & .sf-switch-handle.sf-switch-active { + background-color: $switch-active-handle-bg; + @if $skin-name == 'bootstrap5.3' { + opacity: 1; + } + } + + & .sf-switch-inner.sf-switch-active { + background-color: $switch-inner-active-bg; + border-color: $switch-inner-active-border-color; + } + + & .sf-switch-inner { + background-color: $switch-inner-bg; + } + + & .sf-ripple-element { + background-color: $switch-checked-ripple-bg-color; + } + + & .sf-ripple-check .sf-ripple-element { + background-color: $switch-ripple-bg-color; + } + + &.sf-switch-disabled { + & .sf-switch-handle.sf-switch-active { + box-shadow: $switch-handle-shadow-disabled; + @if $skin-name == 'bootstrap5.3' { + background-color: $content-bg-color; + @if $skin-name == 'bootstrap5.3' { + opacity: 1; + } + @else { + opacity: $switch-on-off-disabled-bg-color-opacity; + } + } + } + + & .sf-switch-handle:not(.sf-switch-active) { + @if $skin-name == 'Material3' { + background-color: $switch-on-disabled-bg-color; + } + } + + & .sf-switch-handle { + background-color: $switch-handle-disabled-bg-color; + box-shadow: $switch-handle-shadow-disabled; + } + + & .sf-switch-inner.sf-switch-active { + @if $skin-name == 'bootstrap5.3' { + background-color: $primary; + } + @if $skin-name == 'tailwind3' { + background-color: $switch-inner-active-bg; + border-color: $switch-inner-active-bg; + } + } + + & .sf-switch-inner .sf-switch-off { + opacity: $switch-on-off-disabled-bg-color-opacity; + background-color: $switch-on-off-disabled-bg-color; + @if $skin-name == 'Material3' { + border-color: $switch-handle-disabled-border-color; + } + @else { + border-color: $switch-handle-disabled-bg-color; + } + color: $switch-disabled-font-color; + } + + & .sf-switch-inner .sf-switch-on { + color: $switch-disabled-font-color; + opacity: $switch-on-off-disabled-bg-color-opacity; + background-color: $switch-on-disabled-bg-color; + @if $skin-name == 'fluent2' { + border-color: $toggle-switch-border-disabled !important; /* stylelint-disable-line declaration-no-important */ + } + } + + & .sf-switch-inner { + @if $skin-name == 'fluent2' { + background-color: transparent; + } + @else { + background-color: $switch-on-off-disabled-bg-color; + } + @if $skin-name != 'bootstrap5.3' { + opacity: $switch-on-off-disabled-bg-color-opacity; + } + border-color: $switch-border-disabled-bg-color; + } + + &:hover { + & .sf-switch-inner.sf-switch-active { + @if $skin-name != 'bootstrap5.3' { + background-color: $switch-on-off-disabled-bg-color; + } + border-color: $switch-border-disabled-bg-color; + } + & .sf-switch-handle:not(.sf-switch-active) { + @if $skin-name == 'Material3' { + background-color: $switch-on-disabled-bg-color; + } + } + + & .sf-switch-inner { + border-color: $switch-border-disabled-bg-color; + color: $switch-disabled-font-color; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-on { + color: $switch-disabled-font-color; + background-color: $switch-on-disabled-bg-color; + } + + & .sf-switch-handle { + background-color: $switch-handle-disabled-bg-color; + } + + & .sf-switch-handle.sf-switch-active { + background-color: $switch-handle-disabled-bg-color; + } + } + } + + &:hover { + & .sf-switch-inner.sf-switch-active { + background-color: $switch-inner-hover-border-color; + border-color: $switch-inner-hover-border-color; + } + + & .sf-switch-inner { + background-color: $switch-hover-bg-color; + border-color: $switch-hover-border; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-on { + background-color: $switch-on-hover-bg-color; + color: $switch-inner-hover-on-font-color; + } + + & .sf-switch-handle.sf-switch-active { + background-color: $switch-handle-hover-bg-color; + & .sf-ripple-container { + @if $skin-name == 'Material3' { + background-color: $switch-checked-ripple-bg-color; + } + } + + & .sf-ripple-check.sf-ripple-container { + @if $skin-name == 'Material3' { + background-color: $switch-ripple-bg-color; + } + } + } + } + + &:not(.sf-switch-disabled):hover { + & .sf-switch-handle:not(.sf-switch-active) { + @if $skin-name != 'bootstrap5.3' { + background-color: $switch-handle-off-hover-bg-color; + } + @if $skin-name == 'tailwind3' { + background-color: $switch-handle-bg-color; + } + } + } + + &.sf-focus, + &:focus { + & .sf-switch-inner { + background-color: $switch-inner-focus-off-bg; + border-color: $switch-inner-focus-border; + box-shadow: $switch-focus-inner-box-shadow; + outline: $switch-focused-outline; + outline-offset: $switch-focused-outline-offset; + } + + & .sf-switch-inner.sf-switch-active { + background-color: $switch-inner-focus-bg-color; + border-color: $switch-focus-border-color-active; + outline: $switch-focused-outline-active; + } + + & .sf-ripple-container { + background-color: $switch-checked-ripple-bg-color; + } + + & .sf-ripple-check.sf-ripple-container { + background-color: $switch-ripple-bg-color; + } + } + + &.sf-active, + &:active { + & .sf-switch-inner { + @if $skin-name == 'fluent2' { + background-color: $content-bg-color; + border-color: $border-pressed; + } + @else { + background-color: $switch-inner-focus-off-bg; + border-color: $switch-inner-focus-border; + } + box-shadow: $switch-focus-inner-box-shadow; + outline: $switch-focused-outline; + outline-offset: $switch-focused-outline-offset; + + &.sf-switch-active { + @if $skin-name == 'fluent2' { + background-color: $primary-border-color-selected; + border-color: $primary-border-color-selected; + } + } + } + + & .sf-switch-inner.sf-switch-active { + background-color: $switch-inner-focus-bg-color; + border-color: $switch-focus-border-color-active; + outline: $switch-focused-outline-active; + } + + & .sf-ripple-container { + background-color: $switch-checked-ripple-bg-color; + } + + & .sf-ripple-check.sf-ripple-container { + background-color: $switch-ripple-bg-color; + } + } + + &.sf-rtl { + &.sf-focus { + + & .sf-switch-on { + @if $skin-name != 'bootstrap5.3' { + background-color: $switch-on-off-hover-bg-color; + } + } + + & .sf-switch-off { + background-color: $switch-on-off-hover-bg-color; + } + + & .sf-switch-inner.sf-switch-active { + background-color: $switch-inner-focus-bg-color; + border-color: $switch-focus-border-color-active; + color: $switch-inner-on-font-color; + outline: $switch-focused-outline-active; + } + } + + & .sf-switch-on { + background-color: $switch-inner-active; + } + + & .sf-switch-handle { + background-color: $switch-handle-bg-color; + box-shadow: $switch-handle-shadow; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-off { + background-color: $switch-off-bg-color; + } + + & .sf-switch-handle.sf-switch-active { + background-color: $switch-active-handle-bg; + } + + & .sf-switch-inner.sf-switch-active { + background-color: $switch-inner-active-bg; + border-color: $switch-inner-active-border-color; + } + + &:hover { + & .sf-switch-inner.sf-switch-active { + background-color: $switch-inner-hover-bg-color; + border-color: $switch-inner-hover-border-color; + } + + & .sf-switch-inner { + border-color: $switch-hover-border; + } + + & .sf-switch-inner.sf-switch-active .sf-switch-on { + background-color: $switch-on-hover-bg-color; + } + + & .sf-switch-handle.sf-switch-active { + background-color: $switch-handle-hover-bg-color; + } + } + + &.sf-switch-disabled { + & .sf-switch-inner .sf-switch-on { + color: $switch-disabled-font-color; + opacity: $switch-on-off-disabled-bg-color-opacity; + background-color: $switch-on-disabled-bg-color; + @if $skin-name == 'fluent2' { + border-color: $toggle-switch-border-disabled; + } + } + + & .sf-switch-inner.sf-switch-active { + @if $skin-name == 'tailwind3' { + background-color: $switch-inner-active-bg; + border-color: $switch-inner-active-bg; + } + } + + & .sf-switch-inner .sf-switch-off { + opacity: $switch-on-off-disabled-bg-color-opacity; + background-color: $switch-on-off-disabled-bg-color; + color: $switch-disabled-font-color; + } + + & .sf-switch-handle { + background-color: $switch-handle-disabled-bg-color; + box-shadow: $switch-handle-shadow-disabled; + } + + & .sf-switch-handle.sf-switch-active { + background-color: $switch-handle-on-disabled-bg-color; + box-shadow: $switch-handle-shadow-disabled; + } + + & .sf-switch-inner { + background-color: $switch-on-off-disabled-bg-color; + border-color: $switch-border-disabled-bg-color; + opacity: $switch-on-off-disabled-bg-color-opacity; + } + + &:hover { + & .sf-switch-inner.sf-switch-active .sf-switch-on { + color: $switch-disabled-font-color; + background-color: $switch-on-disabled-bg-color; + } + + & .sf-switch-inner.sf-switch-active { + background-color: $switch-on-off-disabled-bg-color; + border-color: $switch-border-disabled-bg-color; + } + + & .sf-switch-inner { + border-color: $switch-border-disabled-bg-color; + color: $switch-disabled-font-color; + } + + & .sf-switch-handle.sf-switch-active { + background-color: $switch-handle-on-disabled-bg-color; + } + + & .sf-switch-handle { + background-color: $switch-handle-disabled-bg-color; + } + } + } + } + + & .sf-switch { + &:focus { + box-shadow: $switch-focus-inner-box-shadow; + } + } + + &.sf-small { + &.sf-rtl.sf-switch-disabled { + &:hover { + & .sf-switch-inner.sf-switch-active { + background-color: $switch-small-disabled-rtl-active-bg-color; + } + } + } + } + } +} + +.sf-switch-wrapper:focus .sf-switch-handle:not(.sf-switch-active), +.sf-switch-wrapper:active .sf-switch-handle:not(.sf-switch-active), +.sf-switch-wrapper.sf-focus .sf-switch-handle:not(.sf-switch-active) { + @if $skin-name == 'bootstrap5.3' { + background-color: $primary-light; + } +} diff --git a/components/buttons/styles/switch/material3-dark.css b/components/buttons/styles/switch/material3-dark.css new file mode 100644 index 0000000..56d8a42 --- /dev/null +++ b/components/buttons/styles/switch/material3-dark.css @@ -0,0 +1,973 @@ +.sf-switch-wrapper, +.sf-css.sf-switch-wrapper { + cursor: pointer; + display: inline-block; + height: 24px; + position: relative; + user-select: none; + width: 48px; +} +.sf-switch-wrapper .sf-switch, +.sf-css.sf-switch-wrapper .sf-switch { + /* stylelint-disable property-no-vendor-prefix */ + -moz-appearance: none; + height: 1px; + opacity: 0; + position: absolute; + width: 1px; +} +.sf-switch-wrapper .sf-switch-inner, +.sf-css.sf-switch-wrapper .sf-switch-inner { + -ms-transition: all 0.2s ease-in-out; + -webkit-transition: all 0.2s ease-in-out; + border: 2px solid rgba(var(--color-sf-outline)); + border-radius: 20px; + box-sizing: border-box; + height: 100%; + left: 0; + overflow: hidden; + position: absolute; + top: 0; + transition: all 0.2s ease-in-out; + width: 100%; +} +.sf-switch-wrapper .sf-switch-on, .sf-switch-wrapper .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-off { + -ms-transition: all 0.2s ease-in-out 0.1s; + -webkit-transition: all 0.2s ease-in-out 0.1s; + align-items: center; + border-radius: inherit; + display: flex; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 12px; + height: 100%; + justify-content: center; + left: 0; + position: absolute; + transition: all 0.2s ease-in-out 0.1s; + width: 100%; +} +.sf-switch-wrapper .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-on { + left: -100%; + text-indent: -16px; +} +.sf-switch-wrapper .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-off { + left: 0; + opacity: 1; + text-indent: 18px; +} +.sf-switch-wrapper .sf-switch-handle, +.sf-css.sf-switch-wrapper .sf-switch-handle { + -ms-transition: all 0.2s linear; + -webkit-transition: all 0.2s linear; + border-radius: 50%; + bottom: 2px; + height: 12px; + left: 6px; + margin: auto 0; + position: absolute; + top: 1.5px; + transition: all 0.2s linear; + width: 12px; +} +.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; + opacity: 1; +} +.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-off { + left: 100%; +} +.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -22px; + height: 18px; + width: 18px; +} +.sf-switch-wrapper.sf-switch-disabled, +.sf-css.sf-switch-wrapper.sf-switch-disabled { + cursor: default; + pointer-events: none; +} +.sf-switch-wrapper .sf-ripple-container, +.sf-css.sf-switch-wrapper .sf-ripple-container { + border-radius: 50%; + bottom: -9px; + height: 52px; + left: -17px; + pointer-events: none; + position: absolute; + top: -17px; + width: 52px; + z-index: 1; + height: 32px; + left: -10px; + top: -10px; + width: 32px; +} +.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -6px !important; /* stylelint-disable-line declaration-no-important */ + top: -6.5px !important; /* stylelint-disable-line declaration-no-important */ +} +.sf-switch-wrapper .sf-ripple-container .sf-ripple-element, +.sf-css.sf-switch-wrapper .sf-ripple-container .sf-ripple-element { + border-radius: 50%; +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -22px; +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +.sf-switch-wrapper.sf-rtl .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; +} +.sf-switch-wrapper.sf-rtl .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + border-radius: 50%; + height: 12px; + left: 6px; + margin: auto 0; + position: absolute; + top: 1.5px; + transition: all 0.2s linear; + width: 12px; +} +.sf-switch-wrapper.sf-small, +.sf-css.sf-switch-wrapper.sf-small { + height: 20px; + width: 46px; +} +.sf-switch-wrapper.sf-small .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle { + height: 10px; + width: 10px; +} +.sf-switch-wrapper.sf-small .sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-small .sf-ripple-container { + border-radius: 50%; + height: 24px; + left: -3px; + pointer-events: none; + position: absolute; + top: -5px; + width: 24px; + z-index: 1; +} +.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -19px; + height: 14px; + width: 14px; +} +.sf-switch-wrapper.sf-small .sf-switch-on, .sf-switch-wrapper.sf-small .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + font-size: 10px; +} +.sf-switch-wrapper.sf-small .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-on { + text-indent: -11px; +} +.sf-switch-wrapper.sf-small .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + text-indent: 14px; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -19px; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + height: 10px; + width: 10px; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off { + left: 0; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active { + left: 22px; + height: 14px; + width: 14px; +} +*.sf-small .sf-switch-wrapper, +*.sf-small.sf-switch-wrapper, +*.sf-small .sf-css.sf-switch-wrapper, +*.sf-small.sf-css.sf-switch-wrapper { + height: 20px; + width: 46px; +} +*.sf-small .sf-switch-wrapper .sf-switch-handle, +*.sf-small.sf-switch-wrapper .sf-switch-handle, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle { + height: 10px; + width: 10px; + left: 5px; + top: 2px; +} +*.sf-small .sf-switch-wrapper .sf-ripple-container, +*.sf-small.sf-switch-wrapper .sf-ripple-container, +*.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container, +*.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container { + border-radius: 50%; + height: 24px; + left: -3px; + pointer-events: none; + position: absolute; + top: -5px; + width: 24px; + z-index: 1; + left: -7px; + top: -7px; +} +*.sf-small .sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-small.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -3px !important; /* stylelint-disable-line declaration-no-important */ + top: -5px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-small .sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-small.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -19px; + height: 14px; + width: 14px; +} +*.sf-small .sf-switch-wrapper .sf-switch-on, *.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + font-size: 10px; +} +*.sf-small .sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-on { + text-indent: -11px; +} +*.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + text-indent: 14px; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -19px; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + height: 10px; + width: 10px; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + left: 22px; + height: 14px; + width: 14px; +} +*.sf-bigger.sf-small .sf-switch-wrapper, +*.sf-bigger.sf-small.sf-switch-wrapper, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper { + height: 28px; + width: 60px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle { + height: 16px; + left: 6px; + top: 1px; + width: 16px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container { + border-radius: 50%; + height: 36px; + left: -7px; + pointer-events: none; + position: absolute; + top: -8px; + width: 36px; + z-index: 1; + left: -10px; + top: -10px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -7px !important; /* stylelint-disable-line declaration-no-important */ + top: -8px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -25px; + height: 20px; + width: 20px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-on, *.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + font-size: 12px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-on { + text-indent: -14px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + text-indent: 14px; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -25px; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + height: 16px; + width: 16px; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + left: 30px; + height: 20px; + width: 20px; +} +*.sf-bigger .sf-switch-wrapper, +*.sf-bigger.sf-switch-wrapper, +*.sf-bigger .sf-css.sf-switch-wrapper, +*.sf-bigger.sf-css.sf-switch-wrapper { + height: 32px; + width: 66px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-handle { + height: 16px; + left: 6px; + top: 2px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -29px; + height: 24px; + width: 24px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-on, *.sf-bigger .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-switch-wrapper .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-off { + font-size: 14px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-switch-wrapper .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-on { + text-indent: -15px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-switch-wrapper .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-off { + text-indent: 18px; +} +*.sf-bigger .sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-ripple-container { + height: 40px; + left: -7px; + top: -8px; + width: 40px; + left: -12px; + top: -12px; +} +*.sf-bigger .sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -7px !important; /* stylelint-disable-line declaration-no-important */ + top: -8px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + height: 16px; + left: 100%; + margin-left: -29px; + top: 2px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + left: 32px; + height: 24px; + width: 24px; +} +*.sf-bigger .sf-switch-wrapper.sf-small, +*.sf-bigger.sf-switch-wrapper.sf-small, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small { + height: 28px; + width: 60px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle { + height: 16px; + left: 6px; + top: 1px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-ripple-container, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-ripple-container, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-ripple-container, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-ripple-container { + border-radius: 50%; + height: 36px; + left: -7px; + pointer-events: none; + position: absolute; + top: -8px; + width: 36px; + z-index: 1; + left: -10px; + top: -10px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check { + left: -7px !important; /* stylelint-disable-line declaration-no-important */ + top: -8px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -25px; + height: 20px; + width: 20px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-on, *.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + font-size: 12px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-on { + text-indent: -14px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + text-indent: 14px; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -25px; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + height: 16px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active { + left: 30px; +} +.sf-switch-wrapper, +.sf-css.sf-switch-wrapper { + /* stylelint-disable property-no-vendor-prefix */ + -webkit-tap-highlight-color: transparent; +} +.sf-switch-wrapper .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-off { + background-color: rgba(var(--color-sf-surface-variant)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-switch-wrapper .sf-switch-handle, +.sf-css.sf-switch-wrapper .sf-switch-handle { + background-color: rgba(var(--color-sf-outline)); + box-shadow: none; +} +.sf-switch-wrapper .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper .sf-switch-inner, +.sf-css.sf-switch-wrapper .sf-switch-inner { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper .sf-ripple-element, +.sf-css.sf-switch-wrapper .sf-ripple-element { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper .sf-ripple-check .sf-ripple-element, +.sf-css.sf-switch-wrapper .sf-ripple-check .sf-ripple-element { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle.sf-switch-active { + box-shadow: none; +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle:not(.sf-switch-active), +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle:not(.sf-switch-active) { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); + box-shadow: none; +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-off { + opacity: 1; + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + opacity: 1; + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + opacity: 1; + border-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle:not(.sf-switch-active), +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle:not(.sf-switch-active) { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner { + border-color: rgba(var(--color-sf-on-surface), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-white)); +} +.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper:hover .sf-switch-inner { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-outline)); +} +.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-container, +.sf-css.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-check.sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper:not(.sf-switch-disabled):hover .sf-switch-handle:not(.sf-switch-active), +.sf-css.sf-switch-wrapper:not(.sf-switch-disabled):hover .sf-switch-handle:not(.sf-switch-active) { + background-color: rgba(var(--color-sf-outline)); +} +.sf-switch-wrapper.sf-focus .sf-switch-inner, .sf-switch-wrapper:focus .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-focus .sf-switch-inner, +.sf-css.sf-switch-wrapper:focus .sf-switch-inner { + background-color: rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + box-shadow: none; + outline: none; + outline-offset: initial; +} +.sf-switch-wrapper.sf-focus .sf-switch-inner.sf-switch-active, .sf-switch-wrapper:focus .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-focus .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper:focus .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + outline: none; +} +.sf-switch-wrapper.sf-focus .sf-ripple-container, .sf-switch-wrapper:focus .sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-focus .sf-ripple-container, +.sf-css.sf-switch-wrapper:focus .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper.sf-focus .sf-ripple-check.sf-ripple-container, .sf-switch-wrapper:focus .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-focus .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper:focus .sf-ripple-check.sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper.sf-active .sf-switch-inner, .sf-switch-wrapper:active .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-active .sf-switch-inner, +.sf-css.sf-switch-wrapper:active .sf-switch-inner { + background-color: rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + box-shadow: none; + outline: none; + outline-offset: initial; +} +.sf-switch-wrapper.sf-active .sf-switch-inner.sf-switch-active, .sf-switch-wrapper:active .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-active .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper:active .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + outline: none; +} +.sf-switch-wrapper.sf-active .sf-ripple-container, .sf-switch-wrapper:active .sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-active .sf-ripple-container, +.sf-css.sf-switch-wrapper:active .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper.sf-active .sf-ripple-check.sf-ripple-container, .sf-switch-wrapper:active .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-active .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper:active .sf-ripple-check.sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-on { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-off { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + outline: none; +} +.sf-switch-wrapper.sf-rtl .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + background-color: rgba(var(--color-sf-outline)); + box-shadow: none; +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + background-color: rgba(var(--color-sf-surface-variant)); +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner { + border-color: rgba(var(--color-sf-outline)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + opacity: 1; + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-off { + opacity: 1; + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); + box-shadow: none; +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); + box-shadow: none; +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); + opacity: 1; +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner { + border-color: rgba(var(--color-sf-on-surface), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); +} +.sf-switch-wrapper .sf-switch:focus, +.sf-css.sf-switch-wrapper .sf-switch:focus { + box-shadow: none; +} +.sf-switch-wrapper.sf-small.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active { + background-color: transparent; +} \ No newline at end of file diff --git a/components/buttons/styles/switch/material3-dark.scss b/components/buttons/styles/switch/material3-dark.scss new file mode 100644 index 0000000..bc1eba0 --- /dev/null +++ b/components/buttons/styles/switch/material3-dark.scss @@ -0,0 +1,3 @@ +@import 'react-base/styles/definition/material3-dark.scss'; +@import 'material3-dark-definition.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/styles/switch/material3.css b/components/buttons/styles/switch/material3.css new file mode 100644 index 0000000..35e91c8 --- /dev/null +++ b/components/buttons/styles/switch/material3.css @@ -0,0 +1,1027 @@ +.sf-dark-mode { + --color-sf-black: 0, 0, 0; + --color-sf-white: 255, 255, 255; + --color-sf-primary: 208, 188, 255; + --color-sf-primary-container: 79, 55, 139; + --color-sf-secondary: 204, 194, 220; + --color-sf-secondary-container: 74, 68, 88; + --color-sf-tertiary: 239, 184, 200; + --color-sf-tertiary-container: 99, 59, 72; + --color-sf-surface: 28, 27, 31; + --color-sf-surface-variant: 73, 69, 79; + --color-sf-background: var(--color-sf-surface); + --color-sf-on-primary: 55, 30, 115; + --color-sf-on-primary-container: 234, 221, 255; + --color-sf-on-secondary: 51, 45, 65; + --color-sf-on-secondary-container: 232, 222, 248; + --color-sf-on-tertiary: 73, 37, 50; + --color-sf-on-tertiary-containe: 255, 216, 228; + --color-sf-on-surface: 230, 225, 229; + --color-sf-on-surface-variant: 202, 196, 208; + --color-sf-on-background: 230, 225, 229; + --color-sf-outline: 147, 143, 153; + --color-sf-outline-variant: 68, 71, 70; + --color-sf-shadow: 0, 0, 0; + --color-sf-surface-tint-color: 208, 188, 255; + --color-sf-inverse-surface: 230, 225, 229; + --color-sf-inverse-on-surface: 49, 48, 51; + --color-sf-inverse-primary: 103, 80, 164; + --color-sf-scrim: 0, 0, 0; + --color-sf-error: 242, 184, 181; + --color-sf-error-container: 140, 29, 24; + --color-sf-on-error: 96, 20, 16; + --color-sf-on-error-container: 249, 222, 220; + --color-sf-success: 83, 202, 23; + --color-sf-success-container: 22, 62, 2; + --color-sf-on-success: 13, 39, 0; + --color-sf-on-success-container: 183, 250, 150; + --color-sf-info: 71, 172, 251; + --color-sf-info-container: 0, 67, 120; + --color-sf-on-info: 0, 51, 91; + --color-sf-on-info-container: 173, 219, 255; + --color-sf-warning: 245, 180, 130; + --color-sf-warning-container: 123, 65, 0; + --color-sf-on-warning: 99, 52, 0; + --color-sf-on-warning-container: 255, 220, 193; + --color-sf-spreadsheet-gridline: 231, 224, 236; + --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff; + --color-sf-success-text: 0, 0, 0; + --color-sf-warning-text: 0, 0, 0; + --color-sf-info-text: 0, 0, 0; + --color-sf-danger-text: 0, 0, 0; + --color-sf-diagram-palette-background: var(--color-sf-inverse-surface); + --color-sf-content-text-color-alt2: var(--color-sf-on-secondary); +} +.sf-switch-wrapper, +.sf-css.sf-switch-wrapper { + cursor: pointer; + display: inline-block; + height: 24px; + position: relative; + user-select: none; + width: 48px; +} +.sf-switch-wrapper .sf-switch, +.sf-css.sf-switch-wrapper .sf-switch { + /* stylelint-disable property-no-vendor-prefix */ + -moz-appearance: none; + height: 1px; + opacity: 0; + position: absolute; + width: 1px; +} +.sf-switch-wrapper .sf-switch-inner, +.sf-css.sf-switch-wrapper .sf-switch-inner { + -ms-transition: all 0.2s ease-in-out; + -webkit-transition: all 0.2s ease-in-out; + border: 2px solid rgba(var(--color-sf-outline)); + border-radius: 20px; + box-sizing: border-box; + height: 100%; + left: 0; + overflow: hidden; + position: absolute; + top: 0; + transition: all 0.2s ease-in-out; + width: 100%; +} +.sf-switch-wrapper .sf-switch-on, .sf-switch-wrapper .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-off { + -ms-transition: all 0.2s ease-in-out 0.1s; + -webkit-transition: all 0.2s ease-in-out 0.1s; + align-items: center; + border-radius: inherit; + display: flex; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + font-size: 12px; + height: 100%; + justify-content: center; + left: 0; + position: absolute; + transition: all 0.2s ease-in-out 0.1s; + width: 100%; +} +.sf-switch-wrapper .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-on { + left: -100%; + text-indent: -16px; +} +.sf-switch-wrapper .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-off { + left: 0; + opacity: 1; + text-indent: 18px; +} +.sf-switch-wrapper .sf-switch-handle, +.sf-css.sf-switch-wrapper .sf-switch-handle { + -ms-transition: all 0.2s linear; + -webkit-transition: all 0.2s linear; + border-radius: 50%; + bottom: 2px; + height: 12px; + left: 6px; + margin: auto 0; + position: absolute; + top: 1.5px; + transition: all 0.2s linear; + width: 12px; +} +.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; + opacity: 1; +} +.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-inner.sf-switch-active .sf-switch-off { + left: 100%; +} +.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -22px; + height: 18px; + width: 18px; +} +.sf-switch-wrapper.sf-switch-disabled, +.sf-css.sf-switch-wrapper.sf-switch-disabled { + cursor: default; + pointer-events: none; +} +.sf-switch-wrapper .sf-ripple-container, +.sf-css.sf-switch-wrapper .sf-ripple-container { + border-radius: 50%; + bottom: -9px; + height: 52px; + left: -17px; + pointer-events: none; + position: absolute; + top: -17px; + width: 52px; + z-index: 1; + height: 32px; + left: -10px; + top: -10px; + width: 32px; +} +.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -6px !important; /* stylelint-disable-line declaration-no-important */ + top: -6.5px !important; /* stylelint-disable-line declaration-no-important */ +} +.sf-switch-wrapper .sf-ripple-container .sf-ripple-element, +.sf-css.sf-switch-wrapper .sf-ripple-container .sf-ripple-element { + border-radius: 50%; +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -22px; +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +.sf-switch-wrapper.sf-rtl .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; +} +.sf-switch-wrapper.sf-rtl .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + border-radius: 50%; + height: 12px; + left: 6px; + margin: auto 0; + position: absolute; + top: 1.5px; + transition: all 0.2s linear; + width: 12px; +} +.sf-switch-wrapper.sf-small, +.sf-css.sf-switch-wrapper.sf-small { + height: 20px; + width: 46px; +} +.sf-switch-wrapper.sf-small .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle { + height: 10px; + width: 10px; +} +.sf-switch-wrapper.sf-small .sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-small .sf-ripple-container { + border-radius: 50%; + height: 24px; + left: -3px; + pointer-events: none; + position: absolute; + top: -5px; + width: 24px; + z-index: 1; +} +.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -19px; + height: 14px; + width: 14px; +} +.sf-switch-wrapper.sf-small .sf-switch-on, .sf-switch-wrapper.sf-small .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + font-size: 10px; +} +.sf-switch-wrapper.sf-small .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-on { + text-indent: -11px; +} +.sf-switch-wrapper.sf-small .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + text-indent: 14px; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -19px; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + height: 10px; + width: 10px; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off { + left: 0; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active { + left: 22px; + height: 14px; + width: 14px; +} +*.sf-small .sf-switch-wrapper, +*.sf-small.sf-switch-wrapper, +*.sf-small .sf-css.sf-switch-wrapper, +*.sf-small.sf-css.sf-switch-wrapper { + height: 20px; + width: 46px; +} +*.sf-small .sf-switch-wrapper .sf-switch-handle, +*.sf-small.sf-switch-wrapper .sf-switch-handle, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle { + height: 10px; + width: 10px; + left: 5px; + top: 2px; +} +*.sf-small .sf-switch-wrapper .sf-ripple-container, +*.sf-small.sf-switch-wrapper .sf-ripple-container, +*.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container, +*.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container { + border-radius: 50%; + height: 24px; + left: -3px; + pointer-events: none; + position: absolute; + top: -5px; + width: 24px; + z-index: 1; + left: -7px; + top: -7px; +} +*.sf-small .sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-small.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -3px !important; /* stylelint-disable-line declaration-no-important */ + top: -5px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-small .sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-small.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -19px; + height: 14px; + width: 14px; +} +*.sf-small .sf-switch-wrapper .sf-switch-on, *.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + font-size: 10px; +} +*.sf-small .sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-on { + text-indent: -11px; +} +*.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + text-indent: 14px; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -19px; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + height: 10px; + width: 10px; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + left: 22px; + height: 14px; + width: 14px; +} +*.sf-bigger.sf-small .sf-switch-wrapper, +*.sf-bigger.sf-small.sf-switch-wrapper, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper { + height: 28px; + width: 60px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle { + height: 16px; + left: 6px; + top: 1px; + width: 16px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container { + border-radius: 50%; + height: 36px; + left: -7px; + pointer-events: none; + position: absolute; + top: -8px; + width: 36px; + z-index: 1; + left: -10px; + top: -10px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -7px !important; /* stylelint-disable-line declaration-no-important */ + top: -8px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -25px; + height: 20px; + width: 20px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-on, *.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + font-size: 12px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-on { + text-indent: -14px; +} +*.sf-bigger.sf-small .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper .sf-switch-off { + text-indent: 14px; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -25px; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + height: 16px; + width: 16px; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-bigger.sf-small .sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-small.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + left: 30px; + height: 20px; + width: 20px; +} +*.sf-bigger .sf-switch-wrapper, +*.sf-bigger.sf-switch-wrapper, +*.sf-bigger .sf-css.sf-switch-wrapper, +*.sf-bigger.sf-css.sf-switch-wrapper { + height: 32px; + width: 66px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-handle { + height: 16px; + left: 6px; + top: 2px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -29px; + height: 24px; + width: 24px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-on, *.sf-bigger .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-switch-wrapper .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-off { + font-size: 14px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-switch-wrapper .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-on { + text-indent: -15px; +} +*.sf-bigger .sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-switch-wrapper .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-switch-off { + text-indent: 18px; +} +*.sf-bigger .sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-ripple-container, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-ripple-container { + height: 40px; + left: -7px; + top: -8px; + width: 40px; + left: -12px; + top: -12px; +} +*.sf-bigger .sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger .sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-css.sf-switch-wrapper .sf-ripple-container.sf-ripple-check { + left: -7px !important; /* stylelint-disable-line declaration-no-important */ + top: -8px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + height: 16px; + left: 100%; + margin-left: -29px; + top: 2px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-bigger .sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + left: 32px; + height: 24px; + width: 24px; +} +*.sf-bigger .sf-switch-wrapper.sf-small, +*.sf-bigger.sf-switch-wrapper.sf-small, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small { + height: 28px; + width: 60px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle { + height: 16px; + left: 6px; + top: 1px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-ripple-container, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-ripple-container, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-ripple-container, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-ripple-container { + border-radius: 50%; + height: 36px; + left: -7px; + pointer-events: none; + position: absolute; + top: -8px; + width: 36px; + z-index: 1; + left: -10px; + top: -10px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-ripple-container.sf-ripple-check { + left: -7px !important; /* stylelint-disable-line declaration-no-important */ + top: -8px !important; /* stylelint-disable-line declaration-no-important */ +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-handle.sf-switch-active { + left: 100%; + margin-left: -25px; + height: 20px; + width: 20px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-on, *.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + font-size: 12px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-on { + text-indent: -14px; +} +*.sf-bigger .sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small .sf-switch-off { + text-indent: 14px; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + left: 100%; + margin-left: -25px; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle { + height: 16px; + width: 16px; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-on { + left: 100%; + opacity: 1; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-off { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-on { + left: 0; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + left: -100%; +} +*.sf-bigger .sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger .sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active, +*.sf-bigger.sf-css.sf-switch-wrapper.sf-small.sf-rtl .sf-switch-handle.sf-switch-active { + left: 30px; +} +.sf-switch-wrapper, +.sf-css.sf-switch-wrapper { + /* stylelint-disable property-no-vendor-prefix */ + -webkit-tap-highlight-color: transparent; +} +.sf-switch-wrapper .sf-switch-off, +.sf-css.sf-switch-wrapper .sf-switch-off { + background-color: rgba(var(--color-sf-surface-variant)); + color: rgba(var(--color-sf-on-surface)); +} +.sf-switch-wrapper .sf-switch-handle, +.sf-css.sf-switch-wrapper .sf-switch-handle { + background-color: rgba(var(--color-sf-outline)); + box-shadow: none; +} +.sf-switch-wrapper .sf-switch-on, +.sf-css.sf-switch-wrapper .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-switch-wrapper .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper .sf-switch-inner, +.sf-css.sf-switch-wrapper .sf-switch-inner { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper .sf-ripple-element, +.sf-css.sf-switch-wrapper .sf-ripple-element { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper .sf-ripple-check .sf-ripple-element, +.sf-css.sf-switch-wrapper .sf-ripple-check .sf-ripple-element { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle.sf-switch-active { + box-shadow: none; +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle:not(.sf-switch-active), +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle:not(.sf-switch-active) { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); + box-shadow: none; +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-off { + opacity: 1; + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + opacity: 1; + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-switch-disabled .sf-switch-inner { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + opacity: 1; + border-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle:not(.sf-switch-active), +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle:not(.sf-switch-active) { + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner { + border-color: rgba(var(--color-sf-on-surface), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); +} +.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-white)); +} +.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper:hover .sf-switch-inner { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-outline)); +} +.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); +} +.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-container, +.sf-css.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper:hover .sf-switch-handle.sf-switch-active .sf-ripple-check.sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper:not(.sf-switch-disabled):hover .sf-switch-handle:not(.sf-switch-active), +.sf-css.sf-switch-wrapper:not(.sf-switch-disabled):hover .sf-switch-handle:not(.sf-switch-active) { + background-color: rgba(var(--color-sf-outline)); +} +.sf-switch-wrapper.sf-focus .sf-switch-inner, .sf-switch-wrapper:focus .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-focus .sf-switch-inner, +.sf-css.sf-switch-wrapper:focus .sf-switch-inner { + background-color: rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + box-shadow: none; + outline: none; + outline-offset: initial; +} +.sf-switch-wrapper.sf-focus .sf-switch-inner.sf-switch-active, .sf-switch-wrapper:focus .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-focus .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper:focus .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + outline: none; +} +.sf-switch-wrapper.sf-focus .sf-ripple-container, .sf-switch-wrapper:focus .sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-focus .sf-ripple-container, +.sf-css.sf-switch-wrapper:focus .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper.sf-focus .sf-ripple-check.sf-ripple-container, .sf-switch-wrapper:focus .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-focus .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper:focus .sf-ripple-check.sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper.sf-active .sf-switch-inner, .sf-switch-wrapper:active .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-active .sf-switch-inner, +.sf-css.sf-switch-wrapper:active .sf-switch-inner { + background-color: rgba(var(--color-sf-surface)); + border-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface)); + box-shadow: none; + outline: none; + outline-offset: initial; +} +.sf-switch-wrapper.sf-active .sf-switch-inner.sf-switch-active, .sf-switch-wrapper:active .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-active .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper:active .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + outline: none; +} +.sf-switch-wrapper.sf-active .sf-ripple-container, .sf-switch-wrapper:active .sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-active .sf-ripple-container, +.sf-css.sf-switch-wrapper:active .sf-ripple-container { + background-color: rgba(var(--color-sf-primary), 0.08); +} +.sf-switch-wrapper.sf-active .sf-ripple-check.sf-ripple-container, .sf-switch-wrapper:active .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper.sf-active .sf-ripple-check.sf-ripple-container, +.sf-css.sf-switch-wrapper:active .sf-ripple-check.sf-ripple-container { + background-color: rgba(var(--color-sf-on-surface-variant), 0.08); +} +.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-on { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-off { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-focus .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); + color: rgba(var(--color-sf-on-primary)); + outline: none; +} +.sf-switch-wrapper.sf-rtl .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle { + background-color: rgba(var(--color-sf-outline)); + box-shadow: none; +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active .sf-switch-off { + background-color: rgba(var(--color-sf-surface-variant)); +} +.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active { + background-color: rgba(var(--color-sf-primary)); + border-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner { + border-color: rgba(var(--color-sf-outline)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + background-color: rgba(var(--color-sf-primary)); +} +.sf-switch-wrapper.sf-rtl:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + opacity: 1; + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-off, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner .sf-switch-off { + opacity: 1; + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); + box-shadow: none; +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); + box-shadow: none; +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled .sf-switch-inner { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); + opacity: 1; +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active .sf-switch-on { + color: rgba(var(--color-sf-on-surface), 0.38); + background-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active { + background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)); + border-color: rgba(var(--color-sf-on-surface), 0.12); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-inner { + border-color: rgba(var(--color-sf-on-surface), 0.12); + color: rgba(var(--color-sf-on-surface), 0.38); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle.sf-switch-active { + background-color: rgba(var(--color-sf-surface)); +} +.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle, +.sf-css.sf-switch-wrapper.sf-rtl.sf-switch-disabled:hover .sf-switch-handle { + background-color: rgba(var(--color-sf-white)); +} +.sf-switch-wrapper .sf-switch:focus, +.sf-css.sf-switch-wrapper .sf-switch:focus { + box-shadow: none; +} +.sf-switch-wrapper.sf-small.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active, +.sf-css.sf-switch-wrapper.sf-small.sf-rtl.sf-switch-disabled:hover .sf-switch-inner.sf-switch-active { + background-color: transparent; +} \ No newline at end of file diff --git a/components/buttons/styles/switch/material3.scss b/components/buttons/styles/switch/material3.scss new file mode 100644 index 0000000..3130aa3 --- /dev/null +++ b/components/buttons/styles/switch/material3.scss @@ -0,0 +1,3 @@ +@import 'react-base/styles/definition/material3.scss'; +@import 'material3-definition.scss'; +@import 'all.scss'; \ No newline at end of file diff --git a/components/buttons/switch.d.ts b/components/buttons/switch.d.ts new file mode 100644 index 0000000..320c2c3 --- /dev/null +++ b/components/buttons/switch.d.ts @@ -0,0 +1,4 @@ +/** + * switch + */ +export * from './src/switch/index'; diff --git a/components/buttons/switch.js b/components/buttons/switch.js new file mode 100644 index 0000000..320c2c3 --- /dev/null +++ b/components/buttons/switch.js @@ -0,0 +1,4 @@ +/** + * switch + */ +export * from './src/switch/index'; diff --git a/components/inputs/README.md b/components/inputs/README.md new file mode 100644 index 0000000..6af324c --- /dev/null +++ b/components/inputs/README.md @@ -0,0 +1,95 @@ +# React Inputs Components + +## What's Included in the React Inputs Package + +The React Inputs package includes the following list of components. + +### React Numeric TextBox + +The NumericTextBox component provides a specialized input field for numeric values with validation, formatting, and increment/decrement capabilities. It offers precise control over numeric input with support for various number formats, validation rules, and user interaction patterns. + +Explore the demo [here](https://react.syncfusion.com/numeric-textbox). + +**Key features** + +- **Value constraints:** Set minimum and maximum allowed values to restrict user input within specific numeric ranges. + +- **Step configuration:** Define increment/decrement step size for precise value adjustments using spin buttons or keyboard controls. + +- **Spin buttons:** Optional increment and decrement buttons that allow users to adjust values without typing. + +- **Number formatting:** Comprehensive formatting options including decimal places, currency symbols, and percentage formatting. + +- **LabelMode** Implements floating label functionality with configurable behavior modes to enhance form usability. + +- **Keyboard navigation:** Enhanced keyboard support for incrementing/decrementing values using arrow keys. + +### React TextArea + +The TextArea component provides a multi-line text input field with enhanced functionality for collecting longer text content from users. It offers various customization options to adapt to different application requirements and design systems. + +Explore the demo [here](https://react.syncfusion.com/textarea). + +**Key features** + +- **Resizing options:** Supports multiple resize modes including Both, Horizontal, and Vertical to control how users can resize the input area. + +- **LabelMode:** Implements floating label functionality with configurable behavior modes to enhance form usability. + +- **Variants:** Offers multiple visual styles including Standard, Outlined, and Filled variants to match your application's design language. + +- **Customizable dimensions:** Supports setting specific dimensions through rows and cols properties or through width styling. + +- **Controlled and uncontrolled modes:** Supports both controlled mode (using the `value` prop) and uncontrolled mode (using the `defaultValue` prop) to accommodate different state management approaches. + +### React TextBox + +The TextBox component provides a feature-rich input field for collecting user text input with enhanced styling options and validation states. It supports both controlled and uncontrolled input modes to fit various application requirements. + +Explore the demo [here](https://react.syncfusion.com/textbox). + +**Key features** + +- **Variants:** Offers multiple visual styles including Standard, Outlined, and Filled variants to match your application's design language. + +- **Sizes:** Provides size options (Small and Medium) to control the component's dimensions for different UI contexts. + +- **Color:** Supports different color schemes including Success, Warning, and Error to visually communicate validation states. + +- **LabelMode:** Implements floating label functionality with configurable behavior modes to enhance form usability. + +- **Prefix and suffix:** Supports adding custom icons at the beginning or end of the input field for enhanced visual cues. + +- **Controlled and uncontrolled modes:** Supports both controlled mode (using the `value` prop) and uncontrolled mode (using the `defaultValue` prop) to accommodate different state management approaches. + +

+Trusted by the world's leading companies + + Syncfusion logo + +

+ +## Setup + +To install `inputs` and its dependent packages, use the following command, + +```sh +npm install @syncfusion/react-inputs +``` + +## Support + +Product support is available through following mediums. + +* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* Live chat + +## License and copyright + +> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). + +> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. + +See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. + +© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. diff --git a/components/inputs/common.d.ts b/components/inputs/common.d.ts new file mode 100644 index 0000000..51c68bc --- /dev/null +++ b/components/inputs/common.d.ts @@ -0,0 +1,4 @@ +/** + * common + */ +export * from './src/common/index'; diff --git a/components/inputs/common.js b/components/inputs/common.js new file mode 100644 index 0000000..51c68bc --- /dev/null +++ b/components/inputs/common.js @@ -0,0 +1,4 @@ +/** + * common + */ +export * from './src/common/index'; diff --git a/components/inputs/index.d.ts b/components/inputs/index.d.ts new file mode 100644 index 0000000..2c4eda4 --- /dev/null +++ b/components/inputs/index.d.ts @@ -0,0 +1,4 @@ +/** + * index + */ +export * from './src/index'; diff --git a/components/inputs/index.js b/components/inputs/index.js new file mode 100644 index 0000000..2c4eda4 --- /dev/null +++ b/components/inputs/index.js @@ -0,0 +1,4 @@ +/** + * index + */ +export * from './src/index'; diff --git a/components/inputs/license b/components/inputs/license new file mode 100644 index 0000000..af45e1a --- /dev/null +++ b/components/inputs/license @@ -0,0 +1,13 @@ +Syncfusion® License + +Copyright (c) Syncfusion®, Inc. All rights reserved. + +Essential® JS 2 library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License. + +To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®’s terms and conditions. + +If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options. + +You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions. + +The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf diff --git a/components/inputs/numerictextbox.d.ts b/components/inputs/numerictextbox.d.ts new file mode 100644 index 0000000..f3a1818 --- /dev/null +++ b/components/inputs/numerictextbox.d.ts @@ -0,0 +1,4 @@ +/** + * numerictextbox + */ +export * from './src/numerictextbox/index'; diff --git a/components/inputs/numerictextbox.js b/components/inputs/numerictextbox.js new file mode 100644 index 0000000..f3a1818 --- /dev/null +++ b/components/inputs/numerictextbox.js @@ -0,0 +1,4 @@ +/** + * numerictextbox + */ +export * from './src/numerictextbox/index'; diff --git a/components/inputs/package.json b/components/inputs/package.json new file mode 100644 index 0000000..3ccadb1 --- /dev/null +++ b/components/inputs/package.json @@ -0,0 +1,77 @@ +{ + "name": "@syncfusion/react-inputs", + "version": "29.1.33", + "description": "A package of Pure react input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.", + "author": "Syncfusion Inc.", + "license": "SEE LICENSE IN license", + "keywords": [ + "syncfusion", + "web-components", + "react", + "syncfusion-react", + "react-inputs", + "input box", + "textbox", + "html5 textbox", + "floating input", + "floating label", + "form controls", + "input controls", + "color", + "color picker", + "colorpicker", + "picker", + "palette", + "hsv colorpicker", + "alpha colorpicker", + "color palette", + "custom palette", + "react colorpicker", + "color chooser", + "validator", + "form", + "form validator", + "masked textbox", + "masked input", + "input mask", + "date mask", + "mask format", + "numeric textbox", + "percent textbox", + "percentage textbox", + "currency textbox", + "numeric spinner", + "numeric up-down", + "number input", + "slider", + "range slider", + "minrange", + "slider limits", + "localization slider", + "format slider", + "slider with tooltip", + "vertical slider", + "mobile slider", + "upload", + "upload-box", + "input-file", + "floating-label", + "chunk-upload" + ], + "repository": { + "type": "git", + "url": "https://github.com/syncfusion/react-ui-components.git" + }, + "homepage": "https://www.syncfusion.com/react-ui-components", + "module": "./index.js", + "readme": "README.md", + "dependencies": { + "@syncfusion/react-base": "~29.1.33", + "@syncfusion/react-buttons": "~29.1.33", + "@syncfusion/react-popups": "~29.1.33", + "@syncfusion/react-splitbuttons": "~29.1.33" + }, + "devDependencies": {}, + "typings": "index.d.ts", + "sideEffects": false +} \ No newline at end of file diff --git a/components/inputs/src/common/index.d.ts b/components/inputs/src/common/index.d.ts new file mode 100644 index 0000000..23adac8 --- /dev/null +++ b/components/inputs/src/common/index.d.ts @@ -0,0 +1,4 @@ +/** + * input base modules + */ +export * from './inputbase'; diff --git a/components/inputs/src/common/index.js b/components/inputs/src/common/index.js new file mode 100644 index 0000000..23adac8 --- /dev/null +++ b/components/inputs/src/common/index.js @@ -0,0 +1,4 @@ +/** + * input base modules + */ +export * from './inputbase'; diff --git a/components/inputs/src/common/inputbase.d.ts b/components/inputs/src/common/inputbase.d.ts new file mode 100644 index 0000000..c410dcd --- /dev/null +++ b/components/inputs/src/common/inputbase.d.ts @@ -0,0 +1,85 @@ +import { ChangeEvent, JSX } from 'react'; +/** + * Constant object containing CSS class names used throughout the component. + */ +export declare const CLASS_NAMES: { + RTL: string; + DISABLE: string; + WRAPPER: string; + INPUT: string; + INPUTGROUP: string; + FLOATINPUT: string; + FLOATLINE: string; + FLOATTEXT: string; + CLEARICON: string; + CLEARICONHIDE: string; + LABELTOP: string; + LABELBOTTOM: string; + VALIDINPUT: string; + TEXTBOX_FOCUS: string; +}; +export interface IInput { + placeholder: string; + className: string; + disabled?: boolean; + readOnly?: boolean; + floatLabelType?: FloatLabelType; + onChange: (event: ChangeEvent) => void; +} +/** + * Represents the behavior options for floating labels in form fields. + * + * @enum {string} + */ +export declare enum FloatLabel { + /** + * Label never floats, remains in its default position regardless of field state. + */ + Never = "Never", + /** + * Label always appears in the floating position, regardless of field state. + */ + Always = "Always", + /** + * Label automatically floats when the field has content or is focused, + * and returns to default position when empty and not focused. + */ + Auto = "Auto" +} +/** + * Type definition for float label type. + */ +export type FloatLabelType = FloatLabel | string; +/** + * Interface for input arguments. + */ +export interface IInputArgs { + customTag?: string; + floatLabelType?: FloatLabelType; + placeholder?: string; + width?: number | string; + value?: string; + defaultValue?: string; + type?: string; + role?: string; + name?: string; + tabIndex?: number; + onChange?: (event: ChangeEvent) => void; + onFocus?: any; + onBlur?: any; + onKeyDown?: any; +} +export type InputArgs = IInputArgs & Omit, keyof IInputArgs>; +export declare const InputBase: React.ForwardRefExoticComponent>; +/** + * Renders the float label element. + * + * @param {FloatLabelType} floatLabelType - The type of float label. + * @param {boolean} isFocused - Whether the input is focused. + * @param {string} inputValue - The current input value. + * @param {string} placeholder - The placeholder text. + * @param {any} id - The reference to the input element. + * @returns {React.ReactElement | null} A React element representing the float label, or null if not applicable. + */ +export declare const renderFloatLabelElement: (floatLabelType: FloatLabelType, isFocused: boolean, inputValue: string | number, placeholder: string | undefined, id: string) => React.ReactElement | null; +export declare const renderClearButton: (inputValue: string, clearInput: () => void) => JSX.Element; diff --git a/components/inputs/src/common/inputbase.js b/components/inputs/src/common/inputbase.js new file mode 100644 index 0000000..bc966c5 --- /dev/null +++ b/components/inputs/src/common/inputbase.js @@ -0,0 +1,89 @@ +import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; +import { useCallback, forwardRef } from 'react'; +import { SvgIcon } from '@syncfusion/react-base'; +/** + * Constant object containing CSS class names used throughout the component. + */ +export const CLASS_NAMES = { + RTL: 'sf-rtl', + DISABLE: 'sf-disabled', + WRAPPER: 'sf-control-wrapper', + INPUT: 'sf-input', + INPUTGROUP: 'sf-input-group', + FLOATINPUT: 'sf-float-input', + FLOATLINE: 'sf-float-line', + FLOATTEXT: 'sf-float-text', + CLEARICON: 'sf-clear-icon', + CLEARICONHIDE: 'sf-clear-icon-hide', + LABELTOP: 'sf-label-top', + LABELBOTTOM: 'sf-label-bottom', + VALIDINPUT: 'sf-valid-input', + TEXTBOX_FOCUS: 'sf-input-focus' +}; +/** + * Represents the behavior options for floating labels in form fields. + * + * @enum {string} + */ +export var FloatLabel; +(function (FloatLabel) { + /** + * Label never floats, remains in its default position regardless of field state. + */ + FloatLabel["Never"] = "Never"; + /** + * Label always appears in the floating position, regardless of field state. + */ + FloatLabel["Always"] = "Always"; + /** + * Label automatically floats when the field has content or is focused, + * and returns to default position when empty and not focused. + */ + FloatLabel["Auto"] = "Auto"; +})(FloatLabel || (FloatLabel = {})); +export const InputBase = forwardRef(({ type, readOnly = false, disabled = false, floatLabelType = 'Never', onFocus, className = '', onBlur, placeholder, onKeyDown, value, defaultValue, onChange, ...rest }, ref) => { + const inputClassNames = () => { + return classArray.join(' '); + }; + const classArray = [CLASS_NAMES.INPUT, className]; + const handleFocus = useCallback((event) => { + if (onFocus) { + onFocus(event); + } + }, [onFocus]); + const handleBlur = useCallback((event) => { + if (onBlur) { + onBlur(event); + } + }, [onBlur]); + const handleKeyDown = (event) => { + if (onKeyDown) { + onKeyDown(event); + } + }; + const handleChange = useCallback((event) => { + if (onChange) { + onChange(event); + } + }, [onChange]); + const isControlled = value !== undefined; + const inputValue = isControlled ? { value } : { defaultValue }; + return (_jsx("input", { ref: ref, type: type || 'text', className: inputClassNames(), readOnly: readOnly, disabled: disabled, placeholder: floatLabelType === 'Never' ? placeholder : '', onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, onChange: handleChange, ...inputValue, ...rest })); +}); +/** + * Renders the float label element. + * + * @param {FloatLabelType} floatLabelType - The type of float label. + * @param {boolean} isFocused - Whether the input is focused. + * @param {string} inputValue - The current input value. + * @param {string} placeholder - The placeholder text. + * @param {any} id - The reference to the input element. + * @returns {React.ReactElement | null} A React element representing the float label, or null if not applicable. + */ +export const renderFloatLabelElement = (floatLabelType, isFocused, inputValue, placeholder = '', id) => { + if (floatLabelType === 'Never') { + return null; + } + return (_jsxs(_Fragment, { children: [_jsx("span", { className: CLASS_NAMES.FLOATLINE }), _jsx("label", { className: `${CLASS_NAMES.FLOATTEXT} ${(floatLabelType === 'Always' || (floatLabelType === 'Auto' && (isFocused || inputValue))) ? CLASS_NAMES.LABELTOP : CLASS_NAMES.LABELBOTTOM}`, htmlFor: (id) || '', children: placeholder })] })); +}; +export const renderClearButton = (inputValue, clearInput) => (_jsx("span", { className: `${CLASS_NAMES.CLEARICON} ${inputValue === '' ? CLASS_NAMES.CLEARICONHIDE : ''}`, "aria-label": "clear", role: "button", onClick: clearInput, children: _jsx(SvgIcon, { height: '14', width: '14', d: 'M8.58578 10.0001L0.585754 2.00003L1.99997 0.585815L10 8.58584L18 0.585815L19.4142 2.00003L11.4142 10.0001L19.4142 18L18 19.4142L10 11.4143L2.00003 19.4142L0.585812 18L8.58578 10.0001Z' }) })); diff --git a/components/inputs/src/index.d.ts b/components/inputs/src/index.d.ts new file mode 100644 index 0000000..adc54f2 --- /dev/null +++ b/components/inputs/src/index.d.ts @@ -0,0 +1,7 @@ +/** + * NumericTextBox all modules + */ +export * from './numerictextbox/index'; +export * from './textbox/index'; +export * from './textarea/index'; +export * from './common/index'; diff --git a/components/inputs/src/index.js b/components/inputs/src/index.js new file mode 100644 index 0000000..adc54f2 --- /dev/null +++ b/components/inputs/src/index.js @@ -0,0 +1,7 @@ +/** + * NumericTextBox all modules + */ +export * from './numerictextbox/index'; +export * from './textbox/index'; +export * from './textarea/index'; +export * from './common/index'; diff --git a/components/inputs/src/numerictextbox/index.d.ts b/components/inputs/src/numerictextbox/index.d.ts new file mode 100644 index 0000000..f3b3034 --- /dev/null +++ b/components/inputs/src/numerictextbox/index.d.ts @@ -0,0 +1,4 @@ +/** + * NumericTextBox modules + */ +export * from './numerictextbox'; diff --git a/components/inputs/src/numerictextbox/index.js b/components/inputs/src/numerictextbox/index.js new file mode 100644 index 0000000..f3b3034 --- /dev/null +++ b/components/inputs/src/numerictextbox/index.js @@ -0,0 +1,4 @@ +/** + * NumericTextBox modules + */ +export * from './numerictextbox'; diff --git a/components/inputs/src/numerictextbox/numerictextbox.d.ts b/components/inputs/src/numerictextbox/numerictextbox.d.ts new file mode 100644 index 0000000..58d5f13 --- /dev/null +++ b/components/inputs/src/numerictextbox/numerictextbox.d.ts @@ -0,0 +1,142 @@ +import { FloatLabelType } from '../common/inputbase'; +import { Size } from '../textbox/textbox'; +export interface NumericTextBoxProps { + /** + * Sets the value of the NumericTextBox. When provided, component becomes controlled. + * + * @default null + */ + value?: number | null; + /** + * Sets the default value of the NumericTextBox for uncontrolled mode. + * + * @default - + */ + defaultValue?: number | null; + /** + * Specifies a minimum value that is allowed a user can enter. + * + * @default - + */ + min?: number; + /** + * Specifies a maximum value that is allowed a user can enter. + * + * @default - + */ + max?: number; + /** + * Specifies the incremental or decremental step size for the NumericTextBox. + * + * @default 1 + */ + step?: number; + /** + * Gets or sets the string shown as a hint/placeholder when the NumericTextBox is empty. + * + * @default - + */ + placeholder?: string; + /** + * Determines whether to show increment and decrement buttons (spin buttons) within the input field. + * When enabled, up/down buttons appear that allow users to increment or decrement + * the numeric value in the input by a predefined step + * + * @default true + */ + spinButton?: boolean; + /** + * Determines whether to show a clear button within the input field. + * When enabled, a clear button (×) appears when the field has a value, + * allowing users to quickly clear the input with a single click. + * + * @default false + */ + clearButton?: boolean; + /** + * Specifies the number format that indicates the display format for the value of the NumericTextBox. + * + * @default 'n2' + */ + format?: string; + /** + * Specifies the number precision applied to the textbox value when the NumericTextBox is focused. + * + * @default - + */ + decimals?: number; + /** + * Specifies the currency code to use in currency formatting. + * Possible values are the ISO 4217 currency codes, such as 'USD' for the US dollar,'EUR' for the euro. + * + * @default - + */ + currency?: string; + /** + * Specifies the currency code to use in currency formatting. + * Possible values are the ISO 4217 currency codes, such as 'USD' for the US dollar,'EUR' for the euro. + * + * @default - + * @private + */ + currencyCode?: string; + /** + * Specifies a value that indicates whether the NumericTextBox control allows the value for the specified range. + * If it is true, the input value will be restricted between the min and max range. + * The typed value gets modified to fit the range on focused out state. + * Else, it allows any value even out of range value, + * + * @default true + */ + strictMode?: boolean; + /** + * Specifies whether the decimals length should be restricted during typing. + * + * @default false + */ + validateOnType?: boolean; + /** + * Defines the floating label type for the component. + * + * @default 'Never' + */ + labelMode?: FloatLabelType; + /** + * Triggers when the value of the NumericTextBox changes. + * The change event of the NumericTextBox component will be triggered in the following scenarios: + * * Changing the previous value using keyboard interaction and then focusing out of the component. + * * Focusing on the component and scrolling within the input. + * * Changing the value using the spin buttons. + * * Programmatically changing the value using the value property. + * + * @event onChange + */ + onChange?: (args: React.ChangeEvent, value: number | null) => void; + /** + * The size configuration of the component. + * + * @default Size.Medium + */ + size?: Size; +} +export interface INumericTextBox extends NumericTextBoxProps { + /** + * This is NumericTextBox component element. + * + * @private + * @default null + */ + element?: HTMLInputElement | null; +} +type INumericTextBoxProps = NumericTextBoxProps & Omit, keyof NumericTextBoxProps>; +/** + * NumericTextBox component that provides a specialized input for numeric values with validation, + * formatting, and increment/decrement capabilities. Supports both controlled and uncontrolled modes. + * + * ```typescript + * + * ``` + */ +export declare const NumericTextBox: React.ForwardRefExoticComponent>; +export default NumericTextBox; diff --git a/components/inputs/src/numerictextbox/numerictextbox.js b/components/inputs/src/numerictextbox/numerictextbox.js new file mode 100644 index 0000000..fe43222 --- /dev/null +++ b/components/inputs/src/numerictextbox/numerictextbox.js @@ -0,0 +1,287 @@ +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +import { useRef, useState, useCallback, useEffect, forwardRef, useImperativeHandle, useMemo } from 'react'; +import { InputBase, renderFloatLabelElement, renderClearButton, CLASS_NAMES } from '../common/inputbase'; +import { isNullOrUndefined, L10n, preRender, SvgIcon, useProviderContext, useRippleEffect } from '@syncfusion/react-base'; +import { formatUnit } from '@syncfusion/react-base'; +import { getNumberFormat, getNumberParser } from '@syncfusion/react-base'; +import { getUniqueID } from '@syncfusion/react-base'; +const ROOT = 'sf-numeric'; +const SPINICON = 'sf-input-group-icon'; +const SPINUP = 'sf-spin-up'; +const SPINDOWN = 'sf-spin-down'; +/** + * NumericTextBox component that provides a specialized input for numeric values with validation, + * formatting, and increment/decrement capabilities. Supports both controlled and uncontrolled modes. + * + * ```typescript + * + * ``` + */ +export const NumericTextBox = forwardRef((props, ref) => { + const { min = -(Number.MAX_VALUE), max = Number.MAX_VALUE, step = 1, value, defaultValue = null, id = getUniqueID('numeric_'), placeholder = '', spinButton = true, clearButton = false, format = 'n2', decimals = null, strictMode = true, validateOnType = false, labelMode = 'Never', disabled = false, readOnly = false, currency = null, width = null, className = '', size, onChange, onFocus, onBlur, ...otherProps } = props; + const isControlled = value !== undefined; + const uniqueId = useRef(id).current; + const currentValueRef = useRef(defaultValue); + const [inputValue, setInputValue] = useState(isControlled ? (value ?? null) : (defaultValue ?? null)); + const [isFocused, setIsFocused] = useState(false); + const [previousValue, setPreviousValue] = useState(isControlled ? (value ?? null) : (defaultValue ?? null)); + const { locale, dir, ripple } = useProviderContext(); + const rippleRef1 = useRippleEffect(ripple, { duration: 500, isCenterRipple: true }); + const rippleRef2 = useRippleEffect(ripple, { duration: 500, isCenterRipple: true }); + const inputRef = useRef(null); + const publicAPI = { + min, + max, + step, + clearButton, + spinButton, + format, + strictMode, + validateOnType, + labelMode, + disabled, + readOnly + }; + const spinUp = 'M20.7929 17H3.20712C2.76167 17 2.53858 16.4615 2.85356 16.1465L11.6465 7.3536C11.8417 7.15834 12.1583 7.15834 12.3536 7.3536L21.1465 16.1465C21.4614 16.4615 21.2384 17 20.7929 17Z'; + const spinDown = 'M20.7929 7H3.20712C2.76167 7 2.53858 7.53857 2.85356 7.85355L11.6465 16.6464C11.8417 16.8417 12.1583 16.8417 12.3536 16.6464L21.1465 7.85355C21.4614 7.53857 21.2384 7 20.7929 7Z'; + const getContainerClassNames = () => { + return classNames(ROOT, CLASS_NAMES.INPUTGROUP, CLASS_NAMES.WRAPPER, labelMode !== 'Never' ? CLASS_NAMES.FLOATINPUT : '', className, (dir === 'rtl') ? CLASS_NAMES.RTL : '', disabled ? CLASS_NAMES.DISABLE : '', isFocused ? CLASS_NAMES.TEXTBOX_FOCUS : '', (!isNullOrUndefined(currentValueRef.current) && labelMode !== 'Always') ? CLASS_NAMES.VALIDINPUT : '', size && size.toLowerCase() !== 'medium' ? `sf-${size.toLowerCase()}` : ''); + }; + const spinSize = size?.toLocaleLowerCase() === 'small' ? '14px' : '16px'; + const setPlaceholder = useMemo(() => { + const l10n = L10n('numerictextbox', { placeholder: placeholder }, locale); + l10n.setLocale(locale); + return l10n.getConstant('placeholder'); + }, [locale, placeholder]); + useEffect(() => { + preRender('numerictextbox'); + }, []); + useEffect(() => { + if (isControlled) { + setInputValue(value); + setPreviousValue(inputValue); + currentValueRef.current = value; + } + }, [value, isControlled, inputValue]); + useEffect(() => { + if (!isControlled && defaultValue !== null) { + currentValueRef.current = defaultValue; + } + }, [isControlled, defaultValue]); + useImperativeHandle(ref, () => ({ + ...publicAPI, + element: inputRef.current + }), [publicAPI]); + const trimValue = useCallback((value) => { + if (value > max) { + return max; + } + if (value < min) { + return min; + } + return value; + }, [min, max]); + const roundNumber = useCallback((value, precision) => { + const multiplier = Math.pow(10, precision || 0); + return Math.round(value * multiplier) / multiplier; + }, []); + const classNames = (...classes) => { + return classes.filter(Boolean).join(' '); + }; + const containerClassNames = getContainerClassNames(); + const getNumberOfDecimals = useCallback((value) => { + if (decimals !== null) { + return decimals; + } + let numberOfDecimals; + const EXPREGEXP = new RegExp('[eE][\\-+]?([0-9]+)'); + let valueString = value.toString(); + if (EXPREGEXP.test(valueString)) { + const result = EXPREGEXP.exec(valueString); + if (result) { + valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20)); + } + } + const decimalPart = valueString.split('.')[1]; + numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length; + if (decimals !== null) { + numberOfDecimals = Math.min(numberOfDecimals, decimals); + } + return Math.min(numberOfDecimals, 20); + }, [decimals]); + const formatNumber = useCallback((value) => { + if (value === null || value === undefined) { + return ''; + } + try { + if (isFocused && format.toLowerCase().includes('p')) { + const percentValue = Math.round((value * 100) * 1e12) / 1e12; + const numberOfDecimals = getNumberOfDecimals(percentValue); + return percentValue.toFixed(numberOfDecimals); + } + else if (isFocused) { + if (typeof value === 'number') { + if (Number.isInteger(value)) { + return value.toString(); + } + const strValue = value.toString(); + return strValue.replace(/\.?0+$/, ''); + } + return String(value); + } + const numberOfDecimals = getNumberOfDecimals(value); + return getNumberFormat(locale, { + format: format, + maximumFractionDigits: numberOfDecimals, + minimumFractionDigits: numberOfDecimals, + useGrouping: format.toLowerCase().includes('n'), + currency: currency + })(value); + } + catch (error) { + return value.toFixed(2); + } + }, [format, currency, isFocused, getNumberOfDecimals]); + const updateValue = useCallback((newValue, e) => { + currentValueRef.current = newValue; + if (!isControlled) { + setInputValue(newValue); + } + if (previousValue !== newValue) { + setPreviousValue(inputValue); + } + if (onChange) { + onChange(e, newValue); + } + }, [inputValue, onChange, isControlled, formatNumber]); + const handleChange = useCallback((e) => { + const parsedValue = getNumberParser(locale, { format: format })(e.target.value); + let newValue = Number.isNaN(parsedValue) ? 0 : parsedValue; + if (strictMode && newValue !== null) { + newValue = trimValue(newValue); + } + if (validateOnType && decimals !== null && newValue !== null) { + newValue = roundNumber(newValue, decimals); + } + updateValue(newValue, e); + }, [strictMode, validateOnType, decimals, format, trimValue, roundNumber, inputValue, updateValue]); + const handleSpinClick = (increments) => { + if (disabled || readOnly) { + return; + } + if (increments) { + increment(); + } + else { + decrement(); + } + }; + const handleFocus = useCallback((e) => { + setIsFocused(true); + if (onFocus) { + onFocus(e); + } + }, [onFocus, formatNumber]); + const handleBlur = useCallback((e) => { + setIsFocused(false); + let newValue; + if (e.currentTarget.value === '') { + newValue = null; + } + else { + newValue = getNumberParser(locale, { format: format })(e.currentTarget.value); + if (isNaN(newValue)) { + newValue = currentValueRef.current; + } + if (validateOnType && decimals !== null && newValue !== null) { + newValue = roundNumber(newValue, decimals); + } + if (strictMode && newValue !== null) { + newValue = trimValue(newValue); + } + } + updateValue(newValue, e); + if (onBlur) { + onBlur(e); + } + }, [format, decimals, validateOnType, strictMode, roundNumber, updateValue, onBlur]); + const adjustValue = useCallback((isIncrement) => { + const adjustment = isIncrement ? step : -step; + let newValue = ((currentValueRef.current === null || + currentValueRef.current === undefined) ? 0 : currentValueRef.current) + adjustment; + let precision = 10; + if (format.toLowerCase().includes('p')) { + const match = format.match(/p(\d+)/i); + if (match && match[1]) { + precision = parseInt(match[1], 10) + 2; + } + } + else { + const stepStr = step.toString(); + const decimalIndex = stepStr.indexOf('.'); + if (decimalIndex !== -1) { + precision = stepStr.length - decimalIndex - 1; + } + } + newValue = parseFloat(newValue.toFixed(precision)); + if (strictMode) { + if (isIncrement) { + newValue = Math.min(newValue, max); + newValue = newValue > min ? newValue : min; + } + else { + newValue = Math.max(newValue, min); + } + } + updateValue(newValue); + }, [step, max, min, strictMode, updateValue, format]); + const increment = useCallback(() => { + adjustValue(true); + }, [adjustValue]); + const decrement = useCallback(() => { + adjustValue(false); + }, [adjustValue]); + const handleKeyDown = useCallback((e) => { + if (!/[0-9.-]/.test(e.key) && + !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'ArrowUp', 'ArrowDown'].includes(e.key)) { + e.preventDefault(); + } + if (!readOnly) { + switch (e.key) { + case 'ArrowUp': + e.preventDefault(); + increment(); + break; + case 'ArrowDown': + e.preventDefault(); + decrement(); + break; + case 'Enter': + { + e.preventDefault(); + const parsedValue = getNumberParser(locale, { format: format })(e.currentTarget.value); + let newValue = Number.isNaN(parsedValue) ? currentValueRef.current : parsedValue; + if (strictMode && newValue !== null) { + newValue = trimValue(newValue); + } + updateValue(newValue); + } + break; + default: break; + } + } + }, [increment, decrement, strictMode, trimValue, updateValue, readOnly, format]); + const clearValue = useCallback(() => { + updateValue(null); + }, [updateValue]); + const displayValue = formatNumber(isControlled ? value : inputValue); + return (_jsxs("span", { className: containerClassNames, style: { width: width ? formatUnit(width) : undefined }, children: [_jsx(InputBase, { id: uniqueId, type: "text", ref: inputRef, className: 'sf-control sf-numerictextbox sf-lib sf-input', onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, ...otherProps, role: "spinbutton", "aria-label": "numerictextbox", onKeyDown: handleKeyDown, floatLabelType: labelMode, placeholder: setPlaceholder, "aria-valuemin": min, "aria-valuemax": max, value: displayValue, "aria-valuenow": currentValueRef.current || undefined, tabIndex: 0, disabled: disabled, readOnly: readOnly }), renderFloatLabelElement(labelMode, isFocused, displayValue || '', setPlaceholder, uniqueId), clearButton && renderClearButton(currentValueRef.current ? currentValueRef.current.toString() : '', clearValue), spinButton && (_jsxs(_Fragment, { children: [_jsxs("span", { className: `${SPINICON} ${SPINDOWN}`, onMouseDown: (e) => { + rippleRef1.rippleMouseDown(e); + e.preventDefault(); + }, onClick: () => handleSpinClick(false), title: "Decrement value", children: [_jsx(SvgIcon, { height: spinSize, width: spinSize, d: spinDown }), ripple && _jsx(rippleRef1.Ripple, {})] }), _jsxs("span", { className: `${SPINICON} ${SPINUP}`, onMouseDown: (e) => { + rippleRef2.rippleMouseDown(e); + e.preventDefault(); + }, onClick: () => handleSpinClick(true), title: "Increment value", children: [_jsx(SvgIcon, { height: spinSize, width: spinSize, d: spinUp }), ripple && _jsx(rippleRef2.Ripple, {})] })] }))] })); +}); +export default NumericTextBox; diff --git a/components/inputs/src/textarea/index.d.ts b/components/inputs/src/textarea/index.d.ts new file mode 100644 index 0000000..f80acf7 --- /dev/null +++ b/components/inputs/src/textarea/index.d.ts @@ -0,0 +1,4 @@ +/** + * textarea modules + */ +export * from './textarea'; diff --git a/components/inputs/src/textarea/index.js b/components/inputs/src/textarea/index.js new file mode 100644 index 0000000..f80acf7 --- /dev/null +++ b/components/inputs/src/textarea/index.js @@ -0,0 +1,4 @@ +/** + * textarea modules + */ +export * from './textarea'; diff --git a/components/inputs/src/textarea/textarea.d.ts b/components/inputs/src/textarea/textarea.d.ts new file mode 100644 index 0000000..8012c32 --- /dev/null +++ b/components/inputs/src/textarea/textarea.d.ts @@ -0,0 +1,112 @@ +import * as React from 'react'; +import { FloatLabelType } from '../common/inputbase'; +import { Variant } from '../textbox/textbox'; +/** + * Defines the available resize modes for components that support resizing. + * + * @enum {string} + */ +export declare enum ResizeMode { + /** + * Disables resizing functionality. + */ + None = "None", + /** + * Enables resizing in both horizontal and vertical directions. + */ + Both = "Both", + /** + * Enables resizing only in the horizontal direction. + */ + Horizontal = "Horizontal", + /** + * Enables resizing only in the vertical direction. + */ + Vertical = "Vertical" +} +export interface TextAreaProps { + /** + * Sets the value of the component. When provided, the component will be controlled. + * + * @default - + */ + value?: string; + /** + * Sets the default value of the component. Used for uncontrolled mode. + * + * @default - + */ + defaultValue?: string; + /** + * Defines the floating label type for the component. + * + * @default 'Never' + */ + labelMode?: FloatLabelType; + /** + * Sets the placeholder text for the component. + * + * @default - + */ + placeholder?: string; + /** + * Resize mode for the textarea + * + * @default 'Both' + */ + resizeMode?: ResizeMode; + /** + * Number of columns for the textarea + * + * @default - + */ + cols?: number; + /** + * Determines whether to show a clear button within the input field. + * When enabled, a clear button (×) appears when the field has a value, + * allowing users to quickly clear the input with a single click. + * + * @default false + */ + clearButton?: boolean; + /** + * Number of rows for the textarea + * + * @default 2 + */ + rows?: number; + /** + * Callback fired when the input value is changed. + * + * @event onChange + * @param {React.ChangeEvent} event - The change event object containing the new value. + * @returns {void} + */ + onChange?: (event: React.ChangeEvent) => void; + /** + * The visual style variant of the component. + * + * @default Variant.Standard + */ + variant?: Variant; +} +export interface ITextArea extends TextAreaProps { + /** + * This is TextArea component element. + * + * @private + * @default null + */ + element?: HTMLTextAreaElement | null; +} +type ITextAreaProps = TextAreaProps & Omit, keyof TextAreaProps>; +/** + * TextArea component that provides a multi-line text input field with enhanced functionality. + * Supports both controlled and uncontrolled modes based on presence of value or defaultValue prop. + * + * ```typescript + *