Add variables for UI Reveal

src/definitions/elements/reveal.less

@@ -9,6 +9,16 @@
  *
  */
 
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'reveal';
+
+@import '../../semantic.config';
+
+
 /*******************************
             Reveal
 *******************************/
@@ -16,62 +26,23 @@
 .ui.reveal  {
   display: inline-block;
   position: relative !important;
-  z-index: 2 !important;
+  z-index: @bottomZIndex !important;
   font-size: 0em !important;
 }
 
-.ui.reveal > .content {
-  font-size: 1rem !important;
-}
-
-.ui.reveal > .visible.content {
-  -webkit-transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  -moz-transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  -ms-transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-}
-
 .ui.reveal > .visible.content {
   position: absolute !important;
   top: 0em !important;
   left: 0em !important;
-  z-index: 4 !important;
-  -webkit-transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  -moz-transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  -ms-transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
+  z-index: @topZIndex !important;
+  transition: all @transitionDuration @transitionEasing @transitionDelay;
 }
 .ui.reveal > .hidden.content {
   position: relative !important;
-  z-index: 3 !important;
-}
-
-/*------------------
-   Loose Coupling
--------------------*/
-
-.ui.reveal.button {
-  overflow: hidden;
+  z-index: @bottomZIndex !important;
 }
 
 
-
 /*******************************
               Types
 *******************************/
@@ -93,35 +64,12 @@
   display: block;
   float: left;
 
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-
   margin: 0em;
-  -webkit-transition:
-    top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
-    left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
-    right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
-    bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  -moz-transition:
-    top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
-    left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
-    right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
-    bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  -ms-transition:
-    top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
-    left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
-    right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
-    bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
   transition:
-    top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
-    left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
-    right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s,
-    bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
+    top @transitionDuration @transitionEasing @transitionDelay,
+    left @transitionDuration @transitionEasing @transitionDelay,
+    right @transitionDuration @transitionEasing @transitionDelay,
+    bottom @transitionDuration @transitionEasing @transitionDelay
   ;
 }
 .ui.slide.reveal > .visible.content {
@@ -198,7 +146,6 @@
 }
 
 
-
 /*--------------
       Fade
 ---------------*/
@@ -266,49 +213,24 @@
 ---------------*/
 
 .ui.rotate.reveal > .visible.content {
-  -webkit-transition-duration: 0.8s;
-  -moz-transition-duration: 0.8s;
-  -o-transition-duration: 0.8s;
-  -ms-transition-duration: 0.8s;
-  transition-duration: 0.8s;
-
-  -webkit-transform: rotate(0deg);
-  -moz-transform: rotate(0deg);
-  -o-transform: rotate(0deg);
-  -ms-transform: rotate(0deg);
+  transition-duration: @transitionDuration;
   transform: rotate(0deg);
 }
 
 .ui.rotate.reveal > .visible.content,
 .ui.rotate.right.reveal > .visible.content {
-  -webkit-transform-origin: bottom right;
-  -moz-transform-origin: bottom right;
-  -o-transform-origin: bottom right;
-  -ms-transform-origin: bottom right;
   transform-origin: bottom right;
 }
 .ui.rotate.reveal:hover > .visible.content,
 .ui.rotate.right.reveal:hover > .visible.content {
-  -webkit-transform: rotate(110deg);
-  -moz-transform: rotate(110deg);
-  -o-transform: rotate(110deg);
-  -ms-transform: rotate(110deg);
-  transform: rotate(110deg);
+  transform: rotate(@rotateDegrees);
 }
 
 .ui.rotate.left.reveal > .visible.content {
-  -webkit-transform-origin: bottom left;
-  -moz-transform-origin: bottom left;
-  -o-transform-origin: bottom left;
-  -ms-transform-origin: bottom left;
   transform-origin: bottom left;
 }
 .ui.rotate.left.reveal:hover > .visible.content {
-  -webkit-transform: rotate(-110deg);
-  -moz-transform: rotate(-110deg);
-  -o-transform: rotate(-110deg);
-  -ms-transform: rotate(-110deg);
-  transform: rotate(-110deg);
+  transform: rotate(-@rotateDegrees);
 }
 
 /*******************************
@@ -319,10 +241,6 @@
   opacity: 1 !important;
 }
 .ui.disabled.reveal > .content {
-  -webkit-transition: none !important;
-  -moz-transition: none !important;
-  -o-transition: none !important;
-  -ms-transition: none !important;
   transition: none !important;
 }
 .ui.disabled.reveal:hover > .visible.content {
@@ -357,9 +275,14 @@
 ---------------*/
 
 .ui.instant.reveal > .content {
-  -webkit-transition-delay: 0s !important;
-  -moz-transition-delay: 0s !important;
-  -o-transition-delay: 0s !important;
-  -ms-transition-delay: 0s !important;
   transition-delay: 0s !important;
+}
+
+
+/*--------------
+     Sizing
+---------------*/
+
+.ui.reveal > .content {
+  font-size: @medium !important;
 }

src/themes/_site/elements/reveal.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/_site/elements/reveal.variables

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

src/themes/packages/default/elements/reveal.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/packages/default/elements/reveal.variables

@@ -0,0 +1,15 @@
+/*******************************
+            Reveal
+*******************************/
+
+@transitionDelay: 0.15s;
+@transitionDuration: 0.8s;
+@transitionEasing: cubic-bezier(0.175, 0.885, 0.320, 1);
+
+@zIndex: 2;
+@bottomZIndex: 3;
+@topZIndex: 4;
+
+@rotateDegrees: 110deg;
+
+@medium: 1rem;