gtk: Simplify ripple transitions

src/_sass/gtk/_drawing-3.20.scss

@@ -87,12 +87,14 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            87  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            88  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            89  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        90 +
                                        $ripple-transition-property: all, border-image, background-size, background-image;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        91 +
                                        $ripple-transition-duration: $duration, $ripple-fade-in-duration, $ripple-fade-out-duration, $ripple-fade-out-opacity-duration;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        92 +
                                        $ripple-active-transition-duration: $duration, $ripple-fade-in-duration, 0ms, 0ms;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        93 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            94  
                                            %ripple {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        91 -
                                          transition:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        92 -
                                            all $duration $ease-out,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        93 -
                                            border-image $ripple-fade-in-duration $ease-out,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        94 -
                                            background-size $ripple-fade-out-duration $ease-out,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        95 -
                                            background-image $ripple-fade-out-opacity-duration $ease-out;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        95 +
                                          transition-property: $ripple-transition-property;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        96 +
                                          transition-duration: $ripple-transition-duration;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        97 +
                                          transition-timing-function: $ease-out;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            98  
                                              outline: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            99  
                                              background-image: radial-gradient(circle, transparent 10%, transparent 0%);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            100  
                                              background-repeat: no-repeat;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -100,11 +102,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            102  
                                              background-size: 1000% 1000%;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            103  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            104  
                                              &:active {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        103 -
                                            transition:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        104 -
                                              all $duration $ease-out,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        105 -
                                              border-image $ripple-fade-in-duration $ease-out,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        106 -
                                              background-size 0ms,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        107 -
                                              background-image 0ms;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        105 +
                                            transition-duration: $ripple-active-transition-duration;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            106  
                                                animation: ripple $ripple-fade-in-duration $ease-out forwards;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            107  
                                                background-size: 0% 0%;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            108  
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -164,11 +162,8 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            162  
                                            @mixin list-item {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            163  
                                              &:drop(active):not(:active),
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            164  
                                              &:hover:not(:active) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        167 -
                                            transition:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        168 -
                                              all $duration $ease-out,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        169 -
                                              box-shadow 0ms,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        170 -
                                              background-size $ripple-fade-out-duration $ease-out,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        171 -
                                              background-image $ripple-fade-out-opacity-duration $ease-out;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        165 +
                                            transition-property: $ripple-transition-property, box-shadow;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        166 +
                                            transition-duration: $ripple-transition-duration, 0ms;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            167  
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            168  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            169