Skip to content

Commit 403645e

Browse files
jongundjongund
committed
improved code and high contrast support
1 parent be4c934 commit 403645e

File tree

6 files changed

+378
-214
lines changed

6 files changed

+378
-214
lines changed

‎examples/index.html‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,8 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
134134
<li><a href="carousel/carousel-1-prev-next.html">Auto-Rotating Image Carousel with Buttons for Slide Control</a></li>
135135
<li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox (Two State)</a></li>
136136
<li><a href="menubar/menubar-editor.html">Editor Menubar</a></li>
137+
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
138+
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
137139
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
138140
<li><a href="treeview/treeview-2/treeview-2a.html">Navigation Treeview Using Computed Properties</a></li>
139141
<li><a href="treeview/treeview-2/treeview-2b.html">Navigation Treeview Using Declared Properties</a></li>
@@ -285,8 +287,9 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
285287
<td>
286288
<ul>
287289
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
288-
<li><a href="slider/slider-1.html">Horizontal Slider</a></li>
289290
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
291+
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
292+
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
290293
</ul>
291294
</td>
292295
</tr>
@@ -563,6 +566,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
563566
<li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
564567
<li><a href="radio/radio-activedescendant.html">Radio Group Using aria-activedescendant</a></li>
565568
<li><a href="radio/radio.html">Radio Group Using Roving tabindex</a></li>
569+
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
570+
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
566571
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
567572
<li><a href="table/table.html">Table</a></li>
568573
<li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
@@ -599,6 +604,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
599604
<li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a></li>
600605
<li><a href="radio/radio-activedescendant.html">Radio Group Using aria-activedescendant</a></li>
601606
<li><a href="radio/radio.html">Radio Group Using Roving tabindex</a></li>
607+
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
608+
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
602609
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
603610
<li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
604611
<li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
@@ -741,8 +748,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
741748
<ul>
742749
<li><a href="meter/meter.html">Meter</a></li>
743750
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
744-
<li><a href="slider/slider-1.html">Horizontal Slider</a></li>
745751
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
752+
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
753+
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
746754
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
747755
</ul>
748756
</td>
@@ -753,8 +761,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
753761
<ul>
754762
<li><a href="meter/meter.html">Meter</a></li>
755763
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
756-
<li><a href="slider/slider-1.html">Horizontal Slider</a></li>
757764
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
765+
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
766+
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
758767
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
759768
<li><a href="toolbar/toolbar.html">Toolbar</a></li>
760769
</ul>
@@ -766,8 +775,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
766775
<ul>
767776
<li><a href="meter/meter.html">Meter</a></li>
768777
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
769-
<li><a href="slider/slider-1.html">Horizontal Slider</a></li>
770778
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
779+
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
780+
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
771781
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
772782
<li><a href="toolbar/toolbar.html">Toolbar</a></li>
773783
</ul>

‎examples/slider/css/slider-color-viewer.css‎

Lines changed: 77 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
/* CSS Document */
22

3-
.boxpicker-sliders label {
3+
.color-viewer-sliders label {
44
display: block;
55
}
66

77
.color-box-sliders .label {
8-
display: block;
98
margin-top: 0;
109
margin-bottom: 1 em;
1110
}
1211

13-
.color-picker-sliders .color-box {
12+
.color-viewer-sliders .color-box {
1413
width: 200px;
1514
height: 200px;
1615
border: black solid medium;
@@ -19,140 +18,144 @@
1918
forced-color-adjust: none;
2019
}
2120

22-
.color-picker-sliders .color-info {
21+
.color-viewer-sliders .color-info {
2322
padding-top: 5px;
2423
}
2524

26-
.color-picker-sliders .color-info label {
25+
.color-viewer-sliders .color-info label {
2726
margin-top: 0.25em;
2827
display: block;
2928
}
3029

31-
.color-picker-sliders .color-info input:focus {
32-
outline: 2px solid #034575;
33-
background: #def;
30+
.color-group {
31+
padding: 4px;
32+
color: #005a9c;
33+
width: 490px;
3434
}
3535

36-
.color-group > input,
3736
.color-group > button,
3837
.color-group > div {
3938
display: inline;
4039
}
4140

42-
.color-group button.dec10,
43-
.color-group button.dec,
44-
.color-group button.inc,
45-
.color-group button.inc10 {
46-
padding: 0;
47-
margin: 0;
48-
border: none;
49-
background: none;
50-
}
51-
52-
.color-group .hc-background {
53-
fill: white;
54-
}
55-
56-
.color-group button.change circle.background {
57-
fill: #ddd;
58-
stroke: transparent;
59-
stroke-width: 2px;
60-
}
61-
62-
.color-group .color-slider text {
63-
fill: currentColor;
64-
fill-opacity: 0.8;
65-
}
66-
67-
.color-group.active .color-slider text,
68-
.color-group .color-slider:focus text,
69-
.color-group .color-slider:hover text {
41+
.color-group .color-slider .value {
7042
fill: currentColor;
71-
fill-opacity: 1;
72-
font: bold;
7343
}
7444

75-
.color-group button.change line {
76-
stroke: black;
77-
stroke-width: 2px;
45+
.color-group.focus .color-slider .value,
46+
.color-group .color-slider:focus .value,
47+
.color-group .color-slider:hover .value {
48+
font-weight: bold;
7849
}
7950

8051
.color-group .color-slider {
81-
margin-top: 0;
82-
margin-bottom: 0;
83-
height: 3em;
84-
}
85-
86-
.color-group .color-slider.value {
87-
width: 9000em;
88-
text-align: right;
52+
margin: 0;
53+
padding: 0;
8954
}
9055

91-
.color-group .color-slider svg .valueBackground {
56+
.color-group .color-slider .valueBackground {
9257
fill: white;
9358
stroke-width: 0;
9459
}
9560

96-
.color-group .color-slider svg .rail {
61+
.color-group .color-slider .rail {
9762
fill: #bbb;
9863
stroke: transparent;
9964
stroke-width: 2px;
10065
opacity: 0.5;
10166
}
10267

103-
.color-group .color-slider svg .fill {
68+
.color-group .color-slider .fill {
10469
stroke-width: 0;
10570
opacity: 0.5;
10671
pointer-events: none;
10772
}
10873

109-
.color-group .color-slider svg .green {
74+
.color-group.green .color-slider .fill {
11075
fill: green;
11176
}
11277

113-
.color-group .color-slider svg .red {
78+
.color-group.red .color-slider .fill {
11479
fill: red;
11580
}
11681

117-
.color-group .color-slider svg .blue {
82+
.color-group.blue .color-slider .fill {
11883
fill: blue;
11984
}
12085

121-
.color-group .color-slider svg .thumb {
86+
.color-group .color-slider .thumb {
12287
fill: #666;
12388
stroke: transparent;
12489
stroke-width: 2px;
12590
}
12691

127-
.color-group .button.change:focus,
128-
.color-group .color-slider:focus {
129-
outline: none;
130-
}
131-
132-
.color-group .button.change:focus {
133-
border: none;
134-
}
135-
136-
.color-group button.change:focus circle.background,
137-
.color-group button.change:hover circle.background {
138-
stroke: #005a9c;
92+
.color-group .color-slider .focus {
93+
fill: transparent;
94+
stroke: transparent;
95+
stroke-width: 2px;
13996
}
14097

141-
.color-group.active .color-slider rect,
142-
.color-group:hover .color-slider rect {
98+
.color-group.focus .color-slider .fill,
99+
.color-group .color-slider:focus .fill,
100+
.color-group .color-slider:hover .fill {
143101
opacity: 1;
144102
}
145103

104+
.color-group.focus .color-slider .rail,
146105
.color-group .color-slider:focus .rail,
147106
.color-group .color-slider:hover .rail {
148-
fill: white;
149-
stroke: #005a9c;
107+
fill: transparent;
108+
stroke: currentColor;
150109
opacity: 1;
151110
}
152111

153112
.color-group .color-slider:focus .thumb,
154113
.color-group .color-slider:hover .thumb {
155114
fill: #ddd;
156-
stroke: #005a9c;
115+
stroke: currentColor;
157116
opacity: 1;
158117
}
118+
119+
.color-group .color-slider:focus .focus,
120+
.color-group .color-slider:hover .focus {
121+
stroke: currentColor;
122+
}
123+
124+
.color-group button.dec10,
125+
.color-group button.dec,
126+
.color-group button.inc,
127+
.color-group button.inc10 {
128+
padding: 0;
129+
margin: 0;
130+
border: none;
131+
background: none;
132+
color: currentColor;
133+
}
134+
135+
.color-group button .focus {
136+
stroke: transparent;
137+
stroke-width: 2px;
138+
fill: transparent;
139+
}
140+
141+
.color-group button line,
142+
.color-group button .background {
143+
fill: transparent;
144+
stroke: currentColor;
145+
stroke-width: 2px;
146+
}
147+
148+
.color-group button line {
149+
stroke: currentColor;
150+
stroke-width: 2px;
151+
}
152+
153+
.color-group button:focus,
154+
.color-group .color-slider:focus {
155+
outline: none;
156+
}
157+
158+
.color-group button:focus .focus,
159+
.color-group button:hover .focus {
160+
stroke: currentColor;
161+
}

0 commit comments

Comments
 (0)