From 251d6834f6bdbedfd7c26061268420118eb8d51c Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 2 Apr 2015 01:04:43 -0400 Subject: [PATCH] Add active reveal state, tweak colors --- RELEASE-NOTES.md | 2 ++ src/definitions/elements/reveal.less | 25 +++++++++++++++++--- src/themes/default/globals/site.variables | 8 +++---- src/themes/default/modules/sidebar.variables | 2 +- 4 files changed, 29 insertions(+), 8 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index b2c88bb99..494f6b210 100644 --- a/RELEASE-NOTES.md +++ b/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 diff --git a/src/definitions/elements/reveal.less b/src/definitions/elements/reveal.less index a573def44..c6581fe6f 100755 --- a/src/definitions/elements/reveal.less +++ b/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; } /*-------------- diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index fc9df4f14..99809f685 100644 --- a/src/themes/default/globals/site.variables +++ b/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; diff --git a/src/themes/default/modules/sidebar.variables b/src/themes/default/modules/sidebar.variables index 2b5291c5d..e38f70e8a 100644 --- a/src/themes/default/modules/sidebar.variables +++ b/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);