From 98e3db6542629db17b28941d926ac7e3964d8814 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 22 Sep 2014 23:15:21 -0400 Subject: [PATCH] Add variables for UI Reveal --- src/definitions/elements/reveal.less | 137 ++++-------------- src/themes/_site/elements/reveal.overrides | 3 + src/themes/_site/elements/reveal.variables | 3 + .../default/elements/reveal.overrides | 3 + .../default/elements/reveal.variables | 15 ++ 5 files changed, 54 insertions(+), 107 deletions(-) create mode 100755 src/themes/_site/elements/reveal.overrides create mode 100755 src/themes/_site/elements/reveal.variables create mode 100755 src/themes/packages/default/elements/reveal.overrides create mode 100755 src/themes/packages/default/elements/reveal.variables diff --git a/src/definitions/elements/reveal.less b/src/definitions/elements/reveal.less index 0b89e7026..4d6197b0c 100755 --- a/src/definitions/elements/reveal.less +++ b/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; } \ No newline at end of file diff --git a/src/themes/_site/elements/reveal.overrides b/src/themes/_site/elements/reveal.overrides new file mode 100755 index 000000000..c5c53367f --- /dev/null +++ b/src/themes/_site/elements/reveal.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/src/themes/_site/elements/reveal.variables b/src/themes/_site/elements/reveal.variables new file mode 100755 index 000000000..6f085f935 --- /dev/null +++ b/src/themes/_site/elements/reveal.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/themes/packages/default/elements/reveal.overrides b/src/themes/packages/default/elements/reveal.overrides new file mode 100755 index 000000000..c5c53367f --- /dev/null +++ b/src/themes/packages/default/elements/reveal.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/src/themes/packages/default/elements/reveal.variables b/src/themes/packages/default/elements/reveal.variables new file mode 100755 index 000000000..5930e1467 --- /dev/null +++ b/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; \ No newline at end of file