Core Style: Add styles for CodePen button (issue #1102)

w3c · Sep 15, 2020 · 0abccfb · 0abccfb
1 parent 203a833
commit 0abccfb
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 5 deletions.
diff --git a/examples/css/core.css b/examples/css/core.css
@@ -40,3 +40,72 @@ table.data.attributes tbody th,
 table.data.attributes tbody td {
   border: 1px solid silver;
 }
+
+/* CodePen button */
+.example-header {
+  display: flex;
+  align-items: center;
+  margin-top: 3rem;
+  page-break-after: avoid;
+  page-break-inside: avoid;
+  font: 100% sans-serif;
+  font-family: inherit;
+  line-height: 1.2;
+  hyphens: manual;
+}
+
+.example-header h2 {
+  margin: 0;
+}
+
+.example-header h2 + * {
+  margin-left: 1em;
+}
+
+form[action^="https://codepen.io/"] button {
+  display: inline-block;
+  position: relative;
+  padding: 0.4em 0.7em;
+  border: 1px solid hsl(213, 71%, 49%);
+  border-radius: 5px;
+  box-shadow: 0 1px 2px hsl(216, 27%, 55%);
+  color: #fff;
+  font-size: inherit;
+  text-shadow: 0 -1px 1px hsl(216, 27%, 25%);
+  background-color: hsl(216, 82%, 51%);
+  background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
+}
+
+form[action^="https://codepen.io/"] button:hover {
+  border-color: hsl(213, 71%, 29%);
+  background-color: hsl(216, 82%, 31%);
+  background-image: linear-gradient(to bottom, hsl(216, 82%, 33%), hsl(216, 82%, 27%));
+  cursor: default;
+}
+
+form[action^="https://codepen.io/"] button:focus {
+  outline: none;
+}
+
+form[action^="https://codepen.io/"] button:focus::before {
+  position: absolute;
+  z-index: -1;
+
+  /* button border width - outline width - offset */
+  top: calc(-1px - 3px - 3px);
+  right: calc(-1px - 3px - 3px);
+  bottom: calc(-1px - 3px - 3px);
+  left: calc(-1px - 3px - 3px);
+  border: 3px solid hsl(213, 71%, 49%);
+
+  /* button border radius + outline width + offset */
+  border-radius: calc(5px + 3px + 3px);
+  content: '';
+}
+
+form[action^="https://codepen.io/"] button:active {
+  border-color: hsl(213, 71%, 49%);
+  background-color: hsl(216, 82%, 31%);
+  background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
+  box-shadow: inset 0 3px 5px 1px hsl(216, 82%, 30%);
+}
diff --git a/examples/slider/multithumb-slider.html b/examples/slider/multithumb-slider.html
@@ -46,11 +46,13 @@ <h1>Horizontal Multi-Thumb Slider Example</h1>
       </li>
     </ul>
     <section>
-      <h2 id="ex_label">Example</h2>
-      <form action="https://codepen.io/pen/define" method="POST" target="_blank">
-        <input id="editCode" type="hidden" name="data">
-        <input type="submit" value="Open in CodePen">
-      </form>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+        <form action="https://codepen.io/pen/define" method="POST" target="_blank">
+          <input id="editCode" type="hidden" name="data">
+          <button>Open in CodePen</button>
+        </form>
+      </div>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <div id="ex1">
         <h3>Hotel Price Range</h3>