Slider example update to fix issue #229 and #230

- Update focus style - Update page title - Update description - Fix JSCS bugs
w3c · Feb 22, 2017 · 3b8c118 · 3b8c118
1 parent 7ecba6f
commit 3b8c118
Show file tree

Hide file tree

Showing 9 changed files with 805 additions and 1,672 deletions.
diff --git a/examples/slider/css/slider.css b/examples/slider/css/slider.css
@@ -13,6 +13,7 @@ div.aria-widget-slider .rail {
   border: 1px solid #888;
   position: relative;
   top: 2em;
+  height: 4px;
 }
 
 div.aria-widget-slider .thumb  {
@@ -23,6 +24,13 @@ div.aria-widget-slider .thumb  {
   position: relative;
 }
 
+div.aria-widget-slider .thumb.focus, 
+div.aria-widget-slider .thumb:hover {
+  outline: 2px solid #888;
+  background-color: #DEF;
+}
+
+
 div.aria-widget-slider .value  {
   width:      2em;
   text-align: right;
@@ -40,7 +48,6 @@ div.focus .rail {
 }
 
 
-
 label {
   display: block;
   margin-top: 0.5em;

diff --git a/examples/slider/css/text-slider.css b/examples/slider/css/text-slider.css
@@ -13,6 +13,7 @@ div.aria-widget-text-slider .rail {
   border: 1px solid #888;
   position: relative;
   top: 2em;
+  height: 4px;
 }
 
 div.aria-widget-text-slider .thumb  {
@@ -23,19 +24,25 @@ div.aria-widget-text-slider .thumb  {
   position: relative;
 }
 
+div.aria-widget-text-slider .thumb.focus, 
+div.aria-widget-text-slider .thumb:hover {
+  outline: 2px solid #888;
+  background-color: #E0CB52;
+}
+
 div.aria-widget-text-slider div.value  {
   text-align: center;
   display: block;
   position: absolute;
 }
 
-div.focus .thumb  {
+div.aria-widget-text-slider div.focus .thumb  {
   border: 1px solid #444;
   background-color: #888;
   position: relative;
 }
 
-div.focus .rail {
+div.aria-widget-text-slider div.focus .rail {
   background-color: #CCC;
 }
 

diff --git a/examples/slider/css/vertical-slider.css b/examples/slider/css/vertical-slider.css
@@ -12,6 +12,8 @@ div.aria-widget-vertical-slider .rail {
   border: 1px solid #888;
   position: relative;
   left: 3.8em;
+  width: 4px;
+
 
 }
 
@@ -23,6 +25,12 @@ div.aria-widget-vertical-slider .thumb  {
   position: relative;
 }
 
+div.aria-widget-vertical-slider .thumb.focus, 
+div.aria-widget-vertical-slider .thumb:hover {
+  outline: 2px solid #888;
+  background-color: #E0CB52;
+}
+
 div.aria-widget-vertical-slider .label,
 div.aria-widget-vertical-slider .value  {
   margin-top: 0.5em;
@@ -32,18 +40,19 @@ div.aria-widget-vertical-slider .value  {
 }
 
 
-div.focus .thumb  {
+
+div.aria-widget-vertical-slider div.focus .thumb  {
   border: 1px solid #444;
   background-color: #888;
   position: relative;
 }
 
-div.focus .rail {
+div.aria-widget-vertical-slider div.focus .rail {
   background-color: #CCC;
   width: 8px;
 }
 
-.label {
+div.aria-widget-vertical-slider .label {
   font-weight: bold;
   font-size: 110%;
 }