Phasing out historical pat-bumper, fixes for auto hide toolbars

Update _toolbar.scss, add bordered option
Make radio input clickable also by clicking on the invisible input itself

Author: emmanuelkaufmann

components/_breadcrumbs.scss

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 .pat-breadcrumbs {
 
   @include screen-size(small) {

components/_checklist.scss

@@ -117,6 +117,7 @@ $pat-checklist-padding-end: 0 !default;
 		width: 0;
 		// margin-top: 0.6px;
 		height: 100%;
+		grid-area: icon;
 	}
 }
 

components/_toolbar.scss

@@ -12,8 +12,8 @@ $pat-toolbar-icon-text-colour: rgba(0,0,0,0.6) !default;
 $pat-toolbar-icon-text-colour-hover: black !default;
 $pat-toolbar-bump-distance: 100px !default;
 $pat-toolbar-bump-distance-scroll-down: 100px !default;
-$pat-toolbar-top-distance: -1px !default;
-$pat-toolbar-top-distance-scroll-down: -1px !default;
+$pat-toolbar-top-distance: 20px !default;
+$pat-toolbar-top-distance-scroll-down: 20px !default;
 $pat-toolbar-hiding-speed: 0.3s !default;
 $pat-toolbar-box-shadow: 0 0 3px rgba(0, 0, 0, 0) !default;
 $pat-button-cluster-toggle-margin: 3px !default;
@@ -175,59 +175,70 @@ $pat-toolbar-z-index: 2 !default;
 		padding: 0;
 	}
 
-	&.pat-bumper {
-		-webkit-position: sticky;
+	// &.pat-bumper {
+	// 	-webkit-position: sticky;
+	// 	position: sticky;
+	// 	padding-top: var(--pat-toolbar-bump-distance);
+	// 	margin-top: calc(-1 * var(--pat-toolbar-bump-distance));
+	// 	top: var(--pat-toolbar-top-distance);
+	// 	transition: top $pat-toolbar-hiding-speed;
+
+	// 	.scrolling-down &,
+	// 	.scroll-down & {
+	// 		top: var(--pat-toolbar-top-distance-scroll-down);
+	// 		padding-top: var(--pat-toolbar-bump-distance-scroll-down);
+	// 	}
+
+	// 	&:before {
+	// 		position: absolute;
+	// 		left: calc(-1 * var(--pat-toolbar-padding));
+	// 		right: calc(-1 * var(--pat-toolbar-padding));
+	// 		top: calc(var(--pat-toolbar-bump-distance) - 1.5 * var(--pat-toolbar-padding));
+	// 		bottom: calc(-0.5 * var(--pat-toolbar-padding));
+	// 		border-radius: $border-radii;
+	// 		transition: all 1s;
+	//       	box-shadow: 0 0 3px rgba(0, 0, 0, 0);
+	//       	content: ' ';
+	//       	display: block;
+	// 		background-color: rgba(255,255,255,0.9);
+	// 		z-index: -1;
+
+	// 		.backdropfilter & {
+	// 			background-color: rgba(255,255,255,0.8);
+	// 			-webkit-backdrop-filter: blur(10px) saturate(4) brightness(1.2);
+	// 			backdrop-filter: blur(10px) saturate(4) brightness(1.2);
+	// 		}
+	// 	}
+
+	//     &.bumped,
+	//     &.tiptap-focus {
+	//     	&:before {
+	//     		opacity: 1;
+	//     	}
+
+	//     	.toolbar-title.auto-hide {
+	//     		opacity: 1;
+	//     	}
+	//     }
+	// }
+
+	&.bordered {
+		&:before {
+			opacity: 1;
+		}
+	}
+
+	&.sticky {
 		position: sticky;
-		padding-top: var(--pat-toolbar-bump-distance);
-		margin-top: calc(-1 * var(--pat-toolbar-bump-distance));
 		top: var(--pat-toolbar-top-distance);
-		transition: top $pat-toolbar-hiding-speed;
+		transition: top #{$pat-toolbar-hiding-speed};
 
 		.scrolling-down &,
 		.scroll-down & {
 			top: var(--pat-toolbar-top-distance-scroll-down);
-			padding-top: var(--pat-toolbar-bump-distance-scroll-down);
+			// padding-top: var(--pat-toolbar-bump-distance-scroll-down);
 		}
 
-		&:before {
-			position: absolute;
-			left: calc(-1 * var(--pat-toolbar-padding));
-			right: calc(-1 * var(--pat-toolbar-padding));
-			top: calc(var(--pat-toolbar-bump-distance) - 1.5 * var(--pat-toolbar-padding));
-			bottom: calc(-0.5 * var(--pat-toolbar-padding));
-			border-radius: $border-radii;
-			transition: all 1s;
-	      	box-shadow: 0 0 3px rgba(0, 0, 0, 0);
-	      	content: ' ';
-	      	display: block;
-			background-color: rgba(255,255,255,0.9);
-			z-index: -1;
-
-			.backdropfilter & {
-				background-color: rgba(255,255,255,0.8);
-				-webkit-backdrop-filter: blur(10px) saturate(4) brightness(1.2);
-				backdrop-filter: blur(10px) saturate(4) brightness(1.2);
-			}
-		}
-
-	    &.bumped,
-	    &.tiptap-focus {
-	    	&:before {
-	    		opacity: 1;
-	    	}
-
-	    	.toolbar-title.auto-hide {
-	    		opacity: 1;
-	    	}
-	    }
-	}
-
-	&.sticky {
-		-webkit-position: sticky;
-		position: sticky;
-		top: var(--pat-toolbar-auto-hide-offset);
-		transition: top 0.4s;
-
 		&:before {
 			transition: all 1s;
 		}