August 2022 Snapshot 2

Author: ama39

css/base.css

@@ -112,7 +112,7 @@ function autoTOC(origin_target,toc_target) {
 function codeCopySetup(selectors) {
 
 	jQuery(document).ready(function($) {
-	
+		
 		$(selectors).addClass('code-copy');
 		$('.code-copy').before('<button class="button-copy enabled"><span class="sr-only">Copy Code</span></button>');
 
@@ -127,11 +127,17 @@ function codeCopySetup(selectors) {
 				var markup = $(copy_target).prop('outerHTML').toString();
 				try {
 					navigator.clipboard.writeText(markup);
+					$(this).addClass('success');
 				}
 				catch (err) {
 					console.log('Error while copying to clipboard: ' + err);
+					$(this).addClass('failure');
 				}
 				$(copy_target).addClass('code-copy');
+				var this_button = $(this);
+				setTimeout(function() {
+					$(this_button).removeClass('success failure');
+				},1000);
 			});
 		});
 	});

css/base.css.map

@@ -3893,6 +3893,11 @@ body > footer .social img, #body-footer .social img {
 .footer-accessibility:before {
 	content: '\f29a';
 }
+body > footer .two-col, body > footer .two-col > *, #body-footer .two-col, #body-footer .two-col > *, 
+body > footer .three-col, body > footer .three-col > *, #body-footer .three-col, #body-footer .three-col > * {
+	margin: 0;
+	padding-bottom: 0 !important;
+}
 
 #main article .full-window {
 	margin: 56px 0;
@@ -4194,11 +4199,6 @@ body > footer .h5, #body-footer .h5 {
 body > footer, #body-footer {
 	font-size: 14px;
 }
-body > footer .two-col, body > footer .two-col > *, #body-footer .two-col, #body-footer .two-col > *, 
-body > footer .three-col, body > footer .three-col > *, #body-footer .three-col, #body-footer .three-col > * {
-	margin: 0;
-	padding-bottom: 0 !important;
-}
 
 /* Blockquote */
 blockquote.offset {

css/cwd_utilities.css

@@ -1191,7 +1191,7 @@ button.button-copy {
 		color: #000;
 	}
 	&:active {
-		background: #ddd;
+		background: #fff;
 		border-color: #888;
 		color: #666;
 	}
@@ -1208,15 +1208,17 @@ button.button-copy {
 		& + .code-copy {
 			outline: 3px double rgba(0,0,0,0);
 			outline-offset: 5px;
-			transition: outline-color 0.15s;
+			transition: none;
 		}
-		&:hover + .code-copy, &:focus + .code-copy {
+		&:hover + .code-copy {
 			outline: 3px double rgba(0,0,0,0.35);
-			outline-offset: 5px
+			outline-offset: 5px;
+			transition: outline-color 0.15s;
 		}
 		&:active + .code-copy {
 			outline: 3px double rgba(0,0,0,0.9);
-			outline-offset: 5px
+			outline-offset: 5px;
+			transition: outline-color 0.15s;
 		}
 
 		&.right {
@@ -1227,4 +1229,39 @@ button.button-copy {
 		}
 	}
 
+	&:after {
+		font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
+		font-size: inherit;
+		speak: never;
+		text-rendering: auto;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		content: '';
+		color: #fff;
+		background: #222222;
+		font-size: 16px;
+		width: 1.5em;
+		height: 1.5em;
+		line-height: 1.5;
+		text-align: center;
+		border-radius: 100%;
+		position: absolute;
+		transform: translate(-3px, -20px);
+		opacity: 0;
+		display: none;
+		
+	}
+	&.success:after {
+		background: #008800;
+		content: '\f108';
+		opacity: 1;
+		display: inline-block;
+	}
+	&.failure:after {
+		background: #cc0000;
+		content: '\f1f2';
+		opacity: 1;
+		display: inline-block;
+	}
+	
 }