From 744773b3d37ad900283d4a210d3e89725a7f2a27 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 23 Apr 2023 18:04:44 -0700 Subject: [PATCH 1/6] CSS Modules example: overflow --- modules/overflow.html | 172 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 modules/overflow.html diff --git a/modules/overflow.html b/modules/overflow.html new file mode 100644 index 00000000..90020584 --- /dev/null +++ b/modules/overflow.html @@ -0,0 +1,172 @@ + + + + + + Overflow + + + +
+
Select options: + + + + +
Scroll programatically: + + + +
+
+ 
 
+    Oh, Rubber Duckie, you're the one
+    You make bath time lots of fun
+    Rubber Duckie, I'm awfully fond of you
+    
+    Rubber Duckie, joy of joys
+    When I squeeze you, you make noise
+    Rubber Duckie, you're my very best friend, it's true
+    
+    Oh, every day when I make my way to the tubby
+    I find a little fella who's cute and yellow and chubby
+    Rub-a-dub-dubby
+    
+    Rubber Duckie, you're so fine
+    And I'm lucky that you're mine
+    Rubber Duckie, I'm awfully fond of you
+
+
+ + + From 773cea42e77e3e8ef7fbe5665640a47beb1bb9b4 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 23 Apr 2023 18:11:02 -0700 Subject: [PATCH 2/6] shrink title so it doesn't always overflow --- modules/overflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/overflow.html b/modules/overflow.html index 90020584..edb413f2 100644 --- a/modules/overflow.html +++ b/modules/overflow.html @@ -33,7 +33,7 @@ color: white; background: crimson; display: inline-block; - width: 100%; + min-width: 50%; padding: 3px 5px; box-sizing: border-box; } From 95308ff1b90284df5351df9bfff821b3f2ce3e2c Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 23 Apr 2023 18:17:05 -0700 Subject: [PATCH 3/6] prettier --- modules/overflow.html | 291 ++++++++++++++++++++++-------------------- 1 file changed, 153 insertions(+), 138 deletions(-) diff --git a/modules/overflow.html b/modules/overflow.html index edb413f2..63f70216 100644 --- a/modules/overflow.html +++ b/modules/overflow.html @@ -5,112 +5,128 @@ Overflow
-
Select options: -
From ecc29d5bbe03cbdd22091ed863080094ea50f995 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 23 Apr 2023 18:19:32 -0700 Subject: [PATCH 4/6] keep scroll position when changing views --- modules/overflow.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/modules/overflow.html b/modules/overflow.html index 63f70216..e16095bd 100644 --- a/modules/overflow.html +++ b/modules/overflow.html @@ -158,10 +158,12 @@ } else { pre.className = `${val.value}`; } + scrollExample(); }); wide.addEventListener("change", () => { pre.classList.toggle("wide"); + scrollExample(); }); ocm.addEventListener("change", () => { From a50301c3278cbe86459dccd022ad314ffa4a7eae Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 23 Apr 2023 18:26:48 -0700 Subject: [PATCH 5/6] force clipMargin --- modules/overflow.html | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/modules/overflow.html b/modules/overflow.html index e16095bd..81fd0269 100644 --- a/modules/overflow.html +++ b/modules/overflow.html @@ -17,7 +17,7 @@ pre { border: 2px dashed crimson; - height: 100px; + height: 150px; width: 20em; margin-bottom: 3em; overflow-clip-margin: 1em; @@ -159,6 +159,7 @@ pre.className = `${val.value}`; } scrollExample(); + clipMargin(); }); wide.addEventListener("change", () => { @@ -167,7 +168,7 @@ }); ocm.addEventListener("change", () => { - pre.style.overflowClipMargin = `${ocm.value}em`; + clipMargin(); }); scrollL.addEventListener("change", () => { @@ -179,11 +180,15 @@ function scrollExample() { pre.scrollTo({ - top: scrollT.value * 26, + top: scrollT.value, left: scrollL.value * 2, behavior: "smooth", }); } + + function clipMargin() { + pre.style.overflowClipMargin = `${ocm.value}em`; + } From 739740b1d9df9268b979c2cbdd6c523f48aebe8f Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 23 Apr 2023 22:39:22 -0700 Subject: [PATCH 6/6] duplicate overflow values --- modules/overflow.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/modules/overflow.html b/modules/overflow.html index 81fd0269..5bbca06e 100644 --- a/modules/overflow.html +++ b/modules/overflow.html @@ -39,43 +39,43 @@ } .hidden { - overflow: hidden; + overflow: hidden hidden; } .hidden::before { content: "hidden: "; } .clip { - overflow: clip; + overflow: clip clip; } .clip::before { content: "clip: "; } .scroll { - overflow: scroll; + overflow: scroll scroll; } .scroll::before { content: "scroll: "; } .auto { - overflow: auto; + overflow: auto auto; } .auto::before { content: "auto: "; } .overlay { - overflow: clip; - overflow: overlay; + overflow: clip clip; + overflow: overlay overlay; } .overlay::before { content: "overlay (or clip if not supported): "; } .visible { - overflow: visible; + overflow: visible visible; } .visible::before { content: "visible: ";