gtk: Change the button focus style from outline to overlay (WIP)

src/_sass/gtk/_common-3.20.scss

@@ -401,6 +401,8 @@ button {

                                
                                
                                
                            
                                
                                    
                                        
                                            401  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            402  
                                                @include button(normal);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            403  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        404 +
                                            &:focus { @include button(focus); }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        405 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            406  
                                                &:hover { @include button(hover); }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            407  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            408  
                                                &:active { @include button(active); }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -415,6 +417,8 @@ button {

                                
                                
                                
                            
                                
                                    
                                        
                                            417  
                                                  @at-root %simple_flat_button, & {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            418  
                                                    @include button(flat-normal);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            419  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        420 +
                                                &:focus { @include button(flat-focus); }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        421 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            422  
                                                    &:hover { @include button(flat-hover); }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            423  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            424  
                                                    &:active { @include button(flat-active); }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -477,7 +481,7 @@ button {

                                
                                
                                
                            
                                
                                    
                                        
                                            481  
                                                &.flat {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            482  
                                                  color: on(dark, secondary);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            483  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        480 -
                                              &:hover, &:active { color: on(dark); }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        484 +
                                              &:focus, &:hover, &:active { color: on(dark); }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            485  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            486  
                                                  &:disabled { color: on(dark, secondary-disabled); }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            487  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -756,7 +760,7 @@ button.color {

                                
                                
                                
                            
                                
                                    
                                        
                                            760  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            761  
                                            button:link,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            762  
                                            button:visited {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        759 -
                                          &, &:hover, &:active { @extend *:link; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        763 +
                                          &, &:focus, &:hover, &:active { @extend *:link; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            764  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            765  
                                              > label { text-decoration-line: underline; }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            766  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -791,6 +795,12 @@ spinbutton {

                                
                                
                                
                            
                                
                                    
                                        
                                            795  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            796  
                                                  @extend %small_button;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            797  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        798 +
                                              // Remove unwanted focus indicator
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        799 +
                                              &:focus:not(:hover):not(:active) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        800 +
                                                box-shadow: inset 0 0 0 9999px transparent;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        801 +
                                                color: $text-secondary;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        802 +
                                              }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        803 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            804  
                                                  &.up:dir(ltr),
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            805  
                                                  &.down:dir(rtl) { margin-left: -$container-padding / 2; }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            806  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -832,6 +842,12 @@ spinbutton {

                                
                                
                                
                            
                                
                                    
                                        
                                            842  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            843  
                                                  @extend %simple_flat_button;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            844  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        845 +
                                              // Remove unwanted focus indicator
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        846 +
                                              &:focus:not(:hover):not(:active) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        847 +
                                                box-shadow: inset 0 0 0 9999px transparent;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        848 +
                                                color: $text-secondary;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        849 +
                                              }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        850 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            851  
                                                  &.up { border-radius: $corner-radius $corner-radius 0 0; }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            852  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            853  
                                                  &.down { border-radius: 0 0 $corner-radius $corner-radius; }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -948,6 +964,8 @@ button.combo {

                                
                                
                                
                            
                                
                                    
                                        
                                            964  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            965  
                                              @include entry(normal);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            966  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        967 +
                                          &:focus { @include entry(focus); }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        968 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            969  
                                              &:hover { @include entry(hover); }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            970  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            971  
                                              &:checked { @include entry(checked); }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -1100,7 +1118,7 @@ headerbar {

                                
                                
                                
                            
                                
                                    
                                        
                                            1118  
                                                                              0 0 0 / 0 0 0px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1119  
                                                color: $titlebar-text-secondary;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1120  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        1103 -
                                            &:hover, &:active { color: $titlebar-text; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        1121 +
                                            &:focus, &:hover, &:active { color: $titlebar-text; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1122  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1123  
                                                &:disabled { color: $titlebar-text-secondary-disabled; }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1124  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -1119,7 +1137,7 @@ headerbar {

                                
                                
                                
                            
                                
                                    
                                        
                                            1137  
                                                &:backdrop {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1138  
                                                  color: $titlebar-text-disabled;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1139  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        1122 -
                                              &:hover, &:active { color: $titlebar-text-secondary; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        1140 +
                                              &:focus, &:hover, &:active { color: $titlebar-text-secondary; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1141  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1142  
                                                  &:disabled { color: $titlebar-text-secondary-disabled; }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1143  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -1476,7 +1494,7 @@ treeview.view {

                                
                                
                                
                            
                                
                                    
                                        
                                            1494  
                                                  border-radius: 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1495  
                                                  background-clip: border-box;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1496  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        1479 -
                                              &:not(:hover):not(:active) { color: $text-secondary; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        1497 +
                                              &:not(:focus):not(:hover):not(:active) { color: $text-secondary; }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1498  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1499  
                                                  &, &:hover, &:active { box-shadow: none; }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            1500  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -2185,7 +2203,7 @@ radio {

                                
                                
                                
                            
                                
                                    
                                        
                                            2203  
                                              // &:only-child { margin: -12px; }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            2204  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            2205  
                                              popover modelbutton.flat & {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        2188 -
                                            &, &:hover, &:focus, &:focus:hover, &:active, &:disabled {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        2206 +
                                            &, &:focus, &:hover, &:focus:hover, &:active, &:disabled {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            2207  
                                                  transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            2208  
                                                  box-shadow: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            2209  
                                                  background-image: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

src/_sass/gtk/_drawing-3.20.scss

@@ -102,6 +102,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            102  
                                                transition: $transition,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            103  
                                                            background-size $duration-ripple-aftermath $ease-out,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            104  
                                                            background-image $duration-ripple-aftermath-opacity $ease-out;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        105 +
                                            outline: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            106  
                                                box-shadow: $shadow-1, inset 0 0 0 9999px transparent;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            107  
                                                background-color: $surface;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            108  
                                                background-image: radial-gradient(circle farthest-corner at center,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -118,6 +119,11 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            119  
                                                color: $text;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            120  
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            121  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        122 +
                                          @if $t == focus {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        123 +
                                            box-shadow: $shadow-2, inset 0 0 0 9999px transparent;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        124 +
                                            color: $text;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        125 +
                                          }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        126 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            127  
                                              @if $t == active {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            128  
                                                transition: $transition,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            129  
                                                            background-size 0,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -152,6 +158,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            158  
                                                            border-image $duration-ripple $ease-out,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            159  
                                                            background-size $duration-ripple-aftermath $ease-out,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            160  
                                                            background-image $duration-ripple-aftermath-opacity $ease-out;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        161 +
                                            outline: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            162  
                                                box-shadow: inset 0 0 0 9999px transparent;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            163  
                                                background-color: transparent;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            164  
                                                background-image: radial-gradient(circle farthest-corner at center,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -168,6 +175,11 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            175  
                                                color: $text;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            176  
                                              }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            177  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        178 +
                                          @if $t == flat-focus {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        179 +
                                            box-shadow: inset 0 0 0 9999px $overlay-focus;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        180 +
                                            color: $text;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        181 +
                                          }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        182 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            183  
                                              @if $t == flat-active {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            184  
                                                transition: $transition,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            185  
                                                            border-image $duration-ripple $ease-out,