gtk: Drop icon transform from check/radio
This was a bit too dynamic.
by roundabout, Wednesday, 28 November 2018, 12:50:42 (1543409442), pushed by roundabout, Sunday, 11 May 2025, 13:22:29 (1746969749)
Author identity: nana-4 <hnmaigo@gmail.com>
bd98f4e8a9c027949d001107430980cb35ce83cf
src/_sass/gtk/_common-3.20.scss
@@ -2300,32 +2300,8 @@ menu menuitem radio {
// ANIMATION:
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
// the transformation is set on the active state and it get reset on the checked state.
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
check:not(:checked):indeterminate:active,
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
check:not(:checked),
radio:not(:checked) {
& {
transition: $shorter_transition,
background-size $ripple_duration $deceleration_curve,
background-image $ripple_opacity_duration $deceleration_curve,
-gtk-icon-transform 0;
}
&:active {
transition: $shorter_transition,
background-size 0,
background-image 0,
-gtk-icon-transform 0;
}
menu menuitem & { transition: none; }
}
treeview.view check,
treeview.view radio {
padding: 0;
src/gtk/3.0/gtk-compact.css
@@ -2605,30 +2605,6 @@ menu menuitem radio:indeterminate {
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg"));
}
check:not(:checked):active {
-gtk-icon-transform: rotate(90deg);
}
check:not(:checked):indeterminate:active,
radio:not(:checked):indeterminate:active {
-gtk-icon-transform: scaleX(-1);
}
check:not(:checked),
radio:not(:checked) {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), -gtk-icon-transform 0;
}
check:not(:checked):active,
radio:not(:checked):active {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0, -gtk-icon-transform 0;
}
menu menuitem check:not(:checked), menu menuitem
radio:not(:checked) {
transition: none;
}
treeview.view check,
treeview.view radio {
padding: 0;
src/gtk/3.0/gtk-dark-compact.css
@@ -2605,30 +2605,6 @@ menu menuitem radio:indeterminate {
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg"));
}
check:not(:checked):active {
-gtk-icon-transform: rotate(90deg);
}
check:not(:checked):indeterminate:active,
radio:not(:checked):indeterminate:active {
-gtk-icon-transform: scaleX(-1);
}
check:not(:checked),
radio:not(:checked) {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), -gtk-icon-transform 0;
}
check:not(:checked):active,
radio:not(:checked):active {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0, -gtk-icon-transform 0;
}
menu menuitem check:not(:checked), menu menuitem
radio:not(:checked) {
transition: none;
}
treeview.view check,
treeview.view radio {
padding: 0;
src/gtk/3.0/gtk-dark.css
@@ -2605,30 +2605,6 @@ menu menuitem radio:indeterminate {
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg"));
}
check:not(:checked):active {
-gtk-icon-transform: rotate(90deg);
}
check:not(:checked):indeterminate:active,
radio:not(:checked):indeterminate:active {
-gtk-icon-transform: scaleX(-1);
}
check:not(:checked),
radio:not(:checked) {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), -gtk-icon-transform 0;
}
check:not(:checked):active,
radio:not(:checked):active {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0, -gtk-icon-transform 0;
}
menu menuitem check:not(:checked), menu menuitem
radio:not(:checked) {
transition: none;
}
treeview.view check,
treeview.view radio {
padding: 0;
src/gtk/3.0/gtk-light-compact.css
@@ -2605,30 +2605,6 @@ menu menuitem radio:indeterminate {
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg"));
}
check:not(:checked):active {
-gtk-icon-transform: rotate(90deg);
}
check:not(:checked):indeterminate:active,
radio:not(:checked):indeterminate:active {
-gtk-icon-transform: scaleX(-1);
}
check:not(:checked),
radio:not(:checked) {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), -gtk-icon-transform 0;
}
check:not(:checked):active,
radio:not(:checked):active {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0, -gtk-icon-transform 0;
}
menu menuitem check:not(:checked), menu menuitem
radio:not(:checked) {
transition: none;
}
treeview.view check,
treeview.view radio {
padding: 0;
src/gtk/3.0/gtk-light.css
@@ -2605,30 +2605,6 @@ menu menuitem radio:indeterminate {
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg"));
}
check:not(:checked):active {
-gtk-icon-transform: rotate(90deg);
}
check:not(:checked):indeterminate:active,
radio:not(:checked):indeterminate:active {
-gtk-icon-transform: scaleX(-1);
}
check:not(:checked),
radio:not(:checked) {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), -gtk-icon-transform 0;
}
check:not(:checked):active,
radio:not(:checked):active {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0, -gtk-icon-transform 0;
}
menu menuitem check:not(:checked), menu menuitem
radio:not(:checked) {
transition: none;
}
treeview.view check,
treeview.view radio {
padding: 0;
src/gtk/3.0/gtk.css
@@ -2605,30 +2605,6 @@ menu menuitem radio:indeterminate {
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg"));
}
check:not(:checked):active {
-gtk-icon-transform: rotate(90deg);
}
check:not(:checked):indeterminate:active,
radio:not(:checked):indeterminate:active {
-gtk-icon-transform: scaleX(-1);
}
check:not(:checked),
radio:not(:checked) {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), -gtk-icon-transform 0;
}
check:not(:checked):active,
radio:not(:checked):active {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0, -gtk-icon-transform 0;
}
menu menuitem check:not(:checked), menu menuitem
radio:not(:checked) {
transition: none;
}
treeview.view check,
treeview.view radio {
padding: 0;