diff --git a/src/assets/breeze-check-checked-symbolic.svg b/src/assets/breeze-check-checked-symbolic.svg
new file mode 100644
--- /dev/null
+++ b/src/assets/breeze-check-checked-symbolic.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/src/assets/breeze-check-indeterminate-symbolic.svg b/src/assets/breeze-check-indeterminate-symbolic.svg
new file mode 100644
--- /dev/null
+++ b/src/assets/breeze-check-indeterminate-symbolic.svg
@@ -0,0 +1,7 @@
+
+
diff --git a/src/assets/breeze-check-unchecked-symbolic.svg b/src/assets/breeze-check-unchecked-symbolic.svg
new file mode 100644
--- /dev/null
+++ b/src/assets/breeze-check-unchecked-symbolic.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/assets/breeze-radio-checked-symbolic.svg b/src/assets/breeze-radio-checked-symbolic.svg
new file mode 100644
--- /dev/null
+++ b/src/assets/breeze-radio-checked-symbolic.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/src/assets/breeze-radio-indeterminate-symbolic.svg b/src/assets/breeze-radio-indeterminate-symbolic.svg
new file mode 100644
--- /dev/null
+++ b/src/assets/breeze-radio-indeterminate-symbolic.svg
@@ -0,0 +1,7 @@
+
+
diff --git a/src/assets/breeze-radio-unchecked-symbolic.svg b/src/assets/breeze-radio-unchecked-symbolic.svg
new file mode 100644
--- /dev/null
+++ b/src/assets/breeze-radio-unchecked-symbolic.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/gtk3/widgets/_checkboxes.scss b/src/gtk3/widgets/_checkboxes.scss
--- a/src/gtk3/widgets/_checkboxes.scss
+++ b/src/gtk3/widgets/_checkboxes.scss
@@ -3,20 +3,6 @@
/*************************
* Check and Radio items *
*************************/
-@each $s,$as in ('','-unchecked'),
- (':hover', '-unchecked-hover'),
- (':active', '-unchecked-active'),
- (':backdrop', '-unchecked-backdrop'),
- (':checked', '-checked-active'),
- (':checked:hover', '-checked-hover'),
- (':checked:active', '-checked-active'),
- (':backdrop:checked', '-checked-backdrop') {
- .view.content-view.check#{$s}:not(list) {
- -gtk-icon-shadow: none;
- -gtk-icon-source: -gtk-scaled(url("../assets/check-selectionmode#{$as}.png"), url("../assets/check-selectionmode#{$as}@2.png"));
- background-color: transparent;
- }
-}
checkbutton.text-button, radiobutton.text-button {
// this is for a nice focus on check and radios text
@@ -32,53 +18,43 @@
}
}
-@each $a in ('check','radio') {
+check, radio {
+ margin: 0 4px;
- #{$a} {
- margin: 0 4px;
+ &:only-child { margin: 0; }
- &:only-child { margin: 0; }
+ min-height: 18px;
+ min-width: 18px;
+ //border: none;
+ animation: none;
+ background-color: transparent;
+ -gtk-icon-palette: error gtk("@theme_button_decoration_focus"), success gtk("@borders"), warning gtk("@theme_button_background_normal");
+ -gtk-icon-shadow: 1px 1px rgba(35,38,41,0.2);
- min-height: 18px;
- min-width: 18px;
- //border: none;
- animation: none;
- background-color: transparent;
- -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png"));
+ &:hover {
+ -gtk-icon-palette: error gtk("@theme_button_decoration_focus"), success gtk("@theme_button_decoration_focus"), warning gtk("@theme_button_background_normal");
+ }
+ &:disabled {
+ -gtk-icon-palette: error gtk("@theme_button_decoration_focus_insensitive"), success gtk("@insensitive_borders"), warning gtk("@theme_button_background_insensitive");
+ }
- @each $s,$as in ('hover','-hover'),
- ('active','-active'),
- ('disabled','-insensitive'),
- ('backdrop','-backdrop'),
- ('backdrop:disabled','-backdrop-insensitive') {
- &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked#{$as}.png"), url("../assets/#{$a}-unchecked#{$as}@2.png")); }
- &:checked {
- -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png"));
- &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked#{$as}.png"), url("../assets/#{$a}-checked#{$as}@2.png")); }
- }
- &:indeterminate {
- -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png"));
- &:#{$s} { -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed#{$as}.png"), url("../assets/#{$a}-mixed#{$as}@2.png")); }
- }
+ menu menuitem & {
+ margin: 0; // this is a workaround for a menu check/radio size allocation issue
+ min-height: 18px;
+ min-width: 18px;
+ background-color: transparent;
+ box-shadow: none;
+ -gtk-icon-shadow: none;
+ animation: none;
}
-
- menu menuitem & {
- margin: 0; // this is a workaround for a menu check/radio size allocation issue
- min-height: 18px;
- min-width: 18px;
- background-color: transparent;
- box-shadow: none;
- -gtk-icon-shadow: none;
- animation: none;
- &:hover {
- -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-unchecked.png"), url("../assets/#{$a}-unchecked@2.png"));
- }
- &:checked:hover {
- -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-checked-active.png"), url("../assets/#{$a}-checked-active@2.png"));
- }
- &:indeterminate:hover {
- -gtk-icon-source: -gtk-scaled(url("../assets/#{$a}-mixed-active.png"), url("../assets/#{$a}-mixed-active@2.png"));
- }
- }
+}
+@each $type in ('check', 'radio') {
+ #{$type} {
+ -gtk-icon-source: -gtk-recolor(url("../assets/breeze-#{$type}-unchecked-symbolic.svg"));
+ @each $state in ('checked', 'indeterminate') {
+ &:#{$state} {
+ -gtk-icon-source: -gtk-recolor(url("../assets/breeze-#{$type}-#{$state}-symbolic.svg"));
+ }
+ }
}
}