accessible reveal

fomantic · Mar 6, 2014 · 2cfbd6a · 2cfbd6a
1 parent 39e9d5a
commit 2cfbd6a
Showing 1 changed file with 36 additions and 17 deletions.
diff --git a/src/elements/reveal.less b/src/elements/reveal.less
@@ -132,10 +132,12 @@
   left: 100% !important;
   width: 100% !important;
 }
-.ui.slide.reveal:hover > .visible.content {
+.ui.slide.reveal:hover > .visible.content,
+.ui.slide.reveal:focus > .visible.content, {
   left: -100% !important;
 }
-.ui.slide.reveal:hover > .hidden.content {
+.ui.slide.reveal:hover > .hidden.content,
+.ui.slide.reveal:focus > .hidden.content {
   left: 0% !important;
 }
 
@@ -146,11 +148,13 @@
   left: auto !important;
   right: 100% !important;
 }
-.ui.right.slide.reveal:hover > .visible.content {
+.ui.right.slide.reveal:hover > .visible.content,
+.ui.right.slide.reveal:focus > .visible.content {
   left: 100% !important;
   right: auto !important;
 }
-.ui.right.slide.reveal:hover > .hidden.content {
+.ui.right.slide.reveal:hover > .hidden.content,
+.ui.right.slide.reveal:focus > .hidden.content {
   left: auto !important;
   right: 0% !important;
 }
@@ -167,11 +171,13 @@
   right: auto !important;
   bottom: auto !important;
 }
-.ui.slide.up.reveal:hover > .visible.content {
+.ui.slide.up.reveal:hover > .visible.content,
+.ui.slide.up.reveal:focus > .visible.content {
   top: -100% !important;
   left: 0% !important;
 }
-.ui.slide.up.reveal:hover > .hidden.content {
+.ui.slide.up.reveal:hover > .hidden.content,
+.ui.slide.up.reveal:focus > .hidden.content {
   top: 0% !important;
   left: 0% !important;
 }
@@ -188,11 +194,13 @@
   bottom: 100% !important;
   left: 0% !important;
 }
-.ui.slide.down.reveal:hover > .visible.content {
+.ui.slide.down.reveal:hover > .visible.content,
+.ui.slide.down.reveal:focus > .visible.content {
   left: 0% !important;
   bottom: -100% !important;
 }
-.ui.slide.down.reveal:hover > .hidden.content {
+.ui.slide.down.reveal:hover > .hidden.content,
+.ui.slide.down.reveal:focus > .hidden.content {
   left: 0% !important;
   bottom: 0% !important;
 }
@@ -206,7 +214,8 @@
 .ui.fade.reveal > .visible.content {
   opacity: 1;
 }
-.ui.fade.reveal:hover > .visible.content {
+.ui.fade.reveal:hover > .visible.content,
+.ui.fade.reveal:focus > .visible.content {
   opacity: 0;
 }
 
@@ -223,7 +232,9 @@
   right: 0% !important;
 }
 .ui.move.reveal:hover > .visible.content,
-.ui.move.left.reveal:hover > .visible.content {
+.ui.move.left.reveal:hover > .visible.content,
+.ui.move.reveal:focus > .visible.content,
+.ui.move.left.reveal:focus > .visible.content {
   right: 100% !important;
 }
 
@@ -233,7 +244,8 @@
   bottom: auto !important;
   left: 0% !important;
 }
-.ui.move.right.reveal:hover > .visible.content {
+.ui.move.right.reveal:hover > .visible.content,
+.ui.move.right.reveal:focus > .visible.content {
   left: 100% !important;
 }
 
@@ -244,7 +256,8 @@
 
   bottom: 0% !important;
 }
-.ui.move.up.reveal:hover > .visible.content {
+.ui.move.up.reveal:hover > .visible.content,
+.ui.move.up.reveal:focus > .visible.content {
   bottom: 100% !important;
 }
 
@@ -256,7 +269,8 @@
   top: 0% !important;
   bottom: auto !important;
 }
-.ui.move.down.reveal:hover > .visible.content {
+.ui.move.down.reveal:hover > .visible.content,
+.ui.move.down.reveal:focus > .visible.content {
   top: 100% !important;
 }
 
@@ -288,7 +302,9 @@
   transform-origin: bottom right;
 }
 .ui.rotate.reveal:hover > .visible.content,
-.ui.rotate.right.reveal:hover > .visible.content {
+.ui.rotate.right.reveal:hover > .visible.content,
+.ui.rotate.reveal:focus > .visible.content,
+.ui.rotate.right.reveal:focus > .visible.content {
   -webkit-transform: rotate(110deg);
   -moz-transform: rotate(110deg);
   -o-transform: rotate(110deg);
@@ -303,7 +319,8 @@
   -ms-transform-origin: bottom left;
   transform-origin: bottom left;
 }
-.ui.rotate.left.reveal:hover > .visible.content {
+.ui.rotate.left.reveal:hover > .visible.content,
+.ui.rotate.left.reveal:focus > .visible.content {
   -webkit-transform: rotate(-110deg);
   -moz-transform: rotate(-110deg);
   -o-transform: rotate(-110deg);
@@ -325,7 +342,8 @@
   -ms-transition: none !important;
   transition: none !important;
 }
-.ui.disabled.reveal:hover > .visible.content {
+.ui.disabled.reveal:hover > .visible.content,
+.ui.disabled.reveal:focus > .visible.content {
   position: static !important;
   display: block !important;
   opacity: 1 !important;
@@ -335,7 +353,8 @@
   bottom: auto !important;
   transform: none !important;
 }
-.ui.disabled.reveal:hover > .hidden.content {
+.ui.disabled.reveal:hover > .hidden.content,
+.ui.disabled.reveal:focus > .hidden.content {
   display: none !important;
 }