From 5b664c7114f2740f062ca4ddfd475b8727a1372e Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 10 Nov 2014 17:42:00 -0500 Subject: [PATCH] Adds sidebar widths, shadow by default --- src/definitions/collections/menu.less | 2 +- src/definitions/modules/sidebar.js | 13 ++-- src/definitions/modules/sidebar.less | 62 ++++++++++++++----- src/themes/default/collections/menu.variables | 2 +- src/themes/default/modules/sidebar.variables | 28 +++++++-- 5 files changed, 80 insertions(+), 27 deletions(-) diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index bf928a9f0..07c288416 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -1367,7 +1367,7 @@ .ui.borderless.menu .item:before, .ui.borderless.menu .item .menu .item:before, .ui.menu .borderless.item:before { - background: none; + background: none !important; } /*------------------- diff --git a/src/definitions/modules/sidebar.js b/src/definitions/modules/sidebar.js index 543f665b6..7be70e920 100644 --- a/src/definitions/modules/sidebar.js +++ b/src/definitions/modules/sidebar.js @@ -75,7 +75,8 @@ $.fn.sidebar = function(parameters) { transitionEvent = module.get.transitionEvent(); // cache on initialize - if( module.is.legacy() ) { + if( module.is.legacy() || settings.legacy) { + settings.transition = 'overlay'; settings.useLegacy = true; } @@ -193,7 +194,7 @@ $.fn.sidebar = function(parameters) { + ' }' + '' ; - $context.append(style); + $head.append(style); $style = $('style[title=' + namespace + ']'); module.debug('Adding sizing css to head', $style); } @@ -423,7 +424,7 @@ $.fn.sidebar = function(parameters) { module.remove.animating(); module.remove.transition(); module.remove.bodyCSS(); - if(transition == 'scale down' || (settings.returnScroll && transition !== 'overlay' && module.is.mobile()) ) { + if(transition == 'scale down' || (settings.returnScroll && module.is.mobile()) ) { module.scrollBack(); } $.proxy(callback, element)(); @@ -453,6 +454,7 @@ $.fn.sidebar = function(parameters) { $pusher.addClass(className.dimmed); } $context + .css('position', 'relative') .animate(properties, settings.duration, settings.easing, function() { module.remove.animating(); module.bind.clickaway(); @@ -480,6 +482,7 @@ $.fn.sidebar = function(parameters) { $pusher.removeClass(className.dimmed); } $context + .css('position', 'relative') .animate(properties, settings.duration, settings.easing, function() { module.remove.animating(); $.proxy(callback, module)(); @@ -489,6 +492,7 @@ $.fn.sidebar = function(parameters) { scrollToTop: function() { module.verbose('Scrolling to top of page to avoid animation issues'); + currentScroll = $(window).scrollTop(); $module.scrollTop(0); window.scrollTo(0, 0); }, @@ -875,11 +879,10 @@ $.fn.sidebar.settings = { context : 'body', exclusive : false, - closable : true, dimPage : true, scrollLock : false, - returnScroll : true, + returnScroll : false, useLegacy : false, duration : 500, diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less index 8b2f75791..cbd4f7703 100755 --- a/src/definitions/modules/sidebar.less +++ b/src/definitions/modules/sidebar.less @@ -43,6 +43,9 @@ overflow-y: auto !important; z-index: @topLayer; } + + +/* 3D Rendering Fix */ .ui.sidebar * { backface-visibility: hidden; transform: rotateZ(0deg); @@ -52,6 +55,18 @@ Direction ---------------*/ +.ui.left.sidebar { + right: auto; + left: 0px; + transform: translate3d(-100%, 0, 0); +} + +.ui.right.sidebar { + right: 0px !important; + left: auto !important; + transform: translate3d(100%, 0%, 0); +} + .ui.top.sidebar, .ui.bottom.sidebar { width: 100% !important; @@ -59,24 +74,12 @@ overflow-y: visible !important; } -.ui.left.sidebar { - right: auto; - left: 0px; - transform: translate3d(-100%, 0, 0); -} - .ui.top.sidebar { top: 0px !important; bottom: auto !important; transform: translate3d(0, -100%, 0); } -.ui.right.sidebar { - right: 0px !important; - left: auto !important; - transform: translate3d(100%, 0%, 0); -} - .ui.bottom.sidebar { top: auto !important; bottom: 0px !important; @@ -179,6 +182,15 @@ visibility: visible; } +.ui.left.visible.sidebar, +.ui.right.visible.sidebar { + box-shadow: @horizontalBoxShadow; +} + +.ui.top.visible.sidebar, +.ui.bottom.visible.sidebar { + box-shadow: @verticalBoxShadow; +} /*-------------- Mobile @@ -196,11 +208,31 @@ Variations *******************************/ -.ui.sidebar, -.ui.vertical.sidebar.menu { +/*-------------- + Width +---------------*/ + +/* Left / Right */ +.ui[class*="very thin"].left.sidebar, +.ui[class*="very thin"].right.sidebar { + width: @sidebarVeryThinWidth; +} +.ui.thin.left.sidebar, +.ui.thin.right.sidebar { + width: @sidebarThinWidth; +} +.ui.left.sidebar, +.ui.right.sidebar { width: @sidebarWidth; } - +.ui.wide.left.sidebar, +.ui.wide.right.sidebar { + width: @sidebarWideWidth; +} +.ui[class*="very wide"].left.sidebar, +.ui[class*="very wide"].right.sidebar { + width: @sidebarVeryWideWidth; +} /******************************* Animations diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables index 17413f834..f4d42c953 100644 --- a/src/themes/default/collections/menu.variables +++ b/src/themes/default/collections/menu.variables @@ -252,7 +252,7 @@ /* Labeled Icon */ @labeledIconSize: 1.5em; @labeledIconMinWidth: 6em; -@labeledIconTextMargin: 0.3em; +@labeledIconTextMargin: 0.5em; /* Text */ @textMenuTransition: opacity 0.2s ease; diff --git a/src/themes/default/modules/sidebar.variables b/src/themes/default/modules/sidebar.variables index 7c0392e55..ddf8ca134 100644 --- a/src/themes/default/modules/sidebar.variables +++ b/src/themes/default/modules/sidebar.variables @@ -2,20 +2,38 @@ Sidebar *******************************/ -@sidebarWidth: 260px; -@sidebarHeight: 50px; +/*------------------- + Element +--------------------*/ @dimmerColor: rgba(0, 0, 0, 0.4); - @canvasBackground: @lightBlack; @perspective: 1500px; - @duration: 500ms; @easing: ease; +@boxShadow: 0px 0px 20px @borderColor; +@horizontalBoxShadow: @boxShadow; +@verticalBoxShadow: @boxShadow; + +/* Indexes */ @bottomLayer: 1; @middleLayer: 2; @fixedLayer: 101; @topLayer: 102; - @dimmerLayer: 1000; + + +/*------------------- + Variations +--------------------*/ + +/* Width */ +@sidebarVeryThinWidth: 60px; +@sidebarThinWidth: 150px; +@sidebarWidth: 260px; +@sidebarWideWidth: 350px; +@sidebarVeryWideWidth: 475px; + +/* Height */ +@sidebarHeight: auto;