Add active reveal state, tweak colors

RELEASE-NOTES.md

@@ -38,6 +38,7 @@
 - **Menu** - The hover/active state of `dropdown item` have been adjusted to match `item`. Dropdown styles can be themed specifically inside `menu`.
 - **Menu** - Vertical dropdown menus are no longer 100% `min-width`
 - **Progress** - `indicating` labels now are more legible use separate css variables from `indicating` bar color
+- **Reveal** - Added new `active` state that allows you to show `reveal` programatically
 - **Segment** - Added `padded` and `very padded` segment variations
 - **Sidebar** - Improved animation performance through performance debugging. Sidebar now caches, width, height, rtl direction on load.
 - **Site** - Added in `pageOverflowX` variable, default theme hides horizontal scrollbars on `body`
@@ -99,6 +100,7 @@
 - **Modal** - Modal with `detachable: false` inside `ui sidebar`  `pusher` element will now show correctly
 - **Popup** - Fixes issue with `min-width` in firefox exceeding `max-width` causing element to not wrap correctly
 - **Popup** - Fixed bug which could cause pre-existing inline popup to be removed from DOM after hiding
+- **Reveal** - Removed `masked` reveal, all reveals are masked by default
 - **Search** - Fixed `onSelect` returning the first term that matches the beginining of the selected value not the exact value.
 - **Search** - Search API calls now use the same level debug settings as search
 - **Tab** - Tab name is no longer case sensitive

src/definitions/elements/reveal.less

@@ -41,6 +41,7 @@
 }
 
 /* Make sure hovered element is on top of other reveal */
+.ui.active.reveal .visible.content,
 .ui.reveal:hover .visible.content {
   z-index: @activeZIndex !important;
 }
@@ -80,9 +81,11 @@
   width: 100% !important;
   transform: translateX(100%) !important;
 }
+.ui.slide.active.reveal > .visible.content,
 .ui.slide.reveal:hover > .visible.content {
   transform: translateX(-100%) !important;
 }
+.ui.slide.active.reveal > .hidden.content,
 .ui.slide.reveal:hover > .hidden.content {
   transform: translateX(0%) !important;
 }
@@ -93,9 +96,11 @@
 .ui.slide.right.reveal > .hidden.content {
   transform: translateX(-100%) !important;
 }
+.ui.slide.right.active.reveal > .visible.content,
 .ui.slide.right.reveal:hover > .visible.content {
   transform: translateX(100%) !important;
 }
+.ui.slide.right.active.reveal > .hidden.content,
 .ui.slide.right.reveal:hover > .hidden.content {
   transform: translateX(0%) !important;
 }
@@ -103,9 +108,11 @@
 .ui.slide.up.reveal > .hidden.content {
   transform: translateY(100%) !important;
 }
+.ui.slide.up.active.reveal > .visible.content,
 .ui.slide.up.reveal:hover > .visible.content {
   transform: translateY(-100%) !important;
 }
+.ui.slide.up.active.reveal > .hidden.content,
 .ui.slide.up.reveal:hover > .hidden.content {
   transform: translateY(0%) !important;
 }
@@ -113,9 +120,11 @@
 .ui.slide.down.reveal > .hidden.content {
   transform: translateY(-100%) !important;
 }
+.ui.slide.down.active.reveal > .visible.content,
 .ui.slide.down.reveal:hover > .visible.content {
   transform: translateY(100%) !important;
 }
+.ui.slide.down.active.reveal > .hidden.content,
 .ui.slide.down.reveal:hover > .hidden.content {
   transform: translateY(0%) !important;
 }
@@ -128,6 +137,7 @@
 .ui.fade.reveal > .visible.content {
   opacity: 1;
 }
+.ui.fade.active.reveal > .visible.content,
 .ui.fade.reveal:hover > .visible.content {
   opacity: 0;
 }
@@ -161,15 +171,19 @@
   left: 0% !important;
   width: 100% !important;
 }
+.ui.move.active.reveal > .visible.content,
 .ui.move.reveal:hover > .visible.content {
   transform: translateX(-100%) !important;
 }
+.ui.move.right.active.reveal > .visible.content,
 .ui.move.right.reveal:hover > .visible.content {
   transform: translateX(100%) !important;
 }
+.ui.move.up.active.reveal > .visible.content,
 .ui.move.up.reveal:hover > .visible.content {
   transform: translateY(-100%) !important;
 }
+.ui.move.down.active.reveal > .visible.content,
 .ui.move.down.reveal:hover > .visible.content {
   transform: translateY(100%) !important;
 }
@@ -189,7 +203,9 @@
 .ui.rotate.right.reveal > .visible.content {
   transform-origin: bottom right;
 }
+.ui.rotate.active.reveal > .visible.conten,
 .ui.rotate.reveal:hover > .visible.content,
+.ui.rotate.right.active.reveal > .visible.content,
 .ui.rotate.right.reveal:hover > .visible.content {
   transform: rotate(@rotateDegrees);
 }
@@ -197,6 +213,7 @@
 .ui.rotate.left.reveal > .visible.content {
   transform-origin: bottom left;
 }
+.ui.rotate.left.active.reveal > .visible.content,
 .ui.rotate.left.reveal:hover > .visible.content {
   transform: rotate(-@rotateDegrees);
 }
@@ -211,6 +228,7 @@
 .ui.disabled.reveal > .content {
   transition: none !important;
 }
+.ui.disabled.active.reveal > .visible.content,
 .ui.disabled.reveal:hover > .visible.content {
   position: static !important;
   display: block !important;
@@ -221,6 +239,7 @@
   bottom: auto !important;
   transform: none !important;
 }
+.ui.disabled.active.reveal > .hidden.content,
 .ui.disabled.reveal:hover > .hidden.content {
   display: none !important;
 }
@@ -231,11 +250,11 @@
 *******************************/
 
 /*--------------
-     Masked
+     Visible
 ---------------*/
 
-.ui.masked.reveal {
-  overflow: hidden;
+.ui.visible.reveal {
+  overflow: visible;
 }
 
 /*--------------

src/themes/default/globals/site.variables

@@ -44,14 +44,13 @@
 
 /*---  Colors  ---*/
 @black            : #1B1C1D;
-@blue             : #1D75B7;
-@green            : #1EAF40;
-@grey             : #CCCCCC;
+@blue             : #2185D0;
+@green            : #21BA45;
 @orange           : #F2711C;
 @pink             : #E03997;
 @purple           : #6A33C8;
 @red              : #DB2828;
-@teal             : #18B5A4;
+@teal             : #00CAB4;
 @yellow           : #FBBD08;
 
 /*---  Light Colors  ---*/
@@ -67,6 +66,7 @@
 
 /*---   Neutrals  ---*/
 @fullBlack        : #000000;
+@grey             : #CCCCCC;
 @darkGrey         : #AAAAAA;
 @lightGrey        : #DCDDDE;
 @offWhite         : #FAFAFA;

src/themes/default/modules/sidebar.variables

@@ -9,7 +9,7 @@
 /* Animation */
 @perspective: 1500px;
 @duration: 500ms;
-@easing: ease;
+@easing: @defaultEasing;
 
 /* Dimmer */
 @dimmerColor: rgba(0, 0, 0, 0.4);