Skip to content

Commit 9e78cf3

Browse files
arturbienarturbien
committed
feat: button icons disabled state
1 parent 94688d0 commit 9e78cf3

4 files changed

Lines changed: 72 additions & 16 deletions

File tree

‎README.md‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,40 @@ The easiest way to use 98.css is to import it from [unpkg](https://unpkg.com/).
1818
```html
1919
<!DOCTYPE html>
2020
<html>
21-
<head>
22-
<title>98.css example</title>
23-
<meta charset="UTF-8" />
24-
<link rel="stylesheet" href="https://unpkg.com/98.css" />
25-
</head>
26-
27-
<body>
28-
<div class="window" style="margin: 32px; width: 250px">
29-
<div class="title-bar">
30-
<div class="title-bar-text">
31-
My First VB4 Program
21+
<head>
22+
<title>98.css example</title>
23+
<meta charset="UTF-8" />
24+
<link rel="stylesheet" href="https://unpkg.com/98.css" />
25+
</head>
26+
27+
<body>
28+
<div class="window" style="margin: 32px; width: 250px">
29+
<div class="title-bar">
30+
<div class="title-bar-text">My First VB4 Program</div>
31+
</div>
32+
<div class="window-body">
33+
<p>Hello, world!</p>
3234
</div>
3335
</div>
34-
<div class="window-body">
35-
<p>Hello, world!</p>
36-
</div>
37-
</div>
38-
</body>
36+
37+
<svg id="filters-98css">
38+
<defs>
39+
<filter id="disabled-filter-98css">
40+
<feColorMatrix
41+
type="matrix"
42+
values="1 0 0 0 0
43+
0 1 0 0 0
44+
0 0 1 0 0
45+
-21.25 -71.54 -7.21 40 0"
46+
result="color-matrix"
47+
/>
48+
<feFlood flood-color="grey" result="color" />
49+
<feComposite in="color" in2="color-matrix" operator="in" />
50+
<feDropShadow dx="1" dy="1" stdDeviation="0" flood-color="white" />
51+
</filter>
52+
</defs>
53+
</svg>
54+
</body>
3955
</html>
4056
```
4157

‎docs/index.html.ejs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,19 @@
167167
</p>
168168

169169
<%- example(`<button[[ class="focused"]]>I am focused</button>`) %>
170+
171+
<p>
172+
Images and elements with <code>[role=img]</code> inside the button will get disabled state when the button is disabled.
173+
</p>
174+
175+
<%- example(`
176+
<button style="height: auto; padding: 16px;">
177+
<img style="width: 32px;height: 32px;" src="mail-icon.png" alt="icon"/>
178+
</button>
179+
<button style="height: auto; padding: 16px;" disabled>
180+
<img style="width: 32px;height: 32px;" src="mail-icon.png" alt="icon"/>
181+
</button>
182+
`) %>
170183
</div>
171184
</section>
172185

@@ -987,5 +1000,20 @@
9871000
subscribing to more fun things on <a href="https://twitter.com/jdan">my twitter</a>. 👋
9881001
</p>
9891002
</main>
1003+
1004+
<svg id="filters-98css">
1005+
<defs>
1006+
<filter id="disabled-filter-98css">
1007+
<feColorMatrix
1008+
type="matrix"
1009+
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -21.25 -71.54 -7.21 40 0"
1010+
result="color-matrix"
1011+
/>
1012+
<feFlood flood-color="grey" result="color" />
1013+
<feComposite in="color" in2="color-matrix" operator="in" />
1014+
<feDropShadow dx="1" dy="1" stdDeviation="0" flood-color="white" />
1015+
</filter>
1016+
</defs>
1017+
</svg>
9901018
</body>
9911019
</html>

‎docs/mail-icon.png‎

1.25 KB
Loading

‎style.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,11 @@ input[type="reset"]:disabled,
200200
text-shadow: 1px 1px 0 var(--button-highlight);
201201
}
202202

203+
button:disabled img,
204+
button:disabled [role="img"] {
205+
filter: url("#disabled-filter-98css");
206+
}
207+
203208
.window {
204209
box-shadow: var(--border-window-outer), var(--border-window-inner);
205210
background: var(--surface);
@@ -885,3 +890,10 @@ table > tbody > tr > * {
885890
padding: 0 var(--grouped-element-spacing);
886891
height: 14px;
887892
}
893+
894+
#filters-98css {
895+
position: absolute;
896+
pointer-events: none;
897+
top: 0;
898+
left: 0;
899+
}

0 commit comments

Comments
 (0)