remove redundant styles

Author: zouyu4524

_includes/scripts/lib/copy-to-clipboard.js

@@ -1,6 +1,4 @@
 (function() {
-	// This script is built on clipboard.js, cf: https://clipboardjs.com/
-	// 1. find all code blocks defined under snippet class
 	var snippets = document.querySelectorAll('pre');
 	[].forEach.call(snippets, function(snippet) {
 		if (snippet.closest('.snippet') !== null) {
@@ -20,12 +18,13 @@
 		showTooltip(e.trigger, fallbackMessage(e.action));
 	});
 
-	// 2. add event listener for all created copy button
 	var btns = document.querySelectorAll('.btn');
 	for (var i = 0; i < btns.length; i++) {
 		btns[i].addEventListener('mouseleave', clearTooltip);
 		btns[i].addEventListener('blur', clearTooltip);
-		btns[i].addEventListener('mouseenter', showToolhint);
+		btns[i].addEventListener('mouseenter', function(e) {
+			showTooltip(e.currentTarget, "copy to clipboard")
+		}, false);
 	}
 
 	function clearTooltip(e) {
@@ -38,11 +37,6 @@
 		elem.setAttribute('aria-label', msg);
 	}
 
-	function showToolhint(e) {
-		e.currentTarget.setAttribute('class', 'btn tooltipped tooltipped-s');
-		e.currentTarget.setAttribute('aria-label', 'copy to clipboard');
-	}
-
 	function fallbackMessage(action) {
 		var actionMsg = '';
 		var actionKey = (action === 'cut' ? 'X' : 'C');

_posts/2019-10-02-copy-to-clipboard.md

@@ -1,4 +1,3 @@
-/*styles related to tooltips, borrowed from https://clipboardjs.com/bower_components/primer-css/css/primer.css*/
 .tooltipped {
 	position: relative
 }
@@ -8,7 +7,8 @@
 	z-index: 1000000;
 	display: none;
 	padding: 5px 8px;
-	font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+	font: arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+	font-size: map-get($base, font-size-sm);
 	color: #fff;
 	text-align: center;
 	text-decoration: none;
@@ -41,122 +41,26 @@
 	text-decoration: none
 }
 
-.tooltipped-multiline:hover:after, .tooltipped-multiline:active:after, .tooltipped-multiline:focus:after {
-	display: table-cell
-}
-
-.tooltipped-s:after, .tooltipped-se:after, .tooltipped-sw:after {
+.tooltipped-s:after {
 	top: 100%;
 	right: 50%;
 	margin-top: 5px
 }
 
-.tooltipped-s:before, .tooltipped-se:before, .tooltipped-sw:before {
+.tooltipped-s:before {
 	top: auto;
 	right: 50%;
 	bottom: -5px;
 	margin-right: -5px;
 	border-bottom-color: rgba(0, 0, 0, .8)
 }
 
-.tooltipped-se:after {
-	right: auto;
-	left: 50%;
-	margin-left: -15px
-}
-
-.tooltipped-sw:after {
-	margin-right: -15px
-}
-
-.tooltipped-n:after, .tooltipped-ne:after, .tooltipped-nw:after {
-	right: 50%;
-	bottom: 100%;
-	margin-bottom: 5px
-}
-
-.tooltipped-n:before, .tooltipped-ne:before, .tooltipped-nw:before {
-	top: -5px;
-	right: 50%;
-	bottom: auto;
-	margin-right: -5px;
-	border-top-color: rgba(0, 0, 0, .8)
-}
-
-.tooltipped-ne:after {
-	right: auto;
-	left: 50%;
-	margin-left: -15px
-}
-
-.tooltipped-nw:after {
-	margin-right: -15px
-}
-
-.tooltipped-s:after, .tooltipped-n:after {
+.tooltipped-s:after {
 	-webkit-transform: translateX(50%);
 	-ms-transform: translateX(50%);
 	transform: translateX(50%)
 }
 
-.tooltipped-w:after {
-	right: 100%;
-	bottom: 50%;
-	margin-right: 5px;
-	-webkit-transform: translateY(50%);
-	-ms-transform: translateY(50%);
-	transform: translateY(50%)
-}
-
-.tooltipped-w:before {
-	top: 50%;
-	bottom: 50%;
-	left: -5px;
-	margin-top: -5px;
-	border-left-color: rgba(0, 0, 0, .8)
-}
-
-.tooltipped-e:after {
-	bottom: 50%;
-	left: 100%;
-	margin-left: 5px;
-	-webkit-transform: translateY(50%);
-	-ms-transform: translateY(50%);
-	transform: translateY(50%)
-}
-
-.tooltipped-e:before {
-	top: 50%;
-	right: -5px;
-	bottom: 50%;
-	margin-top: -5px;
-	border-right-color: rgba(0, 0, 0, .8)
-}
-
-.tooltipped-multiline:after {
-	width: -webkit-max-content;
-	width: -moz-max-content;
-	width: max-content;
-	max-width: 250px;
-	word-break: break-word;
-	word-wrap: normal;
-	white-space: pre-line;
-	border-collapse: separate
-}
-
-.tooltipped-multiline.tooltipped-s:after, .tooltipped-multiline.tooltipped-n:after {
-	right: auto;
-	left: 50%;
-	-webkit-transform: translateX(-50%);
-	-ms-transform: translateX(-50%);
-	transform: translateX(-50%)
-}
-
-.tooltipped-multiline.tooltipped-w:after, .tooltipped-multiline.tooltipped-e:after {
-	right: 100%
-}
-
-/*styles related to snippet copy to clipboard, borrowed from https://clipboardjs.com/assets/styles/main.css*/
 .clippy {
 	margin-top: -3px;
 	position: relative;