Skip to content

Commit

Permalink
improved code and high contrast support
Browse files Browse the repository at this point in the history
  • Loading branch information
@jongund
jongund committed Jan 7, 2021
1 parent be4c934 commit 403645e
Show file tree
Hide file tree
Showing 6 changed files with 378 additions and 214 deletions.
18 changes: 14 additions & 4 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,8 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<li><a href="carousel/carousel-1-prev-next.html">Auto-Rotating Image Carousel with Buttons for Slide Control</a></li>
<li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox (Two State)</a></li>
<li><a href="menubar/menubar-editor.html">Editor Menubar</a></li>
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="treeview/treeview-2/treeview-2a.html">Navigation Treeview Using Computed Properties</a></li>
<li><a href="treeview/treeview-2/treeview-2b.html">Navigation Treeview Using Declared Properties</a></li>
Expand Down Expand Up @@ -285,8 +287,9 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<td>
<ul>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-1.html">Horizontal Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -563,6 +566,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
<li><a href="radio/radio-activedescendant.html">Radio Group Using aria-activedescendant</a></li>
<li><a href="radio/radio.html">Radio Group Using Roving tabindex</a></li>
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="table/table.html">Table</a></li>
<li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
Expand Down Expand Up @@ -599,6 +604,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a></li>
<li><a href="radio/radio-activedescendant.html">Radio Group Using aria-activedescendant</a></li>
<li><a href="radio/radio.html">Radio Group Using Roving tabindex</a></li>
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
<li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
Expand Down Expand Up @@ -741,8 +748,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<ul>
<li><a href="meter/meter.html">Meter</a></li>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-1.html">Horizontal Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
</ul>
</td>
Expand All @@ -753,8 +761,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<ul>
<li><a href="meter/meter.html">Meter</a></li>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-1.html">Horizontal Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="toolbar/toolbar.html">Toolbar</a></li>
</ul>
Expand All @@ -766,8 +775,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<ul>
<li><a href="meter/meter.html">Meter</a></li>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-1.html">Horizontal Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-color-viewer-mobile.html">Color Viewer Slider Using SVG with Mobile Support</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider Using SVG</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="toolbar/toolbar.html">Toolbar</a></li>
</ul>
Expand Down
151 changes: 77 additions & 74 deletions examples/slider/css/slider-color-viewer.css
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
/* CSS Document */

.boxpicker-sliders label {
.color-viewer-sliders label {
display: block;
}

.color-box-sliders .label {
display: block;
margin-top: 0;
margin-bottom: 1 em;
}

.color-picker-sliders .color-box {
.color-viewer-sliders .color-box {
width: 200px;
height: 200px;
border: black solid medium;
Expand All @@ -19,140 +18,144 @@
forced-color-adjust: none;
}

.color-picker-sliders .color-info {
.color-viewer-sliders .color-info {
padding-top: 5px;
}

.color-picker-sliders .color-info label {
.color-viewer-sliders .color-info label {
margin-top: 0.25em;
display: block;
}

.color-picker-sliders .color-info input:focus {
outline: 2px solid #034575;
background: #def;
.color-group {
padding: 4px;
color: #005a9c;
width: 490px;
}

.color-group > input,
.color-group > button,
.color-group > div {
display: inline;
}

.color-group button.dec10,
.color-group button.dec,
.color-group button.inc,
.color-group button.inc10 {
padding: 0;
margin: 0;
border: none;
background: none;
}

.color-group .hc-background {
fill: white;
}

.color-group button.change circle.background {
fill: #ddd;
stroke: transparent;
stroke-width: 2px;
}

.color-group .color-slider text {
fill: currentColor;
fill-opacity: 0.8;
}

.color-group.active .color-slider text,
.color-group .color-slider:focus text,
.color-group .color-slider:hover text {
.color-group .color-slider .value {
fill: currentColor;
fill-opacity: 1;
font: bold;
}

.color-group button.change line {
stroke: black;
stroke-width: 2px;
.color-group.focus .color-slider .value,
.color-group .color-slider:focus .value,
.color-group .color-slider:hover .value {
font-weight: bold;
}

.color-group .color-slider {
margin-top: 0;
margin-bottom: 0;
height: 3em;
}

.color-group .color-slider.value {
width: 9000em;
text-align: right;
margin: 0;
padding: 0;
}

.color-group .color-slider svg .valueBackground {
.color-group .color-slider .valueBackground {
fill: white;
stroke-width: 0;
}

.color-group .color-slider svg .rail {
.color-group .color-slider .rail {
fill: #bbb;
stroke: transparent;
stroke-width: 2px;
opacity: 0.5;
}

.color-group .color-slider svg .fill {
.color-group .color-slider .fill {
stroke-width: 0;
opacity: 0.5;
pointer-events: none;
}

.color-group .color-slider svg .green {
.color-group.green .color-slider .fill {
fill: green;
}

.color-group .color-slider svg .red {
.color-group.red .color-slider .fill {
fill: red;
}

.color-group .color-slider svg .blue {
.color-group.blue .color-slider .fill {
fill: blue;
}

.color-group .color-slider svg .thumb {
.color-group .color-slider .thumb {
fill: #666;
stroke: transparent;
stroke-width: 2px;
}

.color-group .button.change:focus,
.color-group .color-slider:focus {
outline: none;
}

.color-group .button.change:focus {
border: none;
}

.color-group button.change:focus circle.background,
.color-group button.change:hover circle.background {
stroke: #005a9c;
.color-group .color-slider .focus {
fill: transparent;
stroke: transparent;
stroke-width: 2px;
}

.color-group.active .color-slider rect,
.color-group:hover .color-slider rect {
.color-group.focus .color-slider .fill,
.color-group .color-slider:focus .fill,
.color-group .color-slider:hover .fill {
opacity: 1;
}

.color-group.focus .color-slider .rail,
.color-group .color-slider:focus .rail,
.color-group .color-slider:hover .rail {
fill: white;
stroke: #005a9c;
fill: transparent;
stroke: currentColor;
opacity: 1;
}

.color-group .color-slider:focus .thumb,
.color-group .color-slider:hover .thumb {
fill: #ddd;
stroke: #005a9c;
stroke: currentColor;
opacity: 1;
}

.color-group .color-slider:focus .focus,
.color-group .color-slider:hover .focus {
stroke: currentColor;
}

.color-group button.dec10,
.color-group button.dec,
.color-group button.inc,
.color-group button.inc10 {
padding: 0;
margin: 0;
border: none;
background: none;
color: currentColor;
}

.color-group button .focus {
stroke: transparent;
stroke-width: 2px;
fill: transparent;
}

.color-group button line,
.color-group button .background {
fill: transparent;
stroke: currentColor;
stroke-width: 2px;
}

.color-group button line {
stroke: currentColor;
stroke-width: 2px;
}

.color-group button:focus,
.color-group .color-slider:focus {
outline: none;
}

.color-group button:focus .focus,
.color-group button:hover .focus {
stroke: currentColor;
}
Loading

0 comments on commit 403645e

Please sign in to comment.