Skip to content

Commit a99e724

Browse files
wagnermacielthePunderWoman
wagnermaciel
authored and
thePunderWoman
committed
docs: aria toolbar examples
1 parent 45569b6 commit a99e724

10 files changed

Lines changed: 475 additions & 189 deletions

File tree

‎adev/src/content/examples/aria/toolbar/src/basic/app/app.css‎

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,53 @@
1-
.toolbar {
2-
gap: 16px;
3-
padding: 8px;
1+
:host {
42
display: flex;
5-
border-radius: 4px;
6-
background-color: #ffffff;
7-
border: 1px solid #e0e0e0;
3+
justify-content: center;
4+
}
5+
6+
[ngToolbar] {
7+
gap: 1.5rem;
8+
display: flex;
9+
padding: 0.5rem 1rem;
10+
border-radius: 0.5rem;
11+
background-color: var(--septenary-contrast);
812
}
913

1014
.group {
11-
gap: 4px;
15+
gap: 0.5rem;
1216
display: flex;
1317
}
1418

1519
.separator {
1620
width: 1px;
17-
background-color: rgba(0, 0, 0, 0.12);
21+
align-self: center;
22+
height: calc(100% - 1rem);
23+
background-color: var(--quinary-contrast);
1824
}
1925

2026
[ngToolbarWidget] {
27+
border: none;
2128
cursor: pointer;
22-
padding: 6px 12px;
23-
background-color: transparent;
24-
border: 1px solid transparent;
29+
padding: 0.5rem;
2530
border-radius: 4px;
26-
font-size: 14px;
31+
font-size: 1.25rem;
32+
background-color: transparent;
33+
color: var(--primary-contrast);
2734
}
2835

2936
[ngToolbarWidget]:hover {
30-
background-color: rgba(0, 0, 0, 0.05);
37+
background-color: color-mix(in srgb, var(--primary-contrast) 10%, transparent);
38+
}
39+
40+
[ngToolbarWidget]:active {
41+
background-color: color-mix(in srgb, var(--primary-contrast) 15%, transparent);
3142
}
3243

3344
[ngToolbarWidget]:focus {
34-
border-color: #4a9eff;
35-
outline: 2px solid rgba(74, 158, 255, 0.3);
45+
outline-offset: -1px;
46+
outline: 1px solid color-mix(in srgb, var(--hot-pink) 60%, transparent);
3647
}
3748

3849
[ngToolbarWidget][aria-pressed="true"],
3950
[ngToolbarWidget][aria-checked="true"] {
40-
color: #1565c0;
41-
background-color: rgba(33, 150, 243, 0.15);
42-
}
43-
44-
[ngToolbarWidget][aria-disabled="true"] {
45-
cursor: default;
46-
opacity: 0.45;
51+
color: color-mix(in srgb, var(--hot-pink) 80%, var(--primary-contrast));
52+
background-color: color-mix(in srgb, var(--hot-pink) 10%, transparent);
4753
}

‎adev/src/content/examples/aria/toolbar/src/basic/app/app.html‎

Lines changed: 98 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,108 @@
1-
<div ngToolbar class="toolbar" aria-label="Text Formatting Tools">
2-
<div class="group" aria-label="Undo and Redo options">
3-
<button ngToolbarWidget value="undo">Undo</button>
4-
<button ngToolbarWidget value="redo">Redo</button>
1+
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
2+
3+
<div ngToolbar aria-label="Text Formatting Tools">
4+
<div class="group">
5+
<button
6+
ngToolbarWidget
7+
value="undo"
8+
type="button"
9+
aria-label="undo"
10+
class="material-symbols-outlined"
11+
>
12+
undo
13+
</button>
14+
15+
<button
16+
ngToolbarWidget
17+
value="redo"
18+
type="button"
19+
aria-label="redo"
20+
class="material-symbols-outlined"
21+
>
22+
redo
23+
</button>
524
</div>
625

726
<div class="separator" role="separator"></div>
827

9-
<div class="group" aria-label="Text formatting options">
10-
<button ngToolbarWidget value="bold">Bold</button>
11-
<button ngToolbarWidget value="italic">Italic</button>
12-
<button ngToolbarWidget value="underline">Underline</button>
28+
<div class="group">
29+
<button
30+
ngToolbarWidget
31+
value="bold"
32+
type="button"
33+
aria-label="bold"
34+
#bold="ngToolbarWidget"
35+
class="material-symbols-outlined"
36+
[aria-pressed]="bold.selected()"
37+
>
38+
format_bold
39+
</button>
40+
41+
<button
42+
ngToolbarWidget
43+
value="italic"
44+
type="button"
45+
aria-label="italic"
46+
#italic="ngToolbarWidget"
47+
class="material-symbols-outlined"
48+
[aria-pressed]="italic.selected()"
49+
>
50+
format_italic
51+
</button>
52+
53+
<button
54+
ngToolbarWidget
55+
value="underlined"
56+
type="button"
57+
aria-label="underlined"
58+
#underlined="ngToolbarWidget"
59+
class="material-symbols-outlined"
60+
[aria-pressed]="underlined.selected()"
61+
>
62+
format_underlined
63+
</button>
1364
</div>
1465

1566
<div class="separator" role="separator"></div>
1667

17-
<div
18-
ngToolbarWidgetGroup
19-
role="radiogroup"
20-
class="group"
21-
aria-label="Alignment options"
22-
>
23-
<button ngToolbarWidget value="align-left">Align Left</button>
24-
<button ngToolbarWidget value="align-center">Align Center</button>
25-
<button ngToolbarWidget value="align-right">Align Right</button>
68+
<div ngToolbarWidgetGroup role="radiogroup" class="group" aria-label="Text alignment options">
69+
<button
70+
ngToolbarWidget
71+
role="radio"
72+
type="button"
73+
value="align left"
74+
aria-label="align left"
75+
#leftAlign="ngToolbarWidget"
76+
class="material-symbols-outlined"
77+
[aria-checked]="leftAlign.selected()"
78+
>
79+
format_align_left
80+
</button>
81+
82+
<button
83+
ngToolbarWidget
84+
role="radio"
85+
type="button"
86+
value="align center"
87+
aria-label="align center"
88+
#centerAlign="ngToolbarWidget"
89+
class="material-symbols-outlined"
90+
[aria-checked]="centerAlign.selected()"
91+
>
92+
format_align_center
93+
</button>
94+
95+
<button
96+
ngToolbarWidget
97+
role="radio"
98+
type="button"
99+
value="align right"
100+
aria-label="align right"
101+
#rightAlign="ngToolbarWidget"
102+
class="material-symbols-outlined"
103+
[aria-checked]="rightAlign.selected()"
104+
>
105+
format_align_right
106+
</button>
26107
</div>
27108
</div>

‎adev/src/content/examples/aria/toolbar/src/disabled/app/app.css‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,55 @@
1-
.toolbar {
2-
gap: 16px;
3-
padding: 8px;
1+
:host {
42
display: flex;
5-
border-radius: 4px;
6-
background-color: #ffffff;
7-
border: 1px solid #e0e0e0;
3+
justify-content: center;
4+
}
5+
6+
[ngToolbar] {
7+
gap: 1.5rem;
8+
display: flex;
9+
padding: 0.5rem 1rem;
10+
border-radius: 0.5rem;
11+
background-color: var(--septenary-contrast);
812
}
913

1014
.group {
11-
gap: 4px;
15+
gap: 0.5rem;
1216
display: flex;
1317
}
1418

1519
.separator {
1620
width: 1px;
17-
background-color: rgba(0, 0, 0, 0.12);
21+
align-self: center;
22+
height: calc(100% - 1rem);
23+
background-color: var(--quinary-contrast);
1824
}
1925

2026
[ngToolbarWidget] {
27+
border: none;
2128
cursor: pointer;
22-
padding: 6px 12px;
23-
background-color: transparent;
24-
border: 1px solid transparent;
29+
padding: 0.5rem;
2530
border-radius: 4px;
26-
font-size: 14px;
31+
font-size: 1.25rem;
32+
background-color: transparent;
33+
color: var(--primary-contrast);
2734
}
2835

2936
[ngToolbarWidget]:hover {
30-
background-color: rgba(0, 0, 0, 0.05);
37+
background-color: color-mix(in srgb, var(--primary-contrast) 10%, transparent);
38+
}
39+
40+
[ngToolbarWidget]:active {
41+
background-color: color-mix(in srgb, var(--primary-contrast) 15%, transparent);
3142
}
3243

3344
[ngToolbarWidget]:focus {
34-
border-color: #4a9eff;
35-
outline: 2px solid rgba(74, 158, 255, 0.3);
45+
outline-offset: -1px;
46+
outline: 1px solid color-mix(in srgb, var(--hot-pink) 60%, transparent);
3647
}
3748

3849
[ngToolbarWidget][aria-pressed="true"],
3950
[ngToolbarWidget][aria-checked="true"] {
40-
color: #1565c0;
41-
background-color: rgba(33, 150, 243, 0.15);
51+
color: color-mix(in srgb, var(--hot-pink) 80%, var(--primary-contrast));
52+
background-color: color-mix(in srgb, var(--hot-pink) 10%, transparent);
4253
}
4354

4455
[ngToolbarWidget][aria-disabled="true"] {

0 commit comments

Comments
 (0)