From 2ffd2e4628bb7559b2f159747bb643aee6d83f1a Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Wed, 27 Sep 2023 09:54:13 +0100 Subject: [PATCH] improve example page, fix axe violations --- examples/index.html | 87 +++++++++++++++++++++++++++++++-------------- 1 file changed, 60 insertions(+), 27 deletions(-) diff --git a/examples/index.html b/examples/index.html index 94d347d..c5ff933 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,5 +1,5 @@ - - + + Clipboard copy examples @@ -8,46 +8,79 @@ clipboard-copy { -webkit-appearance: button; -moz-appearance: button; - padding: 0.2em 0.6em; - font: 11px system-ui, sans-serif; + padding: 0.4em 0.6em; + font: 0.9rem system-ui, sans-serif; display: inline-block; cursor: default; + color: rgb(36, 41, 47); + background: rgb(246, 248, 250); + border-radius: 6px; + border: 1px solid rgba(31, 35, 40, 0.15); + box-shadow: rgba(31, 35, 40, 0.04) 0 1px 0 0, rgba(255, 255, 255, 0.25) 0 1 0 0 inset; + } + clipboard-copy:hover { + background: rgb(243, 244, 246); + } + clipboard-copy:active { + background: #ebecf0; + } + clipboard-copy:focus-visible { + outline: 2px solid #0969da; + } + .textarea { + margin-top: 30px; + display: block; } - .textarea { margin-top: 30px; display: block; } -

Demo

-

Copy from value attribute:

- - Copy - - +
+

Demo

+
+

Copy from value attribute:

+ + Copy + + +
+
-

Copy from an element specified by the for attribute:

- - Copy - - -
@hubot copied from <div>
+
+

Copy from an element specified by the for attribute:

+
@hubot copied from <div>
+ + Copy + + +
+
-

Copy from an input element specified by the for attribute:

- - Copy - - - +
+
+ + Copy + + +
+
- +
+ +