From cc0ab5bb069cc1d69c048b8a3490179789b1a35c Mon Sep 17 00:00:00 2001 From: Artur Bien Date: Sat, 25 Mar 2023 23:07:07 +0100 Subject: [PATCH] feat: button icons disabled state --- README.md | 45 ++++++++++++++++++++++++++++---------------- docs/index.html.ejs | 28 +++++++++++++++++++++++++++ docs/mail-icon.png | Bin 0 -> 1282 bytes style.css | 12 ++++++++++++ 4 files changed, 69 insertions(+), 16 deletions(-) create mode 100644 docs/mail-icon.png diff --git a/README.md b/README.md index 3fa4de2..95c647e 100644 --- a/README.md +++ b/README.md @@ -18,24 +18,37 @@ The easiest way to use 98.css is to import it from [unpkg](https://unpkg.com/). ```html - - 98.css example - - - - - -
-
-
- My First VB4 Program + + 98.css example + + + + + +
+
+
My First VB4 Program
+
+
+

Hello, world!

-
-

Hello, world!

-
-
- + + + + + + + + + + + + ``` diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 9568d56..d78f9c8 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -167,6 +167,19 @@

<%- example(`I am focused`) %> + +

+ Images and elements with [role=img] inside the button will get disabled state when the button is disabled. +

+ + <%- example(` + + + `) %>
@@ -987,5 +1000,20 @@ subscribing to more fun things on my twitter. 👋

+ + + + + + + + + + + diff --git a/docs/mail-icon.png b/docs/mail-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..484c3b031376cceee44f4fac9c4dcea450f3bf3e GIT binary patch literal 1282 zcmX|BeN>WX6bB?!%4O&uL1{{a8fwC8>B1T!EnZ`N;8LS4P5dZmC#;=d(pd^4#qbOI z;GN3sh^6ymCp(3LwwHCbKc0_!fA{|GeeQFgN4bCR z?hq^ii$EYkKsJjDuSxz9gn{QA)VoRq0&N3X>7PrG4^0=2u1g8s^=ReyiWUt%r`Lr( zxjmR-YY96eix2Nfc;o{M=9;pWqd@s3y?KQiBW7TjY@Pr}@5Q>$zN-O(^rj$X1&^xam=dsX<2ZU`C znf_W;4pz)A-0zLQ$Za>AN?o5CSr`AIh;MUCn@D{iY7+@11Ei7TSVpHB{vb zx^F0hu1yfuwbi3%Xu+iSZOHH=PZwMKCIP5pzTyA#K!Jti)eVdpbwmoA(3BiijzRxw zd}vPsCL_c#M3J~BEC-B27HpLiSz9f4fZ!ISiEm#83{LfdHJzk-#>`|bg;X;^_zA*) zwW^FNr0QlA>^z;&7hRwZ<_*hqH`_i>kL-CKFWa%0H|=x(;z;YNI(SwWRl+vf~a zOcu-2zN4hft;Of1P=c414F($d`# z0RQE{O)7A$%6a!N9-G|g`IjNX&3@cKm| zO>>x3%3ao*t$yP^`y38z3fJj9-^dRZ_u4o|G_b1;I|9JLAR7s$J*W4amFHpqzHtsw X7{D6RgBykL--ZBp?Pc{a^JV`4FH%ZB literal 0 HcmV?d00001 diff --git a/style.css b/style.css index 12cf871..fb9076c 100644 --- a/style.css +++ b/style.css @@ -200,6 +200,11 @@ input[type="reset"]:disabled, text-shadow: 1px 1px 0 var(--button-highlight); } +button:disabled img, +button:disabled [role="img"] { + filter: url("#disabled-filter-98css"); +} + .window { box-shadow: var(--border-window-outer), var(--border-window-inner); background: var(--surface); @@ -885,3 +890,10 @@ table > tbody > tr > * { padding: 0 var(--grouped-element-spacing); height: 14px; } + +#filters-98css { + position: absolute; + pointer-events: none; + top: 0; + left: 0; +} \ No newline at end of file