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

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

pull/1129/head
jlukic 10 years ago
parent
eff5613d26
commit
c68c6685e7
11 changed files with 409 additions and 415 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -16,183 +16,6 @@ themes : ['Default']
<%- @partial('header', { tabs: 'module' }) %> <%- @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"> <div class="main container">
@ -205,6 +28,41 @@ themes : ['Default']
</div> </div>
<h2 class="ui dividing header">Types</h2> <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"> <div class="no example">
<h4 class="ui header">Direction</h4> <h4 class="ui header">Direction</h4>
<p>A sidebar can appear on any side of content</p> <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"> <table class="ui definition celled sortable table segment">
<thead> <thead>
<th>Behavior</th>
<th>Description</th>
<tr>
<th>Behavior</th>
<th>Description</th>
</tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
@ -415,18 +275,6 @@ themes : ['Default']
<div class="ui tab" data-tab="examples"> <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"> <div class="no example">
<h4 class="ui header">Triggering show/hide with other content</h4> <h4 class="ui header">Triggering show/hide with other content</h4>
@ -472,9 +320,11 @@ themes : ['Default']
</h3> </h3>
<table class="ui celled sortable definition table segment"> <table class="ui celled sortable definition table segment">
<thead> <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> </thead>
<tbody> <tbody>
<tr> <tr>
@ -506,9 +356,11 @@ themes : ['Default']
<table class="ui celled sortable definition table segment"> <table class="ui celled sortable definition table segment">
<thead> <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> </thead>
<tbody> <tbody>
<tr> <tr>
@ -537,9 +389,11 @@ themes : ['Default']
</h3> </h3>
<table class="ui celled definition table segment"> <table class="ui celled definition table segment">
<thead> <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> </thead>
<tbody> <tbody>
<tr> <tr>
@ -575,9 +429,11 @@ themes : ['Default']
<table class="ui celled sortable definition table segment"> <table class="ui celled sortable definition table segment">
<thead> <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> </thead>
<tbody> <tbody>
<tr> <tr>
@ -616,3 +472,183 @@ themes : ['Default']
</div> </div>
</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
View File

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

3
server/files/javascript/semantic.js
View File

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

35
server/files/javascript/sidebar.js
View File

@ -9,25 +9,24 @@ semantic.sidebar.ready = function() {
handler 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
View File

@ -287,6 +287,7 @@ body.guide .main.container > * {
/*-------------- /*--------------
Masthead Masthead
---------------*/ ---------------*/
#example .error.masthead { #example .error.masthead {
position: absolute; position: absolute;
margin-top: -290px; margin-top: -290px;
@ -859,14 +860,6 @@ body#example.index {
margin-left: 0px; margin-left: 0px;
width: 180px; 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 */ /* overview mode */
@ -1276,6 +1269,9 @@ body#example.index {
} }
} }
#example .animation.example .ui.button {
margin-bottom: 0.5em;
}
#example .ui.type.cards > .item { #example .ui.type.cards > .item {
min-height: 255px; min-height: 255px;

1
src/definitions/globals/site.less
View File

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

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

@ -11,6 +11,8 @@
;(function ( $, window, document, undefined ) { ;(function ( $, window, document, undefined ) {
"use strict";
$.fn.sidebar = function(parameters) { $.fn.sidebar = function(parameters) {
var var
$allModules = $(this), $allModules = $(this),
@ -100,7 +102,7 @@ $.fn.sidebar = function(parameters) {
clickaway: function(event) { clickaway: function(event) {
if( $module.find(event.target).size() === 0 && $(event.target).filter($module).size() === 0 ) { if( $module.find(event.target).size() === 0 && $(event.target).filter($module).size() === 0 ) {
module.verbose('User clicked on dimmed page'); 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 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 = $.isFunction(callback)
? callback ? callback
: function(){} : 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(); 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) { pullPage: function(callback) {
var
$transition = (settings.animation == 'overlay')
? $module
: $pusher
;
callback = $.isFunction(callback) callback = $.isFunction(callback)
? callback ? callback
: function(){} : 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: { add: {
@ -657,9 +644,9 @@ $.fn.sidebar.settings = {
name : 'Sidebar', name : 'Sidebar',
namespace : 'sidebar', namespace : 'sidebar',
debug : true,
verbose : true,
performance : true,
debug : false,
verbose : false,
performance : false,
animation : 'scale down', animation : 'scale down',
mobileAnimation : 'reveal', mobileAnimation : 'reveal',

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

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

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

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

@ -13,8 +13,9 @@
Fonts 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 Site Colors

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

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