From a61bdcff8d4a7a38c19c6240a5d7839359fa9911 Mon Sep 17 00:00:00 2001 From: inikolova Date: Tue, 20 Oct 2020 17:25:31 +0300 Subject: [PATCH] fix: revise toggle button styling --- packages/default/scss/button/_theme.scss | 25 +++++++++ tests/visual/togglebutton.html | 69 ++++++++++++++++++++++++ 2 files changed, 94 insertions(+) create mode 100644 tests/visual/togglebutton.html diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss index 19732326714..fb2ce125856 100644 --- a/packages/default/scss/button/_theme.scss +++ b/packages/default/scss/button/_theme.scss @@ -125,6 +125,31 @@ } } + // Toggle button + .k-toggle-button { + &:focus, + &.k-state-focused { + box-shadow: $button-focused-shadow; + } + + &:active, + &.k-state-active { + @include fill( + $primary-button-pressed-text, + $primary-button-pressed-bg, + $primary-button-pressed-border, + $primary-button-pressed-gradient + ); + box-shadow: $primary-button-pressed-shadow; + + &:focus, + &.k-state-focused { + box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13); + } + + } + } + // Button group .k-button-group { diff --git a/tests/visual/togglebutton.html b/tests/visual/togglebutton.html new file mode 100644 index 00000000000..0dfd2e2724a --- /dev/null +++ b/tests/visual/togglebutton.html @@ -0,0 +1,69 @@ + + + + Toggle button + + + + + + + + + +
+ +

Toggle Button

+

Button and Toggle Button in Toolbar

+ +
+
+ Button + Toggle Button +
+ +
+
+ Hover Button + Hover Toggle Button +
+ +
+
+ Focused Button + Focused Toggle Button +
+ +
+
+ Active Button + Active Toggle Button +
+ +
+
+ A+F Button + A+F Toggle Button +
+ +
+
+ Disabled Button + Disabled Toggle Button +
+ + +
+ + +