some 3.20 fixes

Paper/gtk-3.0/widgets/_buttons.scss

@@ -28,7 +28,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
 button {
   @at-root %button_basic, & {
 
-    min-height: 24px;
+    min-height: 20px;
     min-width: 16px;
     padding: 4px 9px;
     border: 1px solid $borders_color;

Paper/gtk-3.0/widgets/_checks-radios.scss

@@ -12,13 +12,13 @@
                   (':backdrop', '-unchecked-backdrop'),
                   (':insensitive', '-unchecked-insensitive'),
                   (':insensitive:backdrop', '-unchecked-backdrop-insensitive') {
+  check#{$s},
   .check#{$s}{
-    background: if($variant == 'light', -gtk-scaled(url("assets/checkbox#{$un}.png"),url("assets/checkbox#{$un}@2.png")), -gtk-scaled(url("assets/checkbox#{$un}-dark.png"),url("assets/checkbox#{$un}-dark@2.png")));
     -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("assets/checkbox#{$un}.png"),url("assets/checkbox#{$un}@2.png")), -gtk-scaled(url("assets/checkbox#{$un}-dark.png"),url("assets/checkbox#{$un}-dark@2.png")));
     -gtk-icon-shadow: none;
   }
+  radio#{$s},
   .radio#{$s}{
-    background: if($variant == 'light', -gtk-scaled(url("assets/radio#{$un}.png"),url("assets/radio#{$un}@2.png")), -gtk-scaled(url("assets/radio#{$un}-dark.png"),url("assets/radio#{$un}-dark@2.png")));
     -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("assets/radio#{$un}.png"),url("assets/radio#{$un}@2.png")), -gtk-scaled(url("assets/radio#{$un}-dark.png"),url("assets/radio#{$un}-dark@2.png")));
     -gtk-icon-shadow: none;
   }
@@ -31,13 +31,13 @@
                   (':checked:backdrop', '-checked-backdrop'),
                   (':checked:insensitive', '-checked-insensitive'),
                   (':checked:insensitive:backdrop', '-checked-insensitive-backdrop') {
+  check#{$s},
   .check#{$s}{
-    background: if($variant == 'light', -gtk-scaled(url("assets/checkbox#{$ch}.png"),url("assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("assets/checkbox#{$ch}-dark.png"),url("assets/checkbox#{$ch}-dark@2.png")));
     -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("assets/checkbox#{$ch}.png"),url("assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("assets/checkbox#{$ch}-dark.png"),url("assets/checkbox#{$ch}-dark@2.png")));
     -gtk-icon-shadow: none;
   }
+  radio#{$s},
   .radio#{$s}{
-    background: if($variant == 'light', -gtk-scaled(url("assets/radio#{$ch}.png"),url("assets/radio#{$ch}@2.png")), -gtk-scaled(url("assets/radio#{$ch}-dark.png"),url("assets/radio#{$ch}-dark@2.png")));
     -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("assets/radio#{$ch}.png"),url("assets/radio#{$ch}@2.png")), -gtk-scaled(url("assets/radio#{$ch}-dark.png"),url("assets/radio#{$ch}-dark@2.png")));
     -gtk-icon-shadow: none;
   }
@@ -50,13 +50,13 @@
                   (':inconsistent:backdrop', '-mixed-backdrop'),
                   (':inconsistent:insensitive', '-mixed-insensitive'),
                   (':inconsistent:insensitive:backdrop', '-mixed-insensitive-backdrop') {
+  check#{$s},
   .check#{$s}{
-    background: if($variant == 'light', -gtk-scaled(url("assets/checkbox#{$mx}.png"),url("assets/checkbox#{$mx}@2.png")), -gtk-scaled(url("assets/checkbox#{$mx}-dark.png"),url("assets/checkbox#{$mx}-dark@2.png")));
     -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("assets/checkbox#{$mx}.png"),url("assets/checkbox#{$mx}@2.png")), -gtk-scaled(url("assets/checkbox#{$mx}-dark.png"),url("assets/checkbox#{$mx}-dark@2.png")));
     -gtk-icon-shadow: none;
   }
+  radio#{$s},
   .radio#{$s}{
-    background: if($variant == 'light', -gtk-scaled(url("assets/radio#{$mx}.png"),url("assets/radio#{$mx}@2.png")), -gtk-scaled(url("assets/radio#{$mx}-dark.png"),url("assets/radio#{$mx}-dark@2.png")));
     -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("assets/radio#{$mx}.png"),url("assets/radio#{$mx}@2.png")), -gtk-scaled(url("assets/radio#{$mx}-dark.png"),url("assets/radio#{$mx}-dark@2.png")));
     -gtk-icon-shadow: none;
   }
@@ -69,13 +69,13 @@
                   (':backdrop:selected', '-unchecked-backdrop'),
                   (':insensitive:selected', '-unchecked-insensitive'),
                   (':insensitive:backdrop:selected', '-unchecked-backdrop-insensitive') {
+  check#{$s},
   .check#{$s}{
-    background: if($variant == 'light', -gtk-scaled(url("assets/selected-checkbox#{$un}.png"),url("assets/selected-checkbox#{$un}@2.png")), -gtk-scaled(url("assets/selected-checkbox#{$un}-dark.png"),url("assets/selected-checkbox#{$un}-dark@2.png")));
     -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("assets/selected-checkbox#{$un}.png"),url("assets/selected-checkbox#{$un}@2.png")), -gtk-scaled(url("assets/selected-checkbox#{$un}-dark.png"),url("assets/selected-checkbox#{$un}-dark@2.png")));
     -gtk-icon-shadow: none;
   }
+  radio#{$s},
   .radio#{$s}{
-    background: if($variant == 'light', -gtk-scaled(url("assets/selected-radio#{$un}.png"),url("assets/selected-radio#{$un}@2.png")), -gtk-scaled(url("assets/selected-radio#{$un}-dark.png"),url("assets/selected-radio#{$un}-dark@2.png")));
     -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("assets/selected-radio#{$un}.png"),url("assets/selected-radio#{$un}@2.png")), -gtk-scaled(url("assets/selected-radio#{$un}-dark.png"),url("assets/selected-radio#{$un}-dark@2.png")));
     -gtk-icon-shadow: none;
   }
@@ -88,13 +88,13 @@
                   (':checked:backdrop:selected', '-checked-backdrop'),
                   (':checked:insensitive:selected', '-checked-insensitive'),
                   (':checked:insensitive:backdrop:selected', '-checked-insensitive-backdrop') {
+  check#{$s},
   .check#{$s}{
-    background: if($variant == 'light', -gtk-scaled(url("assets/selected-checkbox#{$ch}.png"),url("assets/selected-checkbox#{$ch}@2.png")), -gtk-scaled(url("assets/selected-checkbox#{$ch}-dark.png"),url("assets/selected-checkbox#{$ch}-dark@2.png")));
     -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("assets/selected-checkbox#{$ch}.png"),url("assets/selected-checkbox#{$ch}@2.png")), -gtk-scaled(url("assets/selected-checkbox#{$ch}-dark.png"),url("assets/selected-checkbox#{$ch}-dark@2.png")));
     -gtk-icon-shadow: none;
   }
+  radio#{$s},
   .radio#{$s}{
-    background: if($variant == 'light', -gtk-scaled(url("assets/selected-radio#{$ch}.png"),url("assets/selected-radio#{$ch}@2.png")), -gtk-scaled(url("assets/selected-radio#{$ch}-dark.png"),url("assets/selected-radio#{$ch}-dark@2.png")));
     -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("assets/selected-radio#{$ch}.png"),url("assets/selected-radio#{$ch}@2.png")), -gtk-scaled(url("assets/selected-radio#{$ch}-dark.png"),url("assets/selected-radio#{$ch}-dark@2.png")));
     -gtk-icon-shadow: none;
   }
@@ -108,13 +108,13 @@
                   (':inconsistent:backdrop:selected', '-mixed-backdrop'),
                   (':inconsistent:insensitive:selected', '-mixed-insensitive'),
                   (':inconsistent:insensitive:backdrop:selected', '-mixed-insensitive-backdrop') {
+  check#{$s},
   .check#{$s}{
-    background: if($variant == 'light', -gtk-scaled(url("assets/selected-checkbox#{$mx}.png"),url("assets/selected-checkbox#{$mx}@2.png")), -gtk-scaled(url("assets/selected-checkbox#{$mx}-dark.png"),url("assets/selected-checkbox#{$mx}-dark@2.png")));
     -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("assets/selected-checkbox#{$mx}.png"),url("assets/selected-checkbox#{$mx}@2.png")), -gtk-scaled(url("assets/selected-checkbox#{$mx}-dark.png"),url("assets/selected-checkbox#{$mx}-dark@2.png")));
     -gtk-icon-shadow: none;
   }
+  radio#{$s},
   .radio#{$s}{
-    background: if($variant == 'light', -gtk-scaled(url("assets/selected-radio#{$mx}.png"),url("assets/selected-radio#{$mx}@2.png")), -gtk-scaled(url("assets/selected-radio#{$mx}-dark.png"),url("assets/selected-radio#{$mx}-dark@2.png")));
     -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("assets/selected-radio#{$mx}.png"),url("assets/selected-radio#{$mx}@2.png")), -gtk-scaled(url("assets/selected-radio#{$mx}-dark.png"),url("assets/selected-radio#{$mx}-dark@2.png")));
     -gtk-icon-shadow: none;
   }
@@ -128,13 +128,13 @@
                   (':backdrop', '-unchecked-backdrop'),
                   (':insensitive', '-unchecked-insensitive'),
                   (':insensitive:backdrop', '-unchecked-backdrop-insensitive') {
+  .view.content-view check#{$s},
   .view.content-view.check#{$s}{
-    background: -gtk-scaled(url("assets/selection-mode-checkbox#{$un}.png"),url("assets/checkbox#{$un}@2.png"));
     -gtk-icon-source: -gtk-scaled(url("assets/selection-mode-checkbox#{$un}.png"),url("assets/checkbox#{$un}@2.png"));
     -gtk-icon-shadow: none;
   }
+  .view.content-view radio#{$s},
   .view.content-view.radio#{$s}{
-    background: -gtk-scaled(url("assets/selection-mode-radio#{$un}.png"),url("assets/radio#{$un}@2.png"));
     -gtk-icon-source: -gtk-scaled(url("assets/selection-mode-radio#{$un}.png"),url("assets/radio#{$un}@2.png"));
     -gtk-icon-shadow: none;
   }
@@ -147,19 +147,20 @@
                   (':backdrop', '-checked-backdrop'),
                   (':insensitive', '-checked-insensitive'),
                   (':insensitive:backdrop', '-checked-backdrop-insensitive') {
+  .view.content-view check#{$s},
   .view.content-view.check#{$s}{
-    background: -gtk-scaled(url("assets/selection-mode-checkbox#{$ch}.png"),url("assets/checkbox#{$ch}@2.png"));
     -gtk-icon-source: -gtk-scaled(url("assets/selection-mode-checkbox#{$ch}.png"),url("assets/checkbox#{$ch}@2.png"));
     -gtk-icon-shadow: none;
   }
+  .view.content-view radio#{$s},
   .view.content-view.radio#{$s}{
-    background: -gtk-scaled(url("assets/selection-mode-radio#{$ch}.png"),url("assets/radio#{$ch}@2.png"));
     -gtk-icon-source: -gtk-scaled(url("assets/selection-mode-radio#{$ch}.png"),url("assets/radio#{$ch}@2.png"));
     -gtk-icon-shadow: none;
   }
 }
 
 
+
 // Style
 
 .check.text-button, .radio.text-button,
@@ -180,102 +181,12 @@ radio,
 .radio {
   margin: 0 4px;
 
-  &:only-child { margin: 0; }
+  .menu .menuitem &,
-
-  min-height: 14px;
-  min-width: 14px;
-  border: 1px solid;
-
-  @include button(normal, $edge: $shadow_color);
-
-  &:hover { @include button(hover, $edge: $shadow_color); }
-  &:active { @include button(active); }
-  &:disabled { @include button(insensitive); }
-  &:backdrop {
-    @include button(backdrop);
-
-    transition: $backdrop_transition;
-
-    &:disabled { @include button(backdrop-insensitive); }
-  }
-
-  @if $variant == 'light' {
-    // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
-    // color, hence we need special casing.
-    row:selected & { border-color: $selected_borders_color; }
-  }
-
-  .osd & {
-    @include button(osd);
-
-    &:hover { @include button(osd); }
-    &:active { @include button(osd-active); }
-    &:backdrop { @include button(osd-backdrop); }
-    &:disabled { @include button(osd-insensitive); }
-  }
-
-  .menu menuitem &,
   menu menuitem & {
     margin: 0; // this is a workaround for a menu check/radio size allocation issue
-
-    &, &:hover, &:disabled { //FIXME use button reset mixin
-      min-height: 14px;
-      min-width: 14px;
-      background-image: none;
-      background-color: transparent;
-      box-shadow: none;
-      -gtk-icon-shadow: none;
-      color: inherit;
-      border-color: currentColor;
-      animation: none;
-    }
   }
 }
 
-%check,
-check {
-  border-radius: 3px;
-
-  &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
-                                      -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
-
-  &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
-                                            -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
-}
-
-%radio,
-radio {
-  border-radius: 100%;
-
-  &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/bullet-symbolic.svg")),
-                                      -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
-
-  &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
-                                            -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
-}
-
-// let's animate things
-@keyframes check_check {
-  from { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
-  to { -gtk-icon-transform: unset; }
-}
-
-@keyframes check_radio {
-  from { -gtk-icon-transform: scale(0); }
-  to { -gtk-icon-transform: unset; }
-}
-
-@keyframes check_indeterminate {
-  from { -gtk-icon-transform: scale(0, 1); }
-  to { -gtk-icon-transform: unset; }
-}
-
-check:not(:indeterminate):checked { animation: check_check 400ms; }
-
-radio:not(:indeterminate):checked { animation: check_radio 400ms; }
-
-check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate 400ms; }
-
 // no animations in menus
 menu menuitem {
   check:not(:indeterminate):checked,
@@ -301,6 +212,4 @@ treeview.view radio {
   }
 
   &:backdrop { &:selected, & { color: $backdrop_fg_color; }}
-}
+}
-
-treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround

Paper/gtk-3.0/widgets/_header-bars.scss

@@ -103,21 +103,35 @@ headerbar {
       color: $backdrop_headerbar_fg_color;
     }
 
-    .button.titlebutton,
+    .button,
-    button.titlebutton {
+    button {
-      min-height: 26px;
+
-      min-width: 26px;
+      &.titlebutton {
-      margin: 0;
+        min-height: 16px;
-      padding: 1px;
+        min-width: 16px;
-      border-radius:50%;
+        padding: 1px;
-      &:active {
+        border-radius:50%;
-        background-color:$headerbar_fg_color;
+        background-color:transparent;
-        color:$headerbar_bg_color;
+        box-shadow: none;
-        box-shadow:none;
+        text-shadow: none;
-      }
+        -gtk-icon-shadow: none;
-      &:backdrop {
+
-        color:$backdrop_headerbar_fg_color;
+        &:hover {
-        background-color:$headerbar_fg_color;
+          background-color:transparent;
+          color:lighten($headerbar_fg_color, 10%);
+        }
+
+        &:backdrop {
+          background-color:transparent;
+          color:$backdrop_headerbar_fg_color;
+        }
+
+        &:active {
+          background-color:$headerbar_fg_color;
+          color:$headerbar_bg_color;
+          border-radius:50%;
+          box-shadow:none;
+        }
       }
     }
   }
@@ -203,6 +217,7 @@ headerbar {
     text-shadow: none;
     -gtk-icon-shadow: none;
     padding: 10px;
+    margin: 0;
     color: $headerbar_fg_color;
 
     &.text-button,
@@ -222,8 +237,9 @@ headerbar {
       }
     }
 
-    .linked { 
+    &.linked { 
       border-radius: 0px;
+      margin: 0;
     }
 
     &.titlebutton {
@@ -231,13 +247,14 @@ headerbar {
       min-width: 16px;
       padding: 1px;
       border-radius:50%;
+      background-color:transparent;
       box-shadow: none;
       text-shadow: none;
       -gtk-icon-shadow: none;
 
       &:hover {
         background-color:transparent;
-        color:lighter($headerbar_fg_color, 10%);
+        color:lighten($headerbar_fg_color, 10%);
       }
 
       &:backdrop {
@@ -254,6 +271,7 @@ headerbar {
     }
 
     &:hover { 
+      background-image:none;
       background-color: transparentize(black, 0.85);
       box-shadow:none;
     }

Paper/gtk-3.0/widgets/_level-bars.scss

@@ -29,10 +29,8 @@ levelbar {
   block {
 
     border-radius:2px;
-    padding:2px;
-
     min-width: 32px;
-    min-height: 8px;
+    min-height: 2px;
 
     &.low,
     &.level-low {

Paper/gtk-3.0/widgets/_progress-bars.scss

@@ -12,13 +12,13 @@ progressbar {
   &.horizontal {
     trough,
     .trough,
-    progress { min-height: 2px; }
+    progress { min-height: 4px; }
   }
 
   &.vertical {
     trough,
     .trough,
-    progress { min-width: 2px; }
+    progress { min-width: 4px; }
   }
 
   &.horizontal progress { margin: 0 -1px; } // the progress node is positioned after the trough border

Paper/gtk-3.0/widgets/_scales.scss

@@ -11,7 +11,6 @@
   &:insensitive,
   &:disabled {
     background-color: $insensitive_bg_color;
-    box-shadow: none;
   }
 
   &:backdrop {
@@ -46,11 +45,12 @@
   box-shadow: 0px 1px $bottom_highlight;
   border-radius: 2px;
   margin: 6px 0;
+  padding:0;
 
   &:insensitive,
   &:disabled {
-    background-color: transparent;
+    border: 1px solid darken($borders_color, 15%);
-    border-color: transparent;
+    background-color: darken($bg_color, 20%);
   }
 
   &:backdrop,
@@ -84,14 +84,11 @@ scale {
   $_marks_length: 6px;
   $_marks_distance: 6px;
 
-
   -GtkScale-slider-length: 16px;
   -GtkRange-slider-width: 16px;
   -GtkRange-trough-border: 0px;
 
-  min-height: 10px;
+  max-height: 8px;
-  min-width: 10px;
-  padding: 12px;
 
   // those are inside the trough node, I need them to show their own border over the trough one, so negative margin
   fill,
@@ -173,7 +170,6 @@ scale {
 
 
   // The coloured part of the Trough
-  fill,
   .highlight,
   highlight {
     @extend %scale_highlight;

Paper/gtk-3.0/widgets/_spinbuttons.scss

@@ -15,6 +15,7 @@ spinbutton {
       min-width: 28px;
       // reset all the other props since the spinbutton node is styled here
       margin: 0;
+      padding:2px;
       background: none;
       background-color: transparent;
       border: none;
@@ -77,7 +78,6 @@ spinbutton {
       border-color: transparentize($osd_borders_color, 0.3);
       border-radius: 0;
       box-shadow: none;
-      -gtk-icon-shadow: 0 1px black;
 
       &:dir(rtl) { border-style: none solid none none; }
 
@@ -87,7 +87,6 @@ spinbutton {
         color: $osd_fg_color;
         border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
         background-color: transparentize($osd_fg_color, 0.9);
-        -gtk-icon-shadow: 0 1px black;
         box-shadow: none;
       }
 
@@ -96,7 +95,6 @@ spinbutton {
 
         color: $osd_fg_color;
         border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
-        -gtk-icon-shadow: none;
         box-shadow: none;
       }
 
@@ -105,7 +103,6 @@ spinbutton {
 
         color: $osd_insensitive_fg_color;
         border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
-        -gtk-icon-shadow: none;
         box-shadow: none;
       }
 
@@ -153,6 +150,7 @@ spinbutton {
       &:hover {
         background-color:$selected_bg_color;
         color: $selected_fg_color;
+        -gtk-icon-shadow:none;
       }
 
       &:active {

Paper/gtk-3.0/widgets/_switches.scss

@@ -2,8 +2,8 @@
  * Switch *
  **********/
 GtkSwitch {
-  -GtkSwitch-slider-width: 20;
+  -GtkSwitch-slider-width: 16px;
-  -GtkSwitch-slider-height: 20;
+  -GtkSwitch-slider-height: 16px;
 }
 
 GtkSwitch,
@@ -57,8 +57,8 @@ switch {
   .slider,
   slider {
     padding:2px;
-    min-width: 24px;
+    min-width: 16px;
-    min-height: 24px;
+    min-height: 16px;
     border-radius: 50%;
     transition: $button_transition;
     background-color: $base_color;
@@ -70,23 +70,12 @@ switch {
       padding:2px;
       box-shadow:none;
       background-color:$base_color;
-      border:1px solid transparentize(black, 0.8);
     }
   }
 
-  &:hover {
+  &:checked slider { }
-    .slider,
-    slider { 
-      box-shadow: 0 2px 4px transparentize(black, 0.8),
-                  0 1px 3px transparentize(black, 0.8);
-    }
-  }
-
-  &:checked slider { border: 1px solid $selected_borders_color; }
 
   &:backdrop {
-    &:checked slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); }
-    &:disabled slider { @include button(backdrop-insensitive); }
   }
 
   row:selected & {

Paper/gtk-3.0/widgets/_windows.scss

@@ -49,7 +49,7 @@ decoration {
     border-radius: 0;
     margin: 4px;
     background-color: $backdrop_bg_color;
-    border: solid 1px $backdrop_borders_color;
+    border: 0px solid $backdrop_borders_color;
     box-shadow: none;
   }
 }