Browse Source

Tryin to work through all the bugs and gotcha of sidebar with css transitions (headache central)

pull/1129/head
jlukic 10 years ago
parent
commit
c68c6685e7
11 changed files with 409 additions and 415 deletions
  1. 442
      server/documents/modules/sidebar.html.eco
  2. 62
      server/files/javascript/library/history.js
  3. 3
      server/files/javascript/semantic.js
  4. 35
      server/files/javascript/sidebar.js
  5. 12
      server/files/stylesheets/semantic.css
  6. 1
      src/definitions/globals/site.less
  7. 119
      src/definitions/modules/sidebar.js
  8. 136
      src/definitions/modules/sidebar.less
  9. 3
      src/themes/packages/default/elements/button.variables
  10. 5
      src/themes/packages/default/globals/site.variables
  11. 6
      src/themes/packages/default/modules/sidebar.variables

442
server/documents/modules/sidebar.html.eco

@ -16,183 +16,6 @@ themes : ['Default']
<%- @partial('header', { tabs: 'module' }) %>
<div class="ui styled sidebar">
<h3 class="ui header">You Might Like</h3>
<div class="ui fluid vertical menu">
<a class="item">
<i class="chat outline icon"></i>
More by this author
</a>
<a class="item">
<i class="text file icon"></i>
Suggested Articles
</a>
</div>
<h3 class="ui header">Contact Us</h3>
<div class="ui form">
<div class="field">
<label>Name</label>
<div class="ui icon input">
<i class="user icon"></i>
<input type="text" data-placeholder="Name">
</div>
</div>
<div class="field">
<label>Message</label>
<textarea></textarea>
</div>
<div class="ui black fluid button">Submit</div>
</div>
</div>
<div class="ui thin styled sidebar">
<h3 class="ui header">Share</h3>
<div class="ui fluid vertical labeled icon buttons">
<div class="ui facebook button">
<i class="facebook icon"></i>
Facebook
</div>
<div class="ui twitter button">
<i class="twitter icon"></i>
Twitter
</div>
<div class="ui google plus button">
<i class="google plus icon"></i>
Google
</div>
</div>
</div>
<div class="ui very thin styled sidebar">
<div class="ui fluid vertical icon buttons">
<div class="ui facebook button">
<i class="facebook icon"></i>
</div>
<div class="ui twitter button">
<i class="twitter icon"></i>
</div>
<div class="ui google plus button">
<i class="google plus icon"></i>
</div>
</div>
</div>
<div class="ui wide styled sidebar">
<h3 class="ui header">You Might Like</h3>
<div class="ui fluid vertical menu">
<a class="item">
<i class="chat outline icon"></i>
More by this author
</a>
<a class="item">
<i class="text file icon"></i>
Suggested Articles
</a>
</div>
</div>
<div class="ui very wide styled sidebar">
<h3 class="ui header">Contact Us</h3>
<div class="ui form">
<div class="field">
<label>Name</label>
<div class="ui icon input">
<i class="user icon"></i>
<input type="text" data-placeholder="Name">
</div>
</div>
<div class="field">
<label>Message</label>
<textarea></textarea>
</div>
<div class="ui black fluid button">Submit</div>
</div>
</div>
<div class="ui vertical overlay sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="active item">
<i class="heart icon"></i>
Current Section
</a>
<a class="item">
<i class="facebook icon"></i>
Like us on Facebook
</a>
<div class="item">
<b>More</b>
<div class="menu">
<a class="item">About</a>
<a class="item">Contact Us</a>
</div>
</div>
</div>
<div class="ui floating vertical sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="active item">
<i class="heart icon"></i>
Current Section
</a>
<a class="item">
<i class="facebook icon"></i>
Like us on Facebook
</a>
<div class="item">
<b>More</b>
<div class="menu">
<a class="item">About</a>
<a class="item">Contact Us</a>
</div>
</div>
</div>
<div class="ui red vertical demo sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="active item">
<i class="heart icon"></i>
Current Section
</a>
<a class="item">
<i class="facebook icon"></i>
Like us on Facebook
</a>
<div class="item">
<b>More</b>
<div class="menu">
<a class="item">About</a>
<a class="item">Contact Us</a>
</div>
</div>
</div>
<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>
<a class="item">Three</a>
</div>
<div class="ui right sidebar inverted red vertical menu">
<div class="header item">Right Sidebar menu</div>
<a class="item">One</a>
<a class="item">Two</a>
<a class="item">Three</a>
</div>
<div class="ui top inverted teal sidebar menu">
<div class="header item">Top Sidebar menu</div>
<a class="item">One</a>
<a class="item">Two</a>
<a class="item">Three</a>
</div>
<div class="ui bottom inverted sidebar menu">
<div class="header item">Bottom Sidebar menu</div>
<a class="item">One</a>
<a class="item">Two</a>
<a class="item">Three</a>
</div>
<div class="main container">
@ -205,6 +28,41 @@ themes : ['Default']
</div>
<h2 class="ui dividing header">Types</h2>
<div class="animation example">
<h4 class="ui header">Animation</h4>
<p>A sidebar can use different animations to change contexts</p>
<div class="ui button" data-animation="overlay">
Overlay
</div>
<div class="ui button" data-animation="push">
Push
</div>
<div class="ui button" data-animation="reveal">
Reveal
</div>
<div class="ui button" data-animation="slide along">
Slide Along
</div>
<div class="ui button" data-animation="slide out">
Slide Out
</div>
<div class="ui button" data-animation="scale down">
Scale Down
</div>
<div class="ui button" data-animation="scale up">
Scale Up
</div>
<div class="ui button" data-animation="recede">
Recede
</div>
<div class="ui button" data-animation="open door">
Open Door
</div>
<div class="ui button" data-animation="rotate in">
Rotate In
</div>
</div>
<div class="no example">
<h4 class="ui header">Direction</h4>
<p>A sidebar can appear on any side of content</p>
@ -355,8 +213,10 @@ themes : ['Default']
<table class="ui definition celled sortable table segment">
<thead>
<th>Behavior</th>
<th>Description</th>
<tr>
<th>Behavior</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
@ -415,18 +275,6 @@ themes : ['Default']
<div class="ui tab" data-tab="examples">
<div class="no example">
<h4 class="ui header">Overlay</h4>
<p>A sidebar can overlay page content instead of pushing it to the side</p>
<div class="code" data-demo="true">
$('.overlay.sidebar')
.sidebar({
overlay: true
})
.sidebar('toggle')
;
</div>
</div>
<div class="no example">
<h4 class="ui header">Triggering show/hide with other content</h4>
@ -472,9 +320,11 @@ themes : ['Default']
</h3>
<table class="ui celled sortable definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
<tr>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
@ -506,9 +356,11 @@ themes : ['Default']
<table class="ui celled sortable definition table segment">
<thead>
<th class="four wide">Setting</th>
<th>Context</th>
<th>Description</th>
<tr>
<th class="four wide">Setting</th>
<th>Context</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
@ -537,9 +389,11 @@ themes : ['Default']
</h3>
<table class="ui celled definition table segment">
<thead>
<th>Setting</th>
<th class="six wide">Default</th>
<th>Description</th>
<tr>
<th>Setting</th>
<th class="six wide">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
@ -575,9 +429,11 @@ themes : ['Default']
<table class="ui celled sortable definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
<tr>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
@ -616,3 +472,183 @@ themes : ['Default']
</div>
</div>
<div class="ui styled sidebar">
<h3 class="ui header">You Might Like</h3>
<div class="ui fluid vertical menu">
<a class="item">
<i class="chat outline icon"></i>
More by this author
</a>
<a class="item">
<i class="text file icon"></i>
Suggested Articles
</a>
</div>
<h3 class="ui header">Contact Us</h3>
<div class="ui form">
<div class="field">
<label>Name</label>
<div class="ui icon input">
<i class="user icon"></i>
<input type="text" data-placeholder="Name">
</div>
</div>
<div class="field">
<label>Message</label>
<textarea></textarea>
</div>
<div class="ui black fluid button">Submit</div>
</div>
</div>
<div class="ui thin styled sidebar">
<h3 class="ui header">Share</h3>
<div class="ui fluid vertical labeled icon buttons">
<div class="ui facebook button">
<i class="facebook icon"></i>
Facebook
</div>
<div class="ui twitter button">
<i class="twitter icon"></i>
Twitter
</div>
<div class="ui google plus button">
<i class="google plus icon"></i>
Google
</div>
</div>
</div>
<div class="ui very thin styled sidebar">
<div class="ui fluid vertical icon buttons">
<div class="ui facebook button">
<i class="facebook icon"></i>
</div>
<div class="ui twitter button">
<i class="twitter icon"></i>
</div>
<div class="ui google plus button">
<i class="google plus icon"></i>
</div>
</div>
</div>
<div class="ui wide styled sidebar">
<h3 class="ui header">You Might Like</h3>
<div class="ui fluid vertical menu">
<a class="item">
<i class="chat outline icon"></i>
More by this author
</a>
<a class="item">
<i class="text file icon"></i>
Suggested Articles
</a>
</div>
</div>
<div class="ui very wide styled sidebar">
<h3 class="ui header">Contact Us</h3>
<div class="ui form">
<div class="field">
<label>Name</label>
<div class="ui icon input">
<i class="user icon"></i>
<input type="text" data-placeholder="Name">
</div>
</div>
<div class="field">
<label>Message</label>
<textarea></textarea>
</div>
<div class="ui black fluid button">Submit</div>
</div>
</div>
<div class="ui vertical overlay sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="active item">
<i class="heart icon"></i>
Current Section
</a>
<a class="item">
<i class="facebook icon"></i>
Like us on Facebook
</a>
<div class="item">
<b>More</b>
<div class="menu">
<a class="item">About</a>
<a class="item">Contact Us</a>
</div>
</div>
</div>
<div class="ui floating vertical sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="active item">
<i class="heart icon"></i>
Current Section
</a>
<a class="item">
<i class="facebook icon"></i>
Like us on Facebook
</a>
<div class="item">
<b>More</b>
<div class="menu">
<a class="item">About</a>
<a class="item">Contact Us</a>
</div>
</div>
</div>
<div class="ui red vertical demo sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="active item">
<i class="heart icon"></i>
Current Section
</a>
<a class="item">
<i class="facebook icon"></i>
Like us on Facebook
</a>
<div class="item">
<b>More</b>
<div class="menu">
<a class="item">About</a>
<a class="item">Contact Us</a>
</div>
</div>
</div>
<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>
<a class="item">Three</a>
</div>
<div class="ui right sidebar inverted red vertical menu">
<div class="header item">Right Sidebar menu</div>
<a class="item">One</a>
<a class="item">Two</a>
<a class="item">Three</a>
</div>
<div class="ui top inverted teal sidebar menu">
<div class="header item">Top Sidebar menu</div>
<a class="item">One</a>
<a class="item">Two</a>
<a class="item">Three</a>
</div>
<div class="ui bottom inverted sidebar menu">
<div class="header item">Bottom Sidebar menu</div>
<a class="item">One</a>
<a class="item">Two</a>
<a class="item">Three</a>
</div>

62
server/files/javascript/library/history.js

@ -37,7 +37,7 @@
return (_h.pushState && _opts.state !== UNDEFINED);
},
_hrefState = function() {
return ('/' + _l.pathname.replace(new RegExp(_opts.state), '') +
return ('/' + _l.pathname.replace(new RegExp(_opts.state), '') +
_l.search + (_hrefHash() ? '#' + _hrefHash() : '')).replace(_re, '/');
},
_hrefHash = function() {
@ -50,7 +50,7 @@
_window = function() {
try {
return top.document !== UNDEFINED && top.document.title !== UNDEFINED ? top : window;
} catch (e) {
} catch (e) {
return window;
}
},
@ -82,14 +82,16 @@
}
},
_update = function(internal) {
_st(_track, 10);
return _trigger(CHANGE).isDefaultPrevented() ||
if (_opts.tracker !== 'null' && _opts.tracker !== NULL) {
_st(_track, 10);
}
return _trigger(CHANGE).isDefaultPrevented() ||
_trigger(internal ? INTERNAL_CHANGE : EXTERNAL_CHANGE).isDefaultPrevented();
},
_track = function() {
if (_opts.tracker !== 'null' && _opts.tracker !== NULL) {
var fn = $.isFunction(_opts.tracker) ? _opts.tracker : _t[_opts.tracker],
value = (_l.pathname + _l.search +
value = (_l.pathname + _l.search +
($.address && !_supportsState() ? $.address.value() : ''))
.replace(/\/\//, '/').replace(/^\/$/, '');
if ($.isFunction(fn)) {
@ -104,9 +106,9 @@
}
},
_html = function() {
var src = _js() + ':' + FALSE + ';document.open();document.writeln(\'<html><head><title>' +
_d.title.replace(/\'/g, '\\\'') + '</title><script>var ' + ID + ' = "' + encodeURIComponent(_href()).replace(/\'/g, '\\\'') +
(_d.domain != _l.hostname ? '";document.domain="' + _d.domain : '') +
var src = _js() + ':' + FALSE + ';document.open();document.writeln(\'<html><head><title>' +
_d.title.replace(/\'/g, '\\\'') + '</title><script>var ' + ID + ' = "' + encodeURIComponent(_href()).replace(/\'/g, '\\\'') +
(_d.domain != _l.hostname ? '";document.domain="' + _d.domain : '') +
'";</' + 'script></head></html>\');document.close();';
if (_version < 7) {
_frame.src = src;
@ -138,13 +140,13 @@
if (_opts.wrap) {
var body = $('body'),
wrap = $('body > *')
.wrapAll('<div style="padding:' +
(_cssint(body, 'marginTop') + _cssint(body, 'paddingTop')) + 'px ' +
(_cssint(body, 'marginRight') + _cssint(body, 'paddingRight')) + 'px ' +
(_cssint(body, 'marginBottom') + _cssint(body, 'paddingBottom')) + 'px ' +
.wrapAll('<div style="padding:' +
(_cssint(body, 'marginTop') + _cssint(body, 'paddingTop')) + 'px ' +
(_cssint(body, 'marginRight') + _cssint(body, 'paddingRight')) + 'px ' +
(_cssint(body, 'marginBottom') + _cssint(body, 'paddingBottom')) + 'px ' +
(_cssint(body, 'marginLeft') + _cssint(body, 'paddingLeft')) + 'px;" />')
.parent()
.wrap('<div id="' + ID + '" style="height:100%;overflow:auto;position:relative;' +
.wrap('<div id="' + ID + '" style="height:100%;overflow:auto;position:relative;' +
(_webkit && !window.statusbar.visible ? 'resize:both;' : '') + '" />');
$('html, body')
.css({
@ -260,8 +262,8 @@
TRUE = true,
FALSE = false,
_opts = {
autoUpdate: TRUE,
history: TRUE,
autoUpdate: TRUE,
history: TRUE,
strict: TRUE,
wrap: FALSE
},
@ -271,7 +273,7 @@
_msie = !$.support.opacity,
_t = _window(),
_d = _t.document,
_h = _t.history,
_h = _t.history,
_l = _t.location,
_si = setInterval,
_st = setTimeout,
@ -282,14 +284,14 @@
_form,
_url = $('script:last').attr('src'),
_qi = _url ? _url.indexOf('?') : -1,
_title = _d.title,
_title = _d.title,
_silent = FALSE,
_loaded = FALSE,
_juststart = TRUE,
_updating = FALSE,
_listeners = {},
_listeners = {},
_value = _href();
if (_msie) {
_version = parseFloat(_agent.substr(_agent.indexOf('MSIE') + 4));
if (_d.documentMode && _d.documentMode != _version) {
@ -305,7 +307,7 @@
}
};
}
if (_h.navigationMode) {
_h.navigationMode = 'compatible';
}
@ -439,7 +441,7 @@
return this;
}
if (_supportsState()) {
_h[_opts.history ? 'pushState' : 'replaceState']({}, '',
_h[_opts.history ? 'pushState' : 'replaceState']({}, '',
_opts.state.replace(/\/$/, '') + (_value === '' ? '/' : _value));
} else {
_silent = TRUE;
@ -512,7 +514,7 @@
v = [v];
}
if (n == name) {
v = (value === NULL || value === '') ? [] :
v = (value === NULL || value === '') ? [] :
(append ? v.concat([value]) : [value]);
}
for (var j = 0; j < v.length; j++) {
@ -560,11 +562,11 @@
return this;
}
var arr = _value.split('#');
return arr.slice(1, arr.length).join('#');
return arr.slice(1, arr.length).join('#');
}
};
})();
$.fn.address = function(fn) {
if (!this.data('address')) {
this.on('click', function(e) {
@ -574,10 +576,10 @@
var target = e.currentTarget;
if ($(target).is('a')) {
e.preventDefault();
var value = fn ? fn.call(target) :
/address:/.test($(target).attr('rel')) ? $(target).attr('rel').split('address:')[1].split(' ')[0] :
$.address.state() !== undefined && !/^\/?$/.test($.address.state()) ?
$(target).attr('href').replace(new RegExp('^(.*' + $.address.state() + '|\\.)'), '') :
var value = fn ? fn.call(target) :
/address:/.test($(target).attr('rel')) ? $(target).attr('rel').split('address:')[1].split(' ')[0] :
$.address.state() !== undefined && !/^\/?$/.test($.address.state()) ?
$(target).attr('href').replace(new RegExp('^(.*' + $.address.state() + '|\\.)'), '') :
$(target).attr('href').replace(/^(#\!?|\.)/, '');
$.address.value(value);
}
@ -586,7 +588,7 @@
if ($(target).is('form')) {
e.preventDefault();
var action = $(target).attr('action'),
value = fn ? fn.call(target) : (action.indexOf('?') != -1 ? action.replace(/&$/, '') : action + '?') +
value = fn ? fn.call(target) : (action.indexOf('?') != -1 ? action.replace(/&$/, '') : action + '?') +
$(target).serialize();
$.address.value(value);
}
@ -594,5 +596,5 @@
}
return this;
};
})(jQuery);

3
server/files/javascript/semantic.js

@ -721,9 +721,6 @@ semantic.ready = function() {
}
$menu
.sidebar({
animation: 'scale down'
})
.sidebar('attach events', '.launch.button, .view-ui.button, .launch.item')
.sidebar('attach events', $hideMenu, 'hide')
;

35
server/files/javascript/sidebar.js

@ -9,25 +9,24 @@ semantic.sidebar.ready = function() {
handler
;
$('.variation .button')
.on('click', function() {
$(this)
.toggleClass('active')
.siblings()
.removeClass('active')
;
$('.sidebar')
.filter($(this).data('variation') ).first()
.sidebar('toggle')
;
})
;
$('.styled.sidebar').first()
.sidebar('attach events', '.styled.example .button')
;
$('.floating.sidebar').first()
.sidebar('attach events', '.floating.example .button')
$('.left.sidebar')
.sidebar()
;
$('.animation.example')
.find('.button')
.on('click', function() {
var
animation = $(this).data('animation')
;
$('.left.sidebar')
.sidebar('setting', {
animation: animation,
mobileAnimation: animation
})
.sidebar('toggle')
;
})
;

12
server/files/stylesheets/semantic.css

@ -287,6 +287,7 @@ body.guide .main.container > * {
/*--------------
Masthead
---------------*/
#example .error.masthead {
position: absolute;
margin-top: -290px;
@ -859,14 +860,6 @@ body#example.index {
margin-left: 0px;
width: 180px;
}
/* #example .peek > .menu.animating > .active {
background-color: transparent;
border: none;
padding-left: 0.95em;
}
#example .peek > .menu.animating > .active:after {
background-color: #FFFFFF;
} */
/* overview mode */
@ -1276,6 +1269,9 @@ body#example.index {
}
}
#example .animation.example .ui.button {
margin-bottom: 0.5em;
}
#example .ui.type.cards > .item {
min-height: 255px;

1
src/definitions/globals/site.less

@ -34,6 +34,7 @@ html,
body {
font-size: @fontSize;
height: 100%;
font-smoothing: @fontSmoothing;
}

119
src/definitions/modules/sidebar.js

@ -11,6 +11,8 @@
;(function ( $, window, document, undefined ) {
"use strict";
$.fn.sidebar = function(parameters) {
var
$allModules = $(this),
@ -100,7 +102,7 @@ $.fn.sidebar = function(parameters) {
clickaway: function(event) {
if( $module.find(event.target).size() === 0 && $(event.target).filter($module).size() === 0 ) {
module.verbose('User clicked on dimmed page');
$.proxy(module.hide, element)();
module.hide();
}
}
},
@ -237,82 +239,67 @@ $.fn.sidebar = function(parameters) {
}
},
forceRepaint: function() {
module.verbose('Forcing element repaint');
pushPage: function(callback) {
var
$parentElement = $module.parent(),
$nextElement = $module.next()
$transition = (settings.animation == 'overlay')
? $module
: $pusher
;
if($nextElement.size() === 0) {
$module.detach().appendTo($parentElement);
}
else {
$module.detach().insertBefore($nextElement);
}
},
pushPage: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if( !module.is.inward() ) {
module.verbose('Adding context push state', $context);
if(settings.animation != 'overlay') {
module.remove.allVisible();
}
module.set.direction();
module.set.animation();
module.verbose('Adding context push state', $context);
if(settings.animation != 'overlay') {
module.remove.allVisible();
}
$transition
.on(transitionEnd, function(event) {
if( event.target == $transition[0] ) {
$transition.off(transitionEnd);
module.remove.inward();
module.set.active();
module.bind.clickaway();
$.proxy(callback, element)();
}
})
;
module.set.visible();
module.set.animation();
module.set.direction();
setTimeout(function() {
module.set.inward();
requestAnimationFrame(function() {
module.set.visible();
module.set.pushed();
});
$pusher
.off(transitionEnd)
.on(transitionEnd, function(event) {
if( event.target == $pusher[0] ) {
module.remove.inward();
module.set.active();
$pusher.off(transitionEnd);
module.bind.clickaway();
$.proxy(callback, element)();
}
})
;
}
module.set.pushed();
}, 500);
},
pullPage: function(callback) {
var
$transition = (settings.animation == 'overlay')
? $module
: $pusher
;
callback = $.isFunction(callback)
? callback
: function(){}
;
if( !module.is.outward() ) {
module.verbose('Removing context push state', module.get.direction());
if(settings.animation == 'overlay') {
$module.removeClass(className.visible);
}
module.unbind.clickaway();
requestAnimationFrame(function() {
module.set.outward();
module.remove.active();
module.remove.pushed();
$pusher
.off(transitionEnd)
.on(transitionEnd, function(event) {
if( event.target == $pusher[0] ) {
module.remove.animation();
module.remove.direction();
module.remove.outward();
module.remove.visible();
$pusher.off(transitionEnd);
$.proxy(callback, element)();
}
})
;
});
}
module.verbose('Removing context push state', module.get.direction());
module.unbind.clickaway();
$transition
.on(transitionEnd, function(event) {
if( event.target == $transition[0] ) {
$transition.off(transitionEnd);
module.remove.animation();
module.remove.direction();
module.remove.outward();
module.remove.visible();
$.proxy(callback, element)();
}
})
;
module.set.outward();
module.remove.active();
module.remove.pushed();
},
add: {
@ -657,9 +644,9 @@ $.fn.sidebar.settings = {
name : 'Sidebar',
namespace : 'sidebar',
debug : true,
verbose : true,
performance : true,
debug : false,
verbose : false,
performance : false,
animation : 'scale down',
mobileAnimation : 'reveal',

136
src/definitions/modules/sidebar.less

@ -36,7 +36,10 @@
width: @sidebarWidth !important;
border-radius: 0em !important;
margin: 0 !important;
transition: none;
will-change: transform;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
@ -62,12 +65,10 @@
background: @canvasBackground;
left: 0;
height: 100%;
transition: transform @animationDuration;
z-index: 2;
transform: translate3d(0px, 0, 0);
transition: transform @duration @easing;
will-change: transform;
/* Appears to reduce performance breaks fixed position
backface-visibility: hidden;
*/
}
/*--------------
@ -78,7 +79,6 @@
background: @bodyBackground;
overflow-y: auto;
height: 100%;
-webkit-overflow-scrolling: touch;
}
@ -97,7 +97,7 @@
overflow: hidden;
opacity: 0;
z-index: 999;
transition: opacity @animationDuration;
transition: opacity @duration;
will-change: opacity;
}
@ -117,18 +117,11 @@
opacity: 1 !important;
}
.pushable.hide > .pusher > .page *,
/*.pushable.hide > .pusher > .page *,
.pushable.show > .pusher > .page *,
.pushable.pushed > .pusher > .page * {
transition: none !important;
}
/* Remove Scroll on Page
.pushable.pushed > .pusher > .page {
// overflow: hidden;
}
*/
}*/
/*--------------
Visible
@ -162,51 +155,45 @@
---------------*/
/* Set-up */
.pushable.overlay > .ui.sidebar {
.pushable.overlay > .visible.ui.sidebar {
transform: translate3d(-100%, 0, 0);
z-index: 3;
}
/* Pushed */
.pushable.overlay .visible.ui.sidebar {
transform: translate3d(0, 0, 0);
.pushable.overlay.pushed .visible.ui.sidebar {
transform: translate3d(0%, 0, 0);
}
/* Animation */
.pushable.overlay.show > .visible.ui.sidebar,
.pushable.overlay.hide > .visible.ui.sidebar {
transition: transform @animationDuration @easing;
transition: transform @duration @easing;
}
/*--------------
Pushed
Push
---------------*/
/* Set-Up */
.pushable.pushing.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
.pushable.push > .pusher {
transform: translate3d(0px, 0, 0);
}
.pushable.pushing > .ui.sidebar {
.pushable.push > .visible.ui.sidebar {
transform: translate3d(-100%, 0, 0);
z-index: 3;
}
.pushable.pushing > .pusher {
transform: translate3d(0px, 0, 0);
z-index: 2;
}
/* Pushed */
.pushable.pushing.pushed .visible.sidebar {
transform: translate3d(0px, 0, 0);
.pushable.push.pushed > .visible.ui.sidebar {
transform: translate3d(0%, 0, 0);
}
.pushable.pushing.pushed > .pusher {
.pushable.push.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
/* Animation */
.pushable.pushing.show > .visible.ui.sidebar,
.pushable.pushing.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
.pushable.push.show > .visible.ui.sidebar,
.pushable.push.hide > .visible.ui.sidebar {
transition: transform @duration @easing;
}
@ -215,13 +202,14 @@
---------------*/
/* Set-up */
.pushable.reveal .visible.ui.sidebar {
z-index: 1;
}
.pushable.reveal > .pusher {
transform: translate3d(0, 0, 0);
transform: translate3d(0px, 0, 0);
z-index: 2;
}
.pushable.reveal > .visible.ui.sidebar {
z-index: 1;
transition: none;
}
/* Pushed */
.pushable.reveal.pushed > .pusher {
@ -234,39 +222,36 @@
---------------*/
/* Set-up */
.pushable.slide.along > .ui.sidebar {
z-index: 2;
transform: translate3d(-50%, 0, 0);
}
.pushable.slide.along > .pusher {
transform: translate3d(0px, 0, 0);
z-index: 3;
}
.pushable.slide.along > .visible.ui.sidebar {
z-index: 2;
transform: translate3d(-50%, 0, 0);
transition: transform @duration @easing;
}
/* Pushed */
.pushable.slide.along.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
transform-delay: 10ms
}
.pushable.slide.along.pushed > .visible.ui.sidebar {
transform: translate3d(0%, 0, 0);
}
/* Animation */
.pushable.slide.along.show > .visible.ui.sidebar,
.pushable.slide.along.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
/*--------------
Slide Out
---------------*/
/* Set-up */
.pushable.slide.out > .ui.sidebar {
z-index: 1;
.pushable.slide.out > .pusher {
transform: translate3d(0px, 0, 0);
}
.pushable.slide.out > .visible.ui.sidebar {
transform: translate3d(50%, 0, 0);
transition: transform @duration @easing;
}
/* Pushed */
@ -277,11 +262,6 @@
transform: translate3d(0%, 0, 0);
}
/* Animation */
.pushable.slide.out.show > .visible.ui.sidebar,
.pushable.slide.out.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
/*--------------
Scale Down
@ -295,8 +275,7 @@
transform-style: preserve-3d;
z-index: 2;
}
.pushable.scale.down > .ui.sidebar {
opacity: 1;
.pushable.scale.down > .visible.ui.sidebar {
transform: translate3d(-100%, 0, 0);
z-index: 3;
}
@ -309,10 +288,10 @@
transform: translate3d(0, 0, 0);
}
/* Animation */
/* 3D transition cant have duration set until animation */
.pushable.scale.down.show > .visible.ui.sidebar,
.pushable.scale.down.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
transition: transform @duration @easing;
}
@ -342,9 +321,9 @@
}
/* Animation */
.pushable.scale.up.show > .visible.ui.sidebar,
.pushable.scale.up.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
.pushable.scale.up.show > .ui.sidebar,
.pushable.scale.up.hide > .ui.sidebar {
transition: transform @duration @easing;
}
@ -362,12 +341,9 @@
z-index: 3;
}
.pushable.recede > .pusher {
transform-style: preserve-3d;
transform: translate3d(0%, 0px, 0px) rotateY(0deg);
z-index: 2;
}
.pushable.recede > .pusher::after {
background-color: rgba(0, 0, 0, 0.5);
}
/* Pushed */
.pushable.recede.pushed > .pusher {
@ -378,9 +354,9 @@
}
/* Animation */
.pushable.recede.show > .visible.ui.sidebar,
.pushable.recede.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
.pushable.recede.show > .ui.sidebar,
.pushable.recede.hide > .ui.sidebar {
transition: transform @duration @easing;
}
/*--------------
@ -398,7 +374,7 @@
}
.pushable.open.door > .pusher {
transform-origin: 100% 50%;
transform-style: preserve-3d;
transform: rotateY(0deg);
z-index: 2;
}
@ -412,9 +388,9 @@
}
/* Animation */
.pushable.open.door.show > .visible.ui.sidebar,
.pushable.open.door.hide > .visible.ui.sidebar {
transition: transform @animationDuration;
.pushable.open.door.show > .ui.sidebar,
.pushable.open.door.hide > .ui.sidebar {
transition: transform @duration;
}
/*--------------
@ -446,11 +422,11 @@
/* Return Animation */
.pushable.rotate.in.hide > .visible.ui.sidebar {
transform: translate3d(-100%, 0, 0) rotateY(0deg);
transition: transform @animationDuration ease 0s;
transition: transform @duration ease 0s;
}
/* Animation */
.pushable.rotate.in.show > .visible.ui.sidebar,
.pushable.rotate.in.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease-in-out 0s;
.pushable.rotate.in.show > .ui.sidebar,
.pushable.rotate.in.hide > .ui.sidebar {
transition: transform @duration ease-in-out 0s;
}

3
src/themes/packages/default/elements/button.variables

@ -35,8 +35,7 @@
opacity @transitionDuration @transitionEasing,
background-color @transitionDuration @transitionEasing,
color @transitionDuration @transitionEasing,
background @transitionDuration @transitionEasing,
box-shadow @transitionDuration @transitionEasing
background @transitionDuration @transitionEasing
;
/* Padding */

5
src/themes/packages/default/globals/site.variables

@ -13,8 +13,9 @@
Fonts
--------------------*/
@headerFont : "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont : "Helvetica Neue", Arial, Helvetica, sans-serif;
@headerFont : "Helvetica Neue", Arial, Helvetica, sans-serif;
@pageFont : "Helvetica Neue", Arial, Helvetica, sans-serif;
@fontSmoothing : antialiased;
/*-------------------
Site Colors

6
src/themes/packages/default/modules/sidebar.variables

@ -4,12 +4,12 @@
@sidebarWidth: 260px;
@sidebarBackground: @black;
@sidebarTransition: transform 0.5s ease;
@sidebarTransition: transform 0.5s linear;
@dimmerColor: rgba(0, 0, 0, 0.4);
@canvasBackground: @lightBlack;
@pageBackground: @bodyBackground;
@animationDuration: 0.5s;
@easing: ease-in;
@duration: 0.5s;
@easing: ease;
Loading…
Cancel
Save