richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Complete initial complete rewrite of sidebar

pull/1063/head
jlukic 10 years ago
parent
97e155e5fb
commit
63d80d1de5
8 changed files with 563 additions and 313 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      server/documents/modules/sidebar.html.eco
  2. 25
      server/files/stylesheets/semantic.css
  3. 2
      server/partials/header.html.eco
  4. 2
      src/definitions/collections/form.less
  5. 21
      src/definitions/modules/modal.js
  6. 298
      src/definitions/modules/sidebar.js
  7. 468
      src/definitions/modules/sidebar.less
  8. 55
      src/themes/packages/default/modules/sidebar.variables

5
server/documents/modules/sidebar.html.eco
View File

@ -1,6 +1,6 @@
---
layout : 'default'
css : 'side'
css : ''
element : 'sidebar'
elementType : 'element'
@ -12,7 +12,6 @@ type : 'UI Module'
themes : ['Default']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/sidebar.less" />
<script src="/javascript/sidebar.js"></script>
<%- @partial('header', { tabs: 'module' }) %>
@ -170,7 +169,7 @@ themes : ['Default']
</div>
</div>
</div>
<div class="ui left sidebar vertical menu">
<div class="ui left sidebar vertical inverted menu">
<div class="header item">Left Sidebar menu</div>
<a class="item">One</a>
<a class="item">Two</a>

25
server/files/stylesheets/semantic.css
View File

@ -44,7 +44,7 @@ body {
}
body#example {
background: #FCFCFC url(../images/bg.jpg) repeat;
background: #F9F9F9;
margin: 0px;
padding: 0px;
color: #555555;
@ -171,8 +171,9 @@ a:hover {
}
/* segment headers */
#example .header.segment,
#example > .content > .page > .segment,
#example > .segment {
#example > .header.segment {
margin: 0px 0px 3em;
padding-top: 70px;
padding-bottom: 30px;
@ -180,24 +181,24 @@ a:hover {
border-bottom: 1px solid #DDDDDD;
}
#example > .tab.segment {
#example .tab.header.segment {
padding-bottom: 0em;
margin-bottom: 2em;
}
#example > .tab.segment .fixed .tabular.menu {
#example .tab.header.segment .fixed .tabular.menu {
position: fixed;
top: 50px;
}
#example > .tab.segment .vertical.menu {
#example .tab.header.segment .vertical.menu {
display: none;
margin: 2rem 0em 1rem;
}
#example > .tab.segment .tabular.menu {
#example .tab.header.segment .tabular.menu {
margin: 2rem 0em 0em;
border-bottom: none;
}
#example > .tab.segment .tabular.menu .active.item {
#example .tab.header.segment .tabular.menu .active.item {
background-color: #FAFAFA;
border-bottom-color: #FAFAFA;
}
@ -871,12 +872,6 @@ body.guide .main.container > * {
width: 100px;
}
#example .existing.annotation {
/*display: none;*/
}
/*#example .segment p:first-of-type {
margin-top: 0em;
}*/
/* example code reskin */
#example div.code.hide {
@ -1467,11 +1462,11 @@ body.progress .ui.progress .bar {
#example .fixed .next {
display: none;
}
#example > .tab.segment .tabular.menu {
#example .tab.header.segment .tabular.menu {
display: none;
}
#example > .tab.segment .vertical.menu {
#example .tab.header.segment .vertical.menu {
display: block;
}
}

2
server/partials/header.html.eco
View File

@ -1,6 +1,6 @@
<% @tabs = { definition: 'Definition', examples: 'Examples', usage: 'Usage', settings: 'Settings' } if @tabs == 'module' %>
<% @tabs = { overview: 'Overview', usage: 'Usage', examples: 'Examples', settings: 'Settings' } if @tabs == 'behavior' %>
<div class="<% if @tabs?: %>tab <% end %>segment">
<div class="<% if @tabs?: %>tab <% end %> header segment">
<div class="container">
<div class="introduction">

2
src/definitions/collections/form.less
View File

@ -20,7 +20,7 @@
/*******************************
Standard
Elements
*******************************/
/*--------------------

21
src/definitions/modules/modal.js
View File

@ -13,17 +13,19 @@
$.fn.modal = function(parameters) {
var
$allModules = $(this),
$window = $(window),
$document = $(document),
$body = $('body'),
$allModules = $(this),
$window = $(window),
$document = $(document),
$body = $('body'),
time = new Date().getTime(),
performance = [],
moduleSelector = $allModules.selector || '',
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
@ -49,7 +51,6 @@ $.fn.modal = function(parameters) {
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
$module = $(this),
$context = $(settings.context),

298
src/definitions/modules/sidebar.js
View File

@ -25,6 +25,13 @@ $.fn.sidebar = function(parameters) {
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(callback) { setTimeout(callback, 0); },
returnedValue
;
@ -44,10 +51,18 @@ $.fn.sidebar = function(parameters) {
moduleNamespace = 'module-' + namespace,
$module = $(this),
$body = $('body'),
$style = $('style[title=' + namespace + ']'),
$sidebars = $(selector.sidebar),
$page = $(selector.page),
$pusher = $(selector.pusher),
element = this,
instance = $module.data(moduleNamespace),
transitionEnd,
module
;
@ -55,6 +70,14 @@ $.fn.sidebar = function(parameters) {
initialize: function() {
module.debug('Initializing sidebar', $module);
transitionEnd = module.get.transitionEvent();
module.setup.page();
// avoid locking rendering to change layout if included in onReady
requestAnimationFrame(module.setup.layout);
module.instantiate();
},
@ -77,6 +100,31 @@ $.fn.sidebar = function(parameters) {
refresh: function() {
module.verbose('Refreshing selector cache');
$style = $('style[title=' + namespace + ']');
$sidebars = $(selector.sidebar);
$page = $(selector.page);
$pusher = $(selector.pusher);
},
setup: {
layout: function() {
if($(selector.pusher).size() === 0) {
module.debug('Adding wrapper element for sidebar');
module.verbose('Setting up page structure for sidebar');
$pusher = $('<div class="pusher" />');
$page = $('<div class="page" />');
$pusher.append($page);
$body
.children()
.not(selector.omitted)
.not($sidebars)
.wrapAll($pusher)
;
}
module.refresh();
},
page: function() {
$body.addClass(className.hasSidebar);
}
},
attachEvents: function(selector, event) {
@ -106,16 +154,18 @@ $.fn.sidebar = function(parameters) {
;
module.debug('Showing sidebar', callback);
if(module.is.closed()) {
if(!settings.overlay) {
if(settings.exclusive) {
module.hideAll();
}
module.pushPage();
if(settings.overlay) {
settings.animation = 'overlay';
}
module.set.active();
callback();
if(settings.animation !== 'overlay') {
module.hideAll();
}
module.pushPage(function() {
$.proxy(callback, element)();
$.proxy(settings.onShow, element)();
});
$.proxy(settings.onChange, element)();
$.proxy(settings.onShow, element)();
$.proxy(settings.onVisible, element)();
}
else {
module.debug('Sidebar is already visible');
@ -128,22 +178,22 @@ $.fn.sidebar = function(parameters) {
: function(){}
;
module.debug('Hiding sidebar', callback);
if(module.is.open()) {
if(!settings.overlay) {
module.pullPage();
module.remove.pushed();
}
module.remove.active();
callback();
if(module.is.visible()) {
module.pullPage(function() {
$.proxy(callback, element)();
$.proxy(settings.onHidden, element)();
});
$.proxy(settings.onChange, element)();
$.proxy(settings.onHide, element)();
}
},
hideAll: function() {
$(selector.sidebar)
.filter(':visible')
.sidebar('hide')
var
$visibleSidebars = $sidebars.find('.' + className.visible)
;
$visibleSidebars
.sidebar('hide')
;
},
@ -156,47 +206,80 @@ $.fn.sidebar = function(parameters) {
}
},
pushPage: function() {
forceRepaint: function() {
module.verbose('Forcing element repaint');
var
direction = module.get.direction(),
distance = (module.is.vertical())
? $module.outerHeight()
: $module.outerWidth()
$parentElement = $module.parent(),
$nextElement = $module.next()
;
if(settings.useCSS) {
module.debug('Using CSS to animate body');
module.add.bodyCSS(direction, distance);
module.set.pushed();
if($nextElement.size() === 0) {
$module.detach().appendTo($parentElement);
}
else {
module.animatePage(direction, distance, module.set.pushed);
$module.detach().insertBefore($nextElement);
}
},
pullPage: function() {
var
direction = module.get.direction()
pushPage: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if(settings.useCSS) {
module.debug('Resetting body position css');
module.remove.bodyCSS();
}
else {
module.debug('Resetting body position using javascript');
module.animatePage(direction, 0);
if( !module.is.inward() ) {
module.verbose('Adding body push state', module.get.direction());
if(settings.animation != 'overlay') {
module.remove.allVisible();
}
module.set.direction();
module.set.animation();
module.set.inward();
requestAnimationFrame(function() {
module.set.visible();
module.set.pushed();
});
$pusher
.off(transitionEnd)
.on(transitionEnd, function(event) {
if($(event.target).is(selector.pusher)) {
module.remove.inward();
module.set.active();
$pusher.off(transitionEnd);
$.proxy(callback, element)();
}
})
;
}
module.remove.pushed();
},
animatePage: function(direction, distance) {
var
animateSettings = {}
;
animateSettings['padding-' + direction] = distance;
module.debug('Using javascript to animate body', animateSettings);
$body
.animate(animateSettings, settings.duration, module.set.pushed)
pullPage: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if( !module.is.outward() ) {
module.verbose('Removing body push state', module.get.direction());
if(settings.animation == 'overlay') {
$module. removeClass(className.visible);
}
requestAnimationFrame(function() {
module.set.outward();
module.remove.active();
module.remove.pushed();
$pusher
.off(transitionEnd)
.on(transitionEnd, function(event) {
if($(event.target).is(selector.pusher)) {
module.remove.animation();
module.remove.direction();
module.remove.outward();
module.remove.visible();
$pusher.off(transitionEnd);
$.proxy(callback, element)();
}
})
;
});
}
},
add: {
@ -208,7 +291,7 @@ $.fn.sidebar = function(parameters) {
style = ''
+ '<style title="' + namespace + '">'
+ 'body.pushed {'
+ ' margin-' + direction + ': ' + distance + 'px !important;'
+ ''
+ '}'
+ '</style>'
;
@ -218,7 +301,31 @@ $.fn.sidebar = function(parameters) {
}
},
set: {
active: function() {
$module.addClass(className.active);
},
direction: function(direction) {
direction = direction || module.get.direction();
$body.addClass(className[direction]);
},
visible: function() {
$module.addClass(className.visible);
},
animation: function(animation) {
animation = animation || settings.animation;
$body.addClass(animation);
},
inward: function() {
$body.addClass(className.inward);
},
outward: function() {
$body.addClass(className.outward);
},
pushed: function() {
$body.addClass(className.pushed);
}
},
remove: {
bodyCSS: function() {
module.debug('Removing body css styles', $style);
@ -228,25 +335,30 @@ $.fn.sidebar = function(parameters) {
active: function() {
$module.removeClass(className.active);
},
pushed: function() {
module.verbose('Removing body push state', module.get.direction());
$body
.removeClass(className[ module.get.direction() ])
.removeClass(className.pushed)
;
}
},
set: {
active: function() {
$module.addClass(className.active);
visible: function() {
$module.removeClass(className.visible);
},
allVisible: function() {
if($sidebars.hasClass(className.visible)) {
$sidebars.removeClass(className.visible);
}
},
animation: function(animation) {
animation = animation || settings.animation;
$body.removeClass(animation);
},
pushed: function() {
module.verbose('Adding body push state', module.get.direction());
$body
.addClass(className[ module.get.direction() ])
.addClass(className.pushed)
;
$body.removeClass(className.pushed);
},
inward: function() {
$body.removeClass(className.inward);
},
outward: function() {
$body.removeClass(className.outward);
},
direction: function(direction) {
direction = direction || module.get.direction();
$body.removeClass(className[direction]);
}
},
@ -286,13 +398,25 @@ $.fn.sidebar = function(parameters) {
is: {
open: function() {
return $module.is(':animated') || $module.hasClass(className.active);
return $module.hasClass(className.active);
},
closed: function() {
return !module.is.open();
},
visible: function() {
return $module.hasClass(className.visible);
},
vertical: function() {
return $module.hasClass(className.top);
},
inward: function() {
return $body.hasClass(className.inward);
},
outward: function() {
return $body.hasClass(className.outward);
},
animating: function() {
return module.is.inward() || module.is.outward();
}
},
@ -479,30 +603,40 @@ $.fn.sidebar.settings = {
name : 'Sidebar',
namespace : 'sidebar',
debug : false,
debug : true,
verbose : true,
performance : true,
animation : 'pushing',
useCSS : true,
exclusive : true,
overlay : false,
duration : 300,
onChange : function(){},
onShow : function(){},
onHide : function(){},
className: {
active : 'active',
pushed : 'pushed',
top : 'top',
left : 'left',
right : 'right',
bottom : 'bottom'
dimPage : true,
exclusive : true,
onChange : function(){},
onShow : function(){},
onHide : function(){},
onHidden : function(){},
onVisible : function(){},
className : {
hasSidebar : 'pushable',
active : 'active',
visible : 'visible',
pushed : 'pushed',
inward : 'show',
outward : 'hide'
},
selector: {
sidebar: '.ui.sidebar'
sidebar : 'body > .ui.sidebar',
pusher : 'body > .pusher',
page : 'body > .pusher > .page',
omitted : '.ui.popup, .ui.modal, .ui.nag'
},
error : {

468
src/definitions/modules/sidebar.less
View File

@ -24,240 +24,402 @@
Sidebar
*******************************/
body {
transition: @bodyTransition;
/* Sidebar Menu */
.ui.sidebar {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
background: @sidebarBackground;
backface-visibility: hidden;
height: 100% !important;
width: @sidebarWidth !important;
border-radius: 0em !important;
margin: 0 !important;
will-change: transform;
}
.ui.sidebar {
position: fixed;
/*--------------
Body
---------------*/
margin: 0 !important;
/* Sets 3D Perspective */
body.pushable {
position: relative;
height: 100%;
overflow: hidden;
}
height: 100% !important;
border-radius: 0px !important;
/*--------------
Pusher
---------------*/
overflow-y: @overflowY;
top: 0px;
left: 0px;
z-index: @zIndex;
body.pushable > .pusher {
position: relative;
left: 0;
height: 100%;
backface-visibility: hidden;
transition: transform @animationDuration;
z-index: 2;
will-change: transform;
}
/*--------------
Page
---------------*/
transition: @sidebarTransition;
body.pushable > .pusher > .page {
background: @bodyBackground;
position: relative;
overflow-y: auto;
height: 100%;
backface-visibility: hidden;
}
/*-------------------
Coupling
--------------------*/
/*--------------
Dimmer
---------------*/
body.pushed.scrolling.ui.dimmable {
position: @dimmableSidebarPosition;
body.pushable > .pusher > .page:after {
position: absolute;
top: 0px;
right: 0px;
content: '';
background-color: @dimmerColor;
width: 0px;
height: 0px;
overflow: hidden;
opacity: 0;
z-index: 999;
transition: opacity @animationDuration;
will-change: opacity;
}
/*******************************
Types
States
*******************************/
/*-------------------
Direction
--------------------*/
/*--------------
Animating
---------------*/
.ui.right.very.thin.sidebar,
.ui.right.thin.sidebar,
.ui.right.sidebar,
.ui.right.wide.sidebar,
.ui.right.very.wide.sidebar {
left: 100%;
margin: 0px !important;
}
.ui.top.sidebar {
width: 100% !important;
/*--------------
Pushed
---------------*/
/* Show Dimmer */
body.pushable.pushed,
body.pushable.hide,
body.pushable.show {
background: @canvasBackground !important;
}
.ui.bottom.sidebar {
/*body.pushed > .pusher > .page:after {
width: 100% !important;
top: 100%;
margin: 0px !important;
height: 100% !important;
opacity: 1 !important;
}*/
body > .visible.ui.sidebar {
visibility: visible;
}
/*******************************
States
Variations
*******************************/
.ui.active.sidebar {
margin-left: 0px !important;
/*--------------
Styled
---------------*/
.ui.styled.sidebar {
background-color: #FFFFFF;
padding: 1em 1.25em;
border-right: 1px solid #DDDDDD;
}
/*--------------
Overlay
---------------*/
/* Set-up */
body.overlay > .ui.sidebar {
transform: translate3d(-100%, 0, 0);
z-index: 3;
}
.ui.active.top.sidebar,
.ui.active.bottom.sidebar {
margin-top: 0px !important;
/* Pushed */
body.overlay .visible.ui.sidebar {
transform: translate3d(0, 0, 0);
}
/* Animation */
body.overlay.show > .visible.ui.sidebar,
body.overlay.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
/*******************************
Variations
*******************************/
/*--------------
Pushed
---------------*/
/*-------------------
Formatted
--------------------*/
/* Set-Up */
body.pushing.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
body.pushing > .ui.sidebar {
transform: translate3d(-100%, 0, 0);
}
body.pushing > .pusher {
transform: translate3d(0, 0, 0);
}
.ui.styled.sidebar {
padding: @styledVerticalPadding @styledHorizontalPadding;
background-color: @styledBackground;
box-shadow: @styledBoxShadow;
/* Pushed */
body.pushing.pushed .visible.sidebar {
transform: translate3d(0%, 0, 0);
}
.ui.styled.thin.sidebar {
padding: @styledThinPadding;
body.pushing.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
.ui.styled.very.thin.sidebar {
padding: @styledVeryThinPadding;
/* Animation */
body.pushing.show > .visible.ui.sidebar,
body.pushing.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
/*--------------
Reveal
---------------*/
/* Set-up */
body.reveal .visible.ui.sidebar {
z-index: 1;
}
body.reveal > .pusher {
transform: translate3d(0, 0, 0);
z-index: 2;
}
/* Pushed */
body.reveal.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
/*-------------------
Floating
--------------------*/
/*--------------
Slide Along
---------------*/
.ui.floating.sidebar {
box-shadow: @floatingLeftBoxShadow;
/* Set-up */
body.slide.along > .ui.sidebar {
z-index: 1;
transform: translate3d(-50%, 0, 0);
}
.ui.right.floating.sidebar {
box-shadow: @floatingRightBoxShadow;
/* Pushed */
body.slide.along.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
.ui.top.floating.sidebar {
box-shadow: @floatingTopBoxShadow;
body.slide.along.pushed > .visible.ui.sidebar {
transform: translate3d(0, 0, 0);
}
.ui.bottom.floating.sidebar {
box-shadow: @floatingBottomBoxShadow
/* Animation */
body.slide.along.show > .visible.ui.sidebar,
body.slide.along.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
/*-------------------
Width
--------------------*/
/* Very Thin */
.ui.very.thin.sidebar {
width: @veryThinWidth !important;
margin-left: -@veryThinWidth !important;
/*--------------
Slide Out
---------------*/
/* Set-up */
body.slide.out > .ui.sidebar {
z-index: 1;
transform: translate3d(50%, 0, 0);
}
.ui.active.very.thin.sidebar {
margin-left: 0px !important;
/* Pushed */
body.slide.out.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
body.slide.out.pushed .visible.ui.sidebar {
transform: translate3d(0%, 0, 0);
}
.ui.active.right.very.thin.sidebar {
margin-left: -@veryThinWidth !important;
/* Animation */
body.slide.out.show > .visible.ui.sidebar,
body.slide.out.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
/* Thin */
.ui.thin.sidebar {
width: @thinWidth !important;
margin-left: -@thinWidth !important;
/*--------------
Scale Down
---------------*/
/* Set-up */
body.scale.down {
perspective: 1500px;
}
.ui.active.thin.sidebar {
margin-left: 0px !important;
body.scale.down > .pusher {
transform-style: preserve-3d;
z-index: 2;
}
.ui.active.right.thin.sidebar {
margin-left: -@thinWidth !important;
body.scale.down > .ui.sidebar {
opacity: 1;
transform: translate3d(-100%, 0, 0);
z-index: 3;
}
/* Standard */
.ui.sidebar {
width: @width !important;
margin-left: -@width !important;
/* Pushed */
body.scale.down.pushed > .pusher {
transform: translate3d(0, 0, -@sidebarWidth);
}
.ui.active.sidebar {
margin-left: 0px !important;
body.scale.down.pushed > .visible.ui.sidebar {
transform: translate3d(0, 0, 0);
}
.ui.active.right.sidebar {
margin-left: -@width !important;
/* Animation */
body.scale.down.show > .visible.ui.sidebar,
body.scale.down.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
/* Wide */
.ui.wide.sidebar {
width: @wideWidth !important;
margin-left: -@wideWidth !important;
/*--------------
Scale Up
---------------*/
/* Set-up */
body.scale.up {
perspective: 1500px;
perspective-origin: 0% 50%;
}
.ui.active.wide.sidebar {
margin-left: 0px !important;
body.scale.up > .ui.sidebar {
z-index: 1;
transform: translate3d(0, 0, -@sidebarWidth);
}
.ui.active.right.wide.sidebar {
margin-left: -@wideWidth !important;
body.scale.up > .pusher {
z-index: 2;
}
/* Very Wide */
.ui.very.wide.sidebar {
width: @veryWideWidth !important;
margin-left: -@veryWideWidth !important;
/* Pushed */
body.scale.up.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
.ui.active.very.wide.sidebar {
margin-left: 0px !important;
body.scale.up.pushed > .visible.ui.sidebar {
transform: translate3d(0, 0, 0);
}
.ui.active.right.very.wide.sidebar {
margin-left: -@veryWideWidth !important;
/* Animation */
body.scale.up.show > .visible.ui.sidebar,
body.scale.up.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
/*-------------------
Height
--------------------*/
/* Very Thin */
.ui.very.thin.top.sidebar {
margin: -@veryThinHeight 0px 0px 0px !important;
/*--------------
Recede
---------------*/
/* Set-up */
body.recede {
perspective: 1500px;
}
.ui.very.thin.top.sidebar,
.ui.very.thin.bottom.sidebar {
height: @veryThinHeight !important;
body.recede > .ui.sidebar {
opacity: 1;
transform: translate3d(-100%, 0, 0);
z-index: 3;
}
.ui.very.thin.active.bottom.sidebar {
margin-top: -@veryThinHeight !important;
body.recede > .pusher {
transform-style: preserve-3d;
z-index: 2;
}
body.recede > .pusher::after {
background-color: rgba(0, 0, 0, 0.5);
}
/* Thin */
.ui.thin.top.sidebar {
margin: -@thinHeight 0px 0px 0px !important;
/* Pushed */
body.recede.pushed > .pusher {
transform: translate3d(0px, 0, -200px) rotateY(-25deg);
}
.ui.thin.top.sidebar,
.ui.thin.bottom.sidebar {
height: @thinHeight !important;
body.recede.pushed > .visible.ui.sidebar {
transform: translate3d(0, 0, 0);
}
.ui.thin.active.bottom.sidebar {
margin-top: -@thinHeight !important;
/* Animation */
body.recede.show > .visible.ui.sidebar,
body.recede.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
/* Standard */
.ui.top.sidebar {
margin: -@height 0px 0px 0px !important;
/*--------------
Open Door
---------------*/
/* Set-up */
body.open.door {
perspective: 1500px;
}
.ui.top.sidebar,
.ui.bottom.sidebar {
height: @height !important;
body.open.door > .ui.sidebar {
opacity: 1;
transform: translate3d(-100%, 0, 0);
}
.ui.active.bottom.sidebar {
margin-top: -@height !important;
body.open.door > .pusher {
transform-origin: 100% 50%;
transform-style: preserve-3d;
}
/* Tall */
.ui.tall.top.sidebar {
margin: -@tallHeight 0px 0px 0px !important;
/* Pushed */
body.open.door.pushed > .pusher {
transform: rotateY(-10deg);
}
.ui.tall.top.sidebar,
.ui.tall.bottom.sidebar {
height: @tallHeight !important;
body.open.door.pushed > .visible.ui.sidebar {
transform: translate3d(0, 0, 0);
}
.ui.tall.active.bottom.sidebar {
margin-top: -@tallHeight !important;
/* Animation */
body.open.door.show > .visible.ui.sidebar,
body.open.door.hide > .visible.ui.sidebar {
transition: transform @animationDuration;
}
/* Very Tall */
.ui.very.tall.top.sidebar {
margin: -@veryTallHeight 0px 0px 0px !important;
/*--------------
Rotate In
---------------*/
/* Set-up */
body.rotate.in {
perspective: 1500px;
perspective-origin: 0% 50%;
}
.ui.very.tall.top.sidebar,
.ui.very.tall.bottom.sidebar {
height: @veryTallHeight !important;
body.rotate.in > .pusher {
transform-style: preserve-3d;
}
.ui.very.tall.active.bottom.sidebar {
margin-top: -@veryTallHeight !important;
body.rotate.in > .ui.sidebar {
transform: translate3d(-100%, 0, 0) rotateY(90deg);
transform-origin: 50% 100% 0;
transform-style: preserve-3d;
}
.loadUIOverrides();
/* Pushed */
body.rotate.in.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
body.rotate.in.pushed .visible.ui.sidebar {
transform: translate3d(0%, 0, 0) rotateY(0deg);
}
/* Animation */
body.rotate.in.show > .visible.ui.sidebar,
body.rotate.in.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease-in-out 0s;
}

55
src/themes/packages/default/modules/sidebar.variables
View File

@ -2,54 +2,13 @@
Sidebar
*******************************/
@duration: 0.3s;
@easing: @defaultEasing;
@bodyTransition:
margin @duration @easing,
transform @duration @easing
;
@sidebarWidth: 300px;
@sidebarBackground: @black;
@sidebarTransition: transform 0.5s ease;
@overflowY: auto;
@zIndex: 999;
@dimmerColor: rgba(0, 0, 0, 0.2);
@sidebarTransition:
margin-left @duration @easing,
margin-top @duration @easing
;
@canvasBackground: @lightBlack;
@pageBackground: @bodyBackground;
/* Coupling */
@dimmableSidebarPosition: static;
/*-------------------
Variations
--------------------*/
/* Sizes */
@veryThinWidth: 60px;
@thinWidth: 200px;
@width: 275px;
@wideWidth: 350px;
@veryWideWidth: 475px;
@veryThinHeight: 20px;
@thinHeight: 30px;
@height: 37px;
@tallHeight: 100px;
@veryTallHeight: 150px;
/* Styled */
@styledVerticalPadding: 1em;
@styledHorizontalPadding: 1.5em;
@styledBackground: @white;
@styledBoxShadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
@styledThinPadding: 1em;
@styledVeryThinPadding: 0.5em;
/* Floating */
@floatingShadowColor: rgba(0, 0, 0, 0.2);
@floatingShadowDistance: 2px;
@floatingShadowBlur: 2px;
@floatingLeftBoxShadow: @floatingShadowDistance 0px @floatingShadowBlur @floatingShadowColor;
@floatingRightBoxShadow: -(@floatingShadowDistance) 0px @floatingShadowBlur @floatingShadowColor;
@floatingTopBoxShadow: 0px @floatingShadowDistance @floatingShadowBlur @floatingShadowColor;
@floatingBottomBoxShadow: 0px -(@floatingShadowDistance) @floatingShadowBlur @floatingShadowColor;
@animationDuration: 0.5s;
Write Preview
Loading…
Cancel
Save