From 984cb14e74d75576156ec052cfd8bcd4913d91d5 Mon Sep 17 00:00:00 2001
From: Kaden <69081152+webcrawls@users.noreply.github.com>
Date: Wed, 8 May 2024 13:04:58 -0400
Subject: [PATCH 01/19] fix: update `border-image-slice` value when fill is
toggled (fixes #63) (#175)
fix: update `border-image-slice` value when fill is toggled
---
tools/border-image-generator/script.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/tools/border-image-generator/script.js b/tools/border-image-generator/script.js
index a998df35..bdc034c3 100644
--- a/tools/border-image-generator/script.js
+++ b/tools/border-image-generator/script.js
@@ -1109,6 +1109,7 @@ var BorderImage = (function BorderImage() {
if (value === true) bimgslice += " fill";
preview.style.borderImageSlice = bimgslice;
+ setOutputCSS("slice", bimgslice);
};
var updateBorderWidth = function updateBorderWidth() {
From eff2d4b4d5fb489cff80ad763e3b5425ced41cfa Mon Sep 17 00:00:00 2001
From: Kaden <69081152+webcrawls@users.noreply.github.com>
Date: Wed, 8 May 2024 13:13:04 -0400
Subject: [PATCH 02/19] feat: add 'copy css' button to
tools/border-image-generator (#174)
* feat: add 'click to copy CSS' button to tools/border-image-generator
* fix: replace `mousedown` listener with `onclick`
* `mousedown` triggers for both right and middle-clicks, which does not align with the UX of a button. `onclick` is a more 'canonical' option.
* fix: correct `click` listener typo
* Fix code style
---------
Co-authored-by: Vadim Makeev
---
tools/border-image-generator/index.html | 4 +++-
tools/border-image-generator/script.js | 20 ++++++++++++++++++++
tools/border-image-generator/styles.css | 19 +++++++++++++++++++
3 files changed, 42 insertions(+), 1 deletion(-)
diff --git a/tools/border-image-generator/index.html b/tools/border-image-generator/index.html
index f61a6610..c478509d 100644
--- a/tools/border-image-generator/index.html
+++ b/tools/border-image-generator/index.html
@@ -148,7 +148,9 @@
-
CSS Code
+
+ CSS Code
+
border-image-slice:
diff --git a/tools/border-image-generator/script.js b/tools/border-image-generator/script.js
index bdc034c3..80340681 100644
--- a/tools/border-image-generator/script.js
+++ b/tools/border-image-generator/script.js
@@ -1267,6 +1267,25 @@ var BorderImage = (function BorderImage() {
}
};
+ var initCodeOutput = function initCodeOutput() {
+ var copyButton = getElemById("copy-css");
+
+ var copy = function copy() {
+ let output = "";
+
+ for (const property of document.querySelectorAll(".css-property")) {
+ const name = property.querySelector(".name").innerText;
+ const value = property.querySelector(".value").innerText;
+
+ output += name + " " + value + "\n";
+ }
+
+ navigator.clipboard.writeText(output);
+ };
+
+ copyButton.addEventListener("click", copy);
+ };
+
var init = function init() {
var gallery = (subject = getElemById("subject"));
preview = getElemById("preview");
@@ -1281,6 +1300,7 @@ var BorderImage = (function BorderImage() {
initBorderSliceControls();
initBorderWidthControls();
initBorderOutsetControls();
+ initCodeOutput();
var elem = document.querySelectorAll(".guideline");
var size = elem.length;
diff --git a/tools/border-image-generator/styles.css b/tools/border-image-generator/styles.css
index bd0f419e..833ef4e8 100644
--- a/tools/border-image-generator/styles.css
+++ b/tools/border-image-generator/styles.css
@@ -972,6 +972,25 @@ body[data-move="Y"] {
color: #aaa;
}
+#output .title #copy-css {
+ float: right;
+
+ background-color: unset;
+ color: inherit;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ box-shadow: 0 0 3px 0 #bababa;
+}
+
+#controls .category:hover #copy-css:not(:hover) {
+ color: #aaa;
+}
+
+#output .title #copy-css:hover {
+ cursor: pointer;
+ color: #777;
+}
+
#output .css-property {
width: 100%;
margin: 0;
From 84ab8c4fdf3411242b940aec801702b9642e294c Mon Sep 17 00:00:00 2001
From: Ragul <67683723+ragul1697@users.noreply.github.com>
Date: Thu, 23 May 2024 14:32:09 +0530
Subject: [PATCH 03/19] Fix CSS Normal Flow: Inline demo (#182)
* Update inline.html
Fixes the issue #33705 in mdn / content.
* Update inline.html
Fixes the issue textarea changes not being responsive
* Remove extra spaces
---------
Co-authored-by: Vadim Makeev
---
flow/block-inline/inline.html | 10 ++--------
1 file changed, 2 insertions(+), 8 deletions(-)
diff --git a/flow/block-inline/inline.html b/flow/block-inline/inline.html
index ee12ea22..6081cf5c 100644
--- a/flow/block-inline/inline.html
+++ b/flow/block-inline/inline.html
@@ -72,35 +72,29 @@
-
Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”