by roundabout, Sunday, 14 April 2019, 01:51:10 (1555206670), pushed by roundabout, Sunday, 11 May 2025, 13:22:36 (1746969756)
Author identity: nana-4 <hnmaigo@gmail.com>
48fd277d1d0671f8ba532a409e8d6c8797c6feb4
src/_sass/_variables.scss
@@ -17,9 +17,9 @@ $circular-radius: 9999px;
// durations
$duration: 100ms;
$duration-ripple: 225ms;
$duration-ripple-aftermath: 300ms;
$duration-ripple-aftermath-opacity: 1200ms;
$ripple-fade-in-duration: 225ms;
$ripple-fade-out-duration: 300ms;
$ripple-fade-out-opacity-duration: 1200ms;
// timing functions
$ease: cubic-bezier(0.4, 0.0, 0.2, 1);
src/_sass/gtk/_common-3.20.scss
@@ -616,7 +616,7 @@ button {
}
%needs_attention {
animation: needs_attention $duration-ripple $ease-out forwards;
animation: needs_attention $ripple-fade-in-duration $ease-out forwards;
background-repeat: no-repeat;
background-position: right 3px;
background-size: 6px 6px;
@@ -1159,8 +1159,8 @@ headerbar {
&.selection-mode {
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
// but let's keep it for backwards compatibility.
transition: background-color 0.00001s $duration-ripple, color $duration-ripple $ease-out;
animation: ripple-headerbar $duration-ripple $ease-out;
transition: background-color 0.00001s $ripple-fade-in-duration, color $ripple-fade-in-duration $ease-out;
animation: ripple-headerbar $ripple-fade-in-duration $ease-out;
box-shadow: $shadow-1, inset 0 1px highlight($primary);
background-color: $primary;
color: on($primary);
@@ -1880,8 +1880,8 @@ notebook {
&:checked {
transition: $transition,
background-size $duration-ripple $ease-out,
background-image $duration-ripple + $duration-ripple-aftermath $ease-out;
background-size $ripple-fade-in-duration $ease-out,
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
background-color: transparent;
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
background-size: 1000% 1000%;
@@ -2416,8 +2416,8 @@ scale {
slider {
transition: background-color $duration $ease-out,
background-size $duration-ripple-aftermath $ease-out,
background-image $duration-ripple-aftermath-opacity $ease-out;
background-size $ripple-fade-out-duration $ease-out,
background-image $ripple-fade-out-opacity-duration $ease-out;
background-repeat: no-repeat;
background-position: center;
background-size: auto, 1000% 1000%;
@@ -2446,7 +2446,7 @@ scale {
transition: background-color $duration $ease-out,
background-size 0,
background-image 0;
animation: ripple-slider $duration-ripple $ease-out forwards;
animation: ripple-slider $ripple-fade-in-duration $ease-out forwards;
background-color: $overlay-hover;
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
radial-gradient(circle, $overlay-active 10%, transparent 0%);
@@ -2751,8 +2751,8 @@ list {
row {
&.activatable {
transition: $transition,
background-size $duration-ripple-aftermath $ease-out,
background-image $duration-ripple-aftermath-opacity $ease-out;
background-size $ripple-fade-out-duration $ease-out,
background-image $ripple-fade-out-opacity-duration $ease-out;
outline: none;
box-shadow: inset 0 0 0 9999px transparent;
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
@@ -2767,8 +2767,8 @@ row {
&:hover {
transition: $transition,
box-shadow 0,
background-size $duration-ripple-aftermath $ease-out,
background-image $duration-ripple-aftermath-opacity $ease-out;
background-size $ripple-fade-out-duration $ease-out,
background-image $ripple-fade-out-opacity-duration $ease-out;
box-shadow: inset 0 0 0 9999px $overlay-hover;
}
@@ -2777,7 +2777,7 @@ row {
transition: $transition,
background-size 0,
background-image 0;
animation: ripple $duration-ripple $ease-out forwards;
animation: ripple $ripple-fade-in-duration $ease-out forwards;
box-shadow: inset 0 0 0 9999px $overlay-hover;
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
background-size: 0% 0%;
src/_sass/gtk/_drawing-3.20.scss
@@ -31,7 +31,7 @@
//
@if $t == normal {
transition: $transition, border-image $duration-ripple $ease-out;
transition: $transition, border-image $ripple-fade-in-duration $ease-out;
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
$fc 0%,
transparent 0%)
@@ -96,8 +96,8 @@
@if $t == normal {
transition: $transition,
background-size $duration-ripple-aftermath $ease-out,
background-image $duration-ripple-aftermath-opacity $ease-out;
background-size $ripple-fade-out-duration $ease-out,
background-image $ripple-fade-out-opacity-duration $ease-out;
outline: none;
box-shadow: $shadow-1, inset 0 0 0 9999px transparent;
background-color: $surface;
@@ -122,7 +122,7 @@
transition: $transition,
background-size 0,
background-image 0;
animation: ripple $duration-ripple $ease-out forwards;
animation: ripple $ripple-fade-in-duration $ease-out forwards;
box-shadow: $shadow-2, inset 0 0 0 9999px $overlay-hover;
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
background-size: 0% 0%;
@@ -147,9 +147,9 @@
@if $t == flat-normal {
transition: $transition,
border-image $duration-ripple $ease-out,
background-size $duration-ripple-aftermath $ease-out,
background-image $duration-ripple-aftermath-opacity $ease-out;
border-image $ripple-fade-in-duration $ease-out,
background-size $ripple-fade-out-duration $ease-out,
background-image $ripple-fade-out-opacity-duration $ease-out;
outline: none;
box-shadow: inset 0 0 0 9999px transparent;
background-color: transparent;
@@ -172,10 +172,10 @@
@if $t == flat-active {
transition: $transition,
border-image $duration-ripple $ease-out,
border-image $ripple-fade-in-duration $ease-out,
background-size 0,
background-image 0;
animation: ripple $duration-ripple $ease-out forwards;
animation: ripple $ripple-fade-in-duration $ease-out forwards;
box-shadow: inset 0 0 0 9999px $overlay-hover;
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
background-size: 0% 0%;
src/_sass/gtk/apps/_gnome-3.22.scss
@@ -34,11 +34,11 @@
}
.nautilus-operations-button-needs-attention {
animation: needs_attention_keyframes $duration-ripple-aftermath $ease 2 alternate;
animation: needs_attention_keyframes $ripple-fade-out-duration $ease 2 alternate;
}
.nautilus-operations-button-needs-attention-multiple {
animation: needs_attention_keyframes $duration-ripple-aftermath $ease 6 alternate;
animation: needs_attention_keyframes $ripple-fade-out-duration $ease 6 alternate;
}
.linked > button:not(.suggested-action):not(.destructive-action).disclosure-button { @extend %circular_button; }
@@ -588,8 +588,8 @@ docktab {
&:checked {
transition: $transition,
background-size $duration-ripple $ease-out,
background-image $duration-ripple + $duration-ripple-aftermath $ease-out;
background-size $ripple-fade-in-duration $ease-out,
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
box-shadow: inset 0 -2px $primary;
background-color: transparent;
background-image: radial-gradient(circle, transparent 10%, transparent 0%);