diff --git a/composer.json b/composer.json index c9de9bc..730de7d 100755 --- a/composer.json +++ b/composer.json @@ -5,10 +5,10 @@ "authors": [{ "name": "Jack Lukic", "email": "jacklukic@gmail.com", - "web": "http://www.jacklukic.com", + "homepage": "http://www.jacklukic.com", "role": "Creator" }], "keywords": ["semantic", "ui", "css", "framework"], "license": "MIT", - "version": "2.4.1" + "version": "2.5.0" } \ No newline at end of file diff --git a/index.js b/index.js index 333cc79..2216e65 100755 --- a/index.js +++ b/index.js @@ -1,5 +1,5 @@ /*! - * # Semantic UI 2.4.1 - Sidebar + * # Semantic UI 2.5.0 - Sidebar * http://github.com/semantic-org/semantic-ui/ * * diff --git a/package.json b/package.json index c17432a..e448c10 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "semantic-ui-sidebar", - "version": "2.4.1", + "version": "2.5.0", "title": "Semantic UI - Sidebar", "description": "Single component release of sidebar", "homepage": "http://www.semantic-ui.com", diff --git a/sidebar.css b/sidebar.css index 769af8a..da07979 100755 --- a/sidebar.css +++ b/sidebar.css @@ -1,5 +1,5 @@ /*! - * # Semantic UI 2.4.0 - Sidebar + * # Semantic UI 2.5.0 - Sidebar * http://github.com/semantic-org/semantic-ui/ * * @@ -21,11 +21,9 @@ left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; - -webkit-transition: none; transition: none; will-change: transform; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); visibility: hidden; -webkit-overflow-scrolling: touch; height: 100% !important; @@ -49,14 +47,12 @@ .ui.left.sidebar { right: auto; left: 0px; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } .ui.right.sidebar { right: 0px !important; left: auto !important; - -webkit-transform: translate3d(100%, 0%, 0); - transform: translate3d(100%, 0%, 0); + transform: translate3d(100%, 0%, 0); } .ui.top.sidebar, .ui.bottom.sidebar { @@ -66,14 +62,12 @@ .ui.top.sidebar { top: 0px !important; bottom: auto !important; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); } .ui.bottom.sidebar { top: auto !important; bottom: 0px !important; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } /*-------------- @@ -93,8 +87,7 @@ body.pushable { /* Page Context */ .pushable:not(body) { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } .pushable:not(body) > .ui.sidebar, .pushable:not(body) > .fixed, @@ -110,10 +103,7 @@ body.pushable { position: fixed; -webkit-backface-visibility: hidden; backface-visibility: hidden; - -webkit-transition: -webkit-transform 500ms ease; - transition: -webkit-transform 500ms ease; transition: transform 500ms ease; - transition: transform 500ms ease, -webkit-transform 500ms ease; will-change: transform; z-index: 101; } @@ -128,10 +118,7 @@ body.pushable { backface-visibility: hidden; overflow: hidden; min-height: 100%; - -webkit-transition: -webkit-transform 500ms ease; - transition: -webkit-transform 500ms ease; transition: transform 500ms ease; - transition: transform 500ms ease, -webkit-transform 500ms ease; z-index: 2; } body.pushable > .pusher { @@ -155,7 +142,6 @@ body.pushable > .pusher { background-color: rgba(0, 0, 0, 0.4); overflow: hidden; opacity: 0; - -webkit-transition: opacity 500ms; transition: opacity 500ms; will-change: opacity; z-index: 1000; @@ -199,42 +185,35 @@ body.pushable > .pusher { .ui.visible.sidebar { visibility: visible; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } /* Shadow Direction */ .ui.left.visible.sidebar, .ui.right.visible.sidebar { - -webkit-box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); - box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); + box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); } .ui.top.visible.sidebar, .ui.bottom.visible.sidebar { - -webkit-box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); - box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); + box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); } /* Visible On Load */ .ui.visible.left.sidebar ~ .fixed, .ui.visible.left.sidebar ~ .pusher { - -webkit-transform: translate3d(260px, 0, 0); - transform: translate3d(260px, 0, 0); + transform: translate3d(260px, 0, 0); } .ui.visible.right.sidebar ~ .fixed, .ui.visible.right.sidebar ~ .pusher { - -webkit-transform: translate3d(-260px, 0, 0); - transform: translate3d(-260px, 0, 0); + transform: translate3d(-260px, 0, 0); } .ui.visible.top.sidebar ~ .fixed, .ui.visible.top.sidebar ~ .pusher { - -webkit-transform: translate3d(0, 36px, 0); - transform: translate3d(0, 36px, 0); + transform: translate3d(0, 36px, 0); } .ui.visible.bottom.sidebar ~ .fixed, .ui.visible.bottom.sidebar ~ .pusher { - -webkit-transform: translate3d(0, -36px, 0); - transform: translate3d(0, -36px, 0); + transform: translate3d(0, -36px, 0); } /* opposite sides visible forces content overlay */ @@ -242,8 +221,7 @@ body.pushable > .pusher { .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher, .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed, .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } /*-------------- @@ -287,45 +265,37 @@ body.pushable > .pusher { /* Left Visible */ .ui.visible.thin.left.sidebar ~ .fixed, .ui.visible.thin.left.sidebar ~ .pusher { - -webkit-transform: translate3d(150px, 0, 0); - transform: translate3d(150px, 0, 0); + transform: translate3d(150px, 0, 0); } .ui.visible[class*="very thin"].left.sidebar ~ .fixed, .ui.visible[class*="very thin"].left.sidebar ~ .pusher { - -webkit-transform: translate3d(60px, 0, 0); - transform: translate3d(60px, 0, 0); + transform: translate3d(60px, 0, 0); } .ui.visible.wide.left.sidebar ~ .fixed, .ui.visible.wide.left.sidebar ~ .pusher { - -webkit-transform: translate3d(350px, 0, 0); - transform: translate3d(350px, 0, 0); + transform: translate3d(350px, 0, 0); } .ui.visible[class*="very wide"].left.sidebar ~ .fixed, .ui.visible[class*="very wide"].left.sidebar ~ .pusher { - -webkit-transform: translate3d(475px, 0, 0); - transform: translate3d(475px, 0, 0); + transform: translate3d(475px, 0, 0); } /* Right Visible */ .ui.visible.thin.right.sidebar ~ .fixed, .ui.visible.thin.right.sidebar ~ .pusher { - -webkit-transform: translate3d(-150px, 0, 0); - transform: translate3d(-150px, 0, 0); + transform: translate3d(-150px, 0, 0); } .ui.visible[class*="very thin"].right.sidebar ~ .fixed, .ui.visible[class*="very thin"].right.sidebar ~ .pusher { - -webkit-transform: translate3d(-60px, 0, 0); - transform: translate3d(-60px, 0, 0); + transform: translate3d(-60px, 0, 0); } .ui.visible.wide.right.sidebar ~ .fixed, .ui.visible.wide.right.sidebar ~ .pusher { - -webkit-transform: translate3d(-350px, 0, 0); - transform: translate3d(-350px, 0, 0); + transform: translate3d(-350px, 0, 0); } .ui.visible[class*="very wide"].right.sidebar ~ .fixed, .ui.visible[class*="very wide"].right.sidebar ~ .pusher { - -webkit-transform: translate3d(-475px, 0, 0); - transform: translate3d(-475px, 0, 0); + transform: translate3d(-475px, 0, 0); } @@ -346,54 +316,42 @@ body.pushable > .pusher { /* Initial */ .ui.left.overlay.sidebar { - -webkit-transform: translate3d(-100%, 0%, 0); - transform: translate3d(-100%, 0%, 0); + transform: translate3d(-100%, 0%, 0); } .ui.right.overlay.sidebar { - -webkit-transform: translate3d(100%, 0%, 0); - transform: translate3d(100%, 0%, 0); + transform: translate3d(100%, 0%, 0); } .ui.top.overlay.sidebar { - -webkit-transform: translate3d(0%, -100%, 0); - transform: translate3d(0%, -100%, 0); + transform: translate3d(0%, -100%, 0); } .ui.bottom.overlay.sidebar { - -webkit-transform: translate3d(0%, 100%, 0); - transform: translate3d(0%, 100%, 0); + transform: translate3d(0%, 100%, 0); } /* Animation */ .animating.ui.overlay.sidebar, .ui.visible.overlay.sidebar { - -webkit-transition: -webkit-transform 500ms ease; - transition: -webkit-transform 500ms ease; transition: transform 500ms ease; - transition: transform 500ms ease, -webkit-transform 500ms ease; } /* End - Sidebar */ .ui.visible.left.overlay.sidebar { - -webkit-transform: translate3d(0%, 0%, 0); - transform: translate3d(0%, 0%, 0); + transform: translate3d(0%, 0%, 0); } .ui.visible.right.overlay.sidebar { - -webkit-transform: translate3d(0%, 0%, 0); - transform: translate3d(0%, 0%, 0); + transform: translate3d(0%, 0%, 0); } .ui.visible.top.overlay.sidebar { - -webkit-transform: translate3d(0%, 0%, 0); - transform: translate3d(0%, 0%, 0); + transform: translate3d(0%, 0%, 0); } .ui.visible.bottom.overlay.sidebar { - -webkit-transform: translate3d(0%, 0%, 0); - transform: translate3d(0%, 0%, 0); + transform: translate3d(0%, 0%, 0); } /* End - Pusher */ .ui.visible.overlay.sidebar ~ .fixed, .ui.visible.overlay.sidebar ~ .pusher { - -webkit-transform: none !important; - transform: none !important; + transform: none !important; } /*-------------- @@ -403,35 +361,27 @@ body.pushable > .pusher { /* Initial */ .ui.push.sidebar { - -webkit-transition: -webkit-transform 500ms ease; - transition: -webkit-transform 500ms ease; transition: transform 500ms ease; - transition: transform 500ms ease, -webkit-transform 500ms ease; z-index: 102; } /* Sidebar - Initial */ .ui.left.push.sidebar { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } .ui.right.push.sidebar { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); } .ui.top.push.sidebar { - -webkit-transform: translate3d(0%, -100%, 0); - transform: translate3d(0%, -100%, 0); + transform: translate3d(0%, -100%, 0); } .ui.bottom.push.sidebar { - -webkit-transform: translate3d(0%, 100%, 0); - transform: translate3d(0%, 100%, 0); + transform: translate3d(0%, 100%, 0); } /* End */ .ui.visible.push.sidebar { - -webkit-transform: translate3d(0%, 0, 0); - transform: translate3d(0%, 0, 0); + transform: translate3d(0%, 0, 0); } /*-------------- @@ -441,19 +391,14 @@ body.pushable > .pusher { /* Initial */ .ui.uncover.sidebar { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); z-index: 1; } /* End */ .ui.visible.uncover.sidebar { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - -webkit-transition: -webkit-transform 500ms ease; - transition: -webkit-transform 500ms ease; + transform: translate3d(0, 0, 0); transition: transform 500ms ease; - transition: transform 500ms ease, -webkit-transform 500ms ease; } /*-------------- @@ -468,34 +413,26 @@ body.pushable > .pusher { /* Sidebar - Initial */ .ui.left.slide.along.sidebar { - -webkit-transform: translate3d(-50%, 0, 0); - transform: translate3d(-50%, 0, 0); + transform: translate3d(-50%, 0, 0); } .ui.right.slide.along.sidebar { - -webkit-transform: translate3d(50%, 0, 0); - transform: translate3d(50%, 0, 0); + transform: translate3d(50%, 0, 0); } .ui.top.slide.along.sidebar { - -webkit-transform: translate3d(0, -50%, 0); - transform: translate3d(0, -50%, 0); + transform: translate3d(0, -50%, 0); } .ui.bottom.slide.along.sidebar { - -webkit-transform: translate3d(0%, 50%, 0); - transform: translate3d(0%, 50%, 0); + transform: translate3d(0%, 50%, 0); } /* Animation */ .ui.animating.slide.along.sidebar { - -webkit-transition: -webkit-transform 500ms ease; - transition: -webkit-transform 500ms ease; transition: transform 500ms ease; - transition: transform 500ms ease, -webkit-transform 500ms ease; } /* End */ .ui.visible.slide.along.sidebar { - -webkit-transform: translate3d(0%, 0, 0); - transform: translate3d(0%, 0, 0); + transform: translate3d(0%, 0, 0); } /*-------------- @@ -510,34 +447,26 @@ body.pushable > .pusher { /* Sidebar - Initial */ .ui.left.slide.out.sidebar { - -webkit-transform: translate3d(50%, 0, 0); - transform: translate3d(50%, 0, 0); + transform: translate3d(50%, 0, 0); } .ui.right.slide.out.sidebar { - -webkit-transform: translate3d(-50%, 0, 0); - transform: translate3d(-50%, 0, 0); + transform: translate3d(-50%, 0, 0); } .ui.top.slide.out.sidebar { - -webkit-transform: translate3d(0%, 50%, 0); - transform: translate3d(0%, 50%, 0); + transform: translate3d(0%, 50%, 0); } .ui.bottom.slide.out.sidebar { - -webkit-transform: translate3d(0%, -50%, 0); - transform: translate3d(0%, -50%, 0); + transform: translate3d(0%, -50%, 0); } /* Animation */ .ui.animating.slide.out.sidebar { - -webkit-transition: -webkit-transform 500ms ease; - transition: -webkit-transform 500ms ease; transition: transform 500ms ease; - transition: transform 500ms ease, -webkit-transform 500ms ease; } /* End */ .ui.visible.slide.out.sidebar { - -webkit-transform: translate3d(0%, 0, 0); - transform: translate3d(0%, 0, 0); + transform: translate3d(0%, 0, 0); } /*-------------- @@ -547,55 +476,41 @@ body.pushable > .pusher { /* Initial */ .ui.scale.down.sidebar { - -webkit-transition: -webkit-transform 500ms ease; - transition: -webkit-transform 500ms ease; transition: transform 500ms ease; - transition: transform 500ms ease, -webkit-transform 500ms ease; z-index: 102; } /* Sidebar - Initial */ .ui.left.scale.down.sidebar { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } .ui.right.scale.down.sidebar { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); } .ui.top.scale.down.sidebar { - -webkit-transform: translate3d(0%, -100%, 0); - transform: translate3d(0%, -100%, 0); + transform: translate3d(0%, -100%, 0); } .ui.bottom.scale.down.sidebar { - -webkit-transform: translate3d(0%, 100%, 0); - transform: translate3d(0%, 100%, 0); + transform: translate3d(0%, 100%, 0); } /* Pusher - Initial */ .ui.scale.down.left.sidebar ~ .pusher { - -webkit-transform-origin: 75% 50%; - transform-origin: 75% 50%; + transform-origin: 75% 50%; } .ui.scale.down.right.sidebar ~ .pusher { - -webkit-transform-origin: 25% 50%; - transform-origin: 25% 50%; + transform-origin: 25% 50%; } .ui.scale.down.top.sidebar ~ .pusher { - -webkit-transform-origin: 50% 75%; - transform-origin: 50% 75%; + transform-origin: 50% 75%; } .ui.scale.down.bottom.sidebar ~ .pusher { - -webkit-transform-origin: 50% 25%; - transform-origin: 50% 25%; + transform-origin: 50% 25%; } /* Animation */ .ui.animating.scale.down > .visible.ui.sidebar { - -webkit-transition: -webkit-transform 500ms ease; - transition: -webkit-transform 500ms ease; transition: transform 500ms ease; - transition: transform 500ms ease, -webkit-transform 500ms ease; } .ui.visible.scale.down.sidebar ~ .pusher, .ui.animating.scale.down.sidebar ~ .pusher { @@ -607,12 +522,10 @@ body.pushable > .pusher { /* End */ .ui.visible.scale.down.sidebar { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } .ui.visible.scale.down.sidebar ~ .pusher { - -webkit-transform: scale(0.75); - transform: scale(0.75); + transform: scale(0.75); } diff --git a/sidebar.js b/sidebar.js index cfdefa1..857e926 100755 --- a/sidebar.js +++ b/sidebar.js @@ -1,5 +1,5 @@ /*! - * # Semantic UI 2.4.1 - Sidebar + * # Semantic UI 2.5.0 - Sidebar * http://github.com/semantic-org/semantic-ui/ * * diff --git a/sidebar.min.css b/sidebar.min.css index 2abeab6..2199bc9 100755 --- a/sidebar.min.css +++ b/sidebar.min.css @@ -1,9 +1,9 @@ /*! - * # Semantic UI 2.4.0 - Sidebar + * # Semantic UI 2.5.0 - Sidebar * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * - */.ui.sidebar{position:fixed;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:none;transition:none;will-change:transform;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:hidden;-webkit-overflow-scrolling:touch;height:100%!important;max-height:100%;border-radius:0!important;margin:0!important;overflow-y:auto!important;z-index:102}.ui.sidebar>*{-webkit-backface-visibility:hidden;backface-visibility:hidden}.ui.left.sidebar{right:auto;left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.ui.right.sidebar{right:0!important;left:auto!important;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.ui.bottom.sidebar,.ui.top.sidebar{width:100%!important;height:auto!important}.ui.top.sidebar{top:0!important;bottom:auto!important;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.ui.bottom.sidebar{top:auto!important;bottom:0!important;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.pushable{height:100%;overflow-x:hidden;padding:0!important}body.pushable{background:#545454!important}.pushable:not(body){-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.pushable:not(body)>.fixed,.pushable:not(body)>.pusher:after,.pushable:not(body)>.ui.sidebar{position:absolute}.pushable>.fixed{position:fixed;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;will-change:transform;z-index:101}.pushable>.pusher{position:relative;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;min-height:100%;-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;z-index:2}body.pushable>.pusher{background:#fff}.pushable>.pusher{background:inherit}.pushable>.pusher:after{position:fixed;top:0;right:0;content:'';background-color:rgba(0,0,0,.4);overflow:hidden;opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s;will-change:opacity;z-index:1000}.ui.sidebar.menu .item{border-radius:0!important}.pushable>.pusher.dimmed:after{width:100%!important;height:100%!important;opacity:1!important}.ui.animating.sidebar{visibility:visible}.ui.visible.sidebar{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.left.visible.sidebar,.ui.right.visible.sidebar{-webkit-box-shadow:0 0 20px rgba(34,36,38,.15);box-shadow:0 0 20px rgba(34,36,38,.15)}.ui.bottom.visible.sidebar,.ui.top.visible.sidebar{-webkit-box-shadow:0 0 20px rgba(34,36,38,.15);box-shadow:0 0 20px rgba(34,36,38,.15)}.ui.visible.left.sidebar~.fixed,.ui.visible.left.sidebar~.pusher{-webkit-transform:translate3d(260px,0,0);transform:translate3d(260px,0,0)}.ui.visible.right.sidebar~.fixed,.ui.visible.right.sidebar~.pusher{-webkit-transform:translate3d(-260px,0,0);transform:translate3d(-260px,0,0)}.ui.visible.top.sidebar~.fixed,.ui.visible.top.sidebar~.pusher{-webkit-transform:translate3d(0,36px,0);transform:translate3d(0,36px,0)}.ui.visible.bottom.sidebar~.fixed,.ui.visible.bottom.sidebar~.pusher{-webkit-transform:translate3d(0,-36px,0);transform:translate3d(0,-36px,0)}.ui.visible.left.sidebar~.ui.visible.right.sidebar~.fixed,.ui.visible.left.sidebar~.ui.visible.right.sidebar~.pusher,.ui.visible.right.sidebar~.ui.visible.left.sidebar~.fixed,.ui.visible.right.sidebar~.ui.visible.left.sidebar~.pusher{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.thin.left.sidebar,.ui.thin.right.sidebar{width:150px}.ui[class*="very thin"].left.sidebar,.ui[class*="very thin"].right.sidebar{width:60px}.ui.left.sidebar,.ui.right.sidebar{width:260px}.ui.wide.left.sidebar,.ui.wide.right.sidebar{width:350px}.ui[class*="very wide"].left.sidebar,.ui[class*="very wide"].right.sidebar{width:475px}.ui.visible.thin.left.sidebar~.fixed,.ui.visible.thin.left.sidebar~.pusher{-webkit-transform:translate3d(150px,0,0);transform:translate3d(150px,0,0)}.ui.visible[class*="very thin"].left.sidebar~.fixed,.ui.visible[class*="very thin"].left.sidebar~.pusher{-webkit-transform:translate3d(60px,0,0);transform:translate3d(60px,0,0)}.ui.visible.wide.left.sidebar~.fixed,.ui.visible.wide.left.sidebar~.pusher{-webkit-transform:translate3d(350px,0,0);transform:translate3d(350px,0,0)}.ui.visible[class*="very wide"].left.sidebar~.fixed,.ui.visible[class*="very wide"].left.sidebar~.pusher{-webkit-transform:translate3d(475px,0,0);transform:translate3d(475px,0,0)}.ui.visible.thin.right.sidebar~.fixed,.ui.visible.thin.right.sidebar~.pusher{-webkit-transform:translate3d(-150px,0,0);transform:translate3d(-150px,0,0)}.ui.visible[class*="very thin"].right.sidebar~.fixed,.ui.visible[class*="very thin"].right.sidebar~.pusher{-webkit-transform:translate3d(-60px,0,0);transform:translate3d(-60px,0,0)}.ui.visible.wide.right.sidebar~.fixed,.ui.visible.wide.right.sidebar~.pusher{-webkit-transform:translate3d(-350px,0,0);transform:translate3d(-350px,0,0)}.ui.visible[class*="very wide"].right.sidebar~.fixed,.ui.visible[class*="very wide"].right.sidebar~.pusher{-webkit-transform:translate3d(-475px,0,0);transform:translate3d(-475px,0,0)}.ui.overlay.sidebar{z-index:102}.ui.left.overlay.sidebar{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.ui.right.overlay.sidebar{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.ui.top.overlay.sidebar{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.ui.bottom.overlay.sidebar{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.animating.ui.overlay.sidebar,.ui.visible.overlay.sidebar{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.ui.visible.left.overlay.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.visible.right.overlay.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.visible.top.overlay.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.visible.bottom.overlay.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.visible.overlay.sidebar~.fixed,.ui.visible.overlay.sidebar~.pusher{-webkit-transform:none!important;transform:none!important}.ui.push.sidebar{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;z-index:102}.ui.left.push.sidebar{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.ui.right.push.sidebar{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.ui.top.push.sidebar{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.ui.bottom.push.sidebar{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.ui.visible.push.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.uncover.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:1}.ui.visible.uncover.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.ui.slide.along.sidebar{z-index:1}.ui.left.slide.along.sidebar{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.ui.right.slide.along.sidebar{-webkit-transform:translate3d(50%,0,0);transform:translate3d(50%,0,0)}.ui.top.slide.along.sidebar{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.ui.bottom.slide.along.sidebar{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.ui.animating.slide.along.sidebar{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.ui.visible.slide.along.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.slide.out.sidebar{z-index:1}.ui.left.slide.out.sidebar{-webkit-transform:translate3d(50%,0,0);transform:translate3d(50%,0,0)}.ui.right.slide.out.sidebar{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.ui.top.slide.out.sidebar{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.ui.bottom.slide.out.sidebar{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.ui.animating.slide.out.sidebar{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.ui.visible.slide.out.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.scale.down.sidebar{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;z-index:102}.ui.left.scale.down.sidebar{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.ui.right.scale.down.sidebar{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.ui.top.scale.down.sidebar{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.ui.bottom.scale.down.sidebar{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.ui.scale.down.left.sidebar~.pusher{-webkit-transform-origin:75% 50%;transform-origin:75% 50%}.ui.scale.down.right.sidebar~.pusher{-webkit-transform-origin:25% 50%;transform-origin:25% 50%}.ui.scale.down.top.sidebar~.pusher{-webkit-transform-origin:50% 75%;transform-origin:50% 75%}.ui.scale.down.bottom.sidebar~.pusher{-webkit-transform-origin:50% 25%;transform-origin:50% 25%}.ui.animating.scale.down>.visible.ui.sidebar{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.ui.animating.scale.down.sidebar~.pusher,.ui.visible.scale.down.sidebar~.pusher{display:block!important;width:100%;height:100%;overflow:hidden!important}.ui.visible.scale.down.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.visible.scale.down.sidebar~.pusher{-webkit-transform:scale(.75);transform:scale(.75)} \ No newline at end of file + */.ui.sidebar{position:fixed;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:none;will-change:transform;transform:translate3d(0,0,0);visibility:hidden;-webkit-overflow-scrolling:touch;height:100%!important;max-height:100%;border-radius:0!important;margin:0!important;overflow-y:auto!important;z-index:102}.ui.sidebar>*{-webkit-backface-visibility:hidden;backface-visibility:hidden}.ui.left.sidebar{right:auto;left:0;transform:translate3d(-100%,0,0)}.ui.right.sidebar{right:0!important;left:auto!important;transform:translate3d(100%,0,0)}.ui.bottom.sidebar,.ui.top.sidebar{width:100%!important;height:auto!important}.ui.top.sidebar{top:0!important;bottom:auto!important;transform:translate3d(0,-100%,0)}.ui.bottom.sidebar{top:auto!important;bottom:0!important;transform:translate3d(0,100%,0)}.pushable{height:100%;overflow-x:hidden;padding:0!important}body.pushable{background:#545454!important}.pushable:not(body){transform:translate3d(0,0,0)}.pushable:not(body)>.fixed,.pushable:not(body)>.pusher:after,.pushable:not(body)>.ui.sidebar{position:absolute}.pushable>.fixed{position:fixed;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .5s ease;will-change:transform;z-index:101}.pushable>.pusher{position:relative;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;min-height:100%;transition:transform .5s ease;z-index:2}body.pushable>.pusher{background:#fff}.pushable>.pusher{background:inherit}.pushable>.pusher:after{position:fixed;top:0;right:0;content:'';background-color:rgba(0,0,0,.4);overflow:hidden;opacity:0;transition:opacity .5s;will-change:opacity;z-index:1000}.ui.sidebar.menu .item{border-radius:0!important}.pushable>.pusher.dimmed:after{width:100%!important;height:100%!important;opacity:1!important}.ui.animating.sidebar{visibility:visible}.ui.visible.sidebar{visibility:visible;transform:translate3d(0,0,0)}.ui.left.visible.sidebar,.ui.right.visible.sidebar{box-shadow:0 0 20px rgba(34,36,38,.15)}.ui.bottom.visible.sidebar,.ui.top.visible.sidebar{box-shadow:0 0 20px rgba(34,36,38,.15)}.ui.visible.left.sidebar~.fixed,.ui.visible.left.sidebar~.pusher{transform:translate3d(260px,0,0)}.ui.visible.right.sidebar~.fixed,.ui.visible.right.sidebar~.pusher{transform:translate3d(-260px,0,0)}.ui.visible.top.sidebar~.fixed,.ui.visible.top.sidebar~.pusher{transform:translate3d(0,36px,0)}.ui.visible.bottom.sidebar~.fixed,.ui.visible.bottom.sidebar~.pusher{transform:translate3d(0,-36px,0)}.ui.visible.left.sidebar~.ui.visible.right.sidebar~.fixed,.ui.visible.left.sidebar~.ui.visible.right.sidebar~.pusher,.ui.visible.right.sidebar~.ui.visible.left.sidebar~.fixed,.ui.visible.right.sidebar~.ui.visible.left.sidebar~.pusher{transform:translate3d(0,0,0)}.ui.thin.left.sidebar,.ui.thin.right.sidebar{width:150px}.ui[class*="very thin"].left.sidebar,.ui[class*="very thin"].right.sidebar{width:60px}.ui.left.sidebar,.ui.right.sidebar{width:260px}.ui.wide.left.sidebar,.ui.wide.right.sidebar{width:350px}.ui[class*="very wide"].left.sidebar,.ui[class*="very wide"].right.sidebar{width:475px}.ui.visible.thin.left.sidebar~.fixed,.ui.visible.thin.left.sidebar~.pusher{transform:translate3d(150px,0,0)}.ui.visible[class*="very thin"].left.sidebar~.fixed,.ui.visible[class*="very thin"].left.sidebar~.pusher{transform:translate3d(60px,0,0)}.ui.visible.wide.left.sidebar~.fixed,.ui.visible.wide.left.sidebar~.pusher{transform:translate3d(350px,0,0)}.ui.visible[class*="very wide"].left.sidebar~.fixed,.ui.visible[class*="very wide"].left.sidebar~.pusher{transform:translate3d(475px,0,0)}.ui.visible.thin.right.sidebar~.fixed,.ui.visible.thin.right.sidebar~.pusher{transform:translate3d(-150px,0,0)}.ui.visible[class*="very thin"].right.sidebar~.fixed,.ui.visible[class*="very thin"].right.sidebar~.pusher{transform:translate3d(-60px,0,0)}.ui.visible.wide.right.sidebar~.fixed,.ui.visible.wide.right.sidebar~.pusher{transform:translate3d(-350px,0,0)}.ui.visible[class*="very wide"].right.sidebar~.fixed,.ui.visible[class*="very wide"].right.sidebar~.pusher{transform:translate3d(-475px,0,0)}.ui.overlay.sidebar{z-index:102}.ui.left.overlay.sidebar{transform:translate3d(-100%,0,0)}.ui.right.overlay.sidebar{transform:translate3d(100%,0,0)}.ui.top.overlay.sidebar{transform:translate3d(0,-100%,0)}.ui.bottom.overlay.sidebar{transform:translate3d(0,100%,0)}.animating.ui.overlay.sidebar,.ui.visible.overlay.sidebar{transition:transform .5s ease}.ui.visible.left.overlay.sidebar{transform:translate3d(0,0,0)}.ui.visible.right.overlay.sidebar{transform:translate3d(0,0,0)}.ui.visible.top.overlay.sidebar{transform:translate3d(0,0,0)}.ui.visible.bottom.overlay.sidebar{transform:translate3d(0,0,0)}.ui.visible.overlay.sidebar~.fixed,.ui.visible.overlay.sidebar~.pusher{transform:none!important}.ui.push.sidebar{transition:transform .5s ease;z-index:102}.ui.left.push.sidebar{transform:translate3d(-100%,0,0)}.ui.right.push.sidebar{transform:translate3d(100%,0,0)}.ui.top.push.sidebar{transform:translate3d(0,-100%,0)}.ui.bottom.push.sidebar{transform:translate3d(0,100%,0)}.ui.visible.push.sidebar{transform:translate3d(0,0,0)}.ui.uncover.sidebar{transform:translate3d(0,0,0);z-index:1}.ui.visible.uncover.sidebar{transform:translate3d(0,0,0);transition:transform .5s ease}.ui.slide.along.sidebar{z-index:1}.ui.left.slide.along.sidebar{transform:translate3d(-50%,0,0)}.ui.right.slide.along.sidebar{transform:translate3d(50%,0,0)}.ui.top.slide.along.sidebar{transform:translate3d(0,-50%,0)}.ui.bottom.slide.along.sidebar{transform:translate3d(0,50%,0)}.ui.animating.slide.along.sidebar{transition:transform .5s ease}.ui.visible.slide.along.sidebar{transform:translate3d(0,0,0)}.ui.slide.out.sidebar{z-index:1}.ui.left.slide.out.sidebar{transform:translate3d(50%,0,0)}.ui.right.slide.out.sidebar{transform:translate3d(-50%,0,0)}.ui.top.slide.out.sidebar{transform:translate3d(0,50%,0)}.ui.bottom.slide.out.sidebar{transform:translate3d(0,-50%,0)}.ui.animating.slide.out.sidebar{transition:transform .5s ease}.ui.visible.slide.out.sidebar{transform:translate3d(0,0,0)}.ui.scale.down.sidebar{transition:transform .5s ease;z-index:102}.ui.left.scale.down.sidebar{transform:translate3d(-100%,0,0)}.ui.right.scale.down.sidebar{transform:translate3d(100%,0,0)}.ui.top.scale.down.sidebar{transform:translate3d(0,-100%,0)}.ui.bottom.scale.down.sidebar{transform:translate3d(0,100%,0)}.ui.scale.down.left.sidebar~.pusher{transform-origin:75% 50%}.ui.scale.down.right.sidebar~.pusher{transform-origin:25% 50%}.ui.scale.down.top.sidebar~.pusher{transform-origin:50% 75%}.ui.scale.down.bottom.sidebar~.pusher{transform-origin:50% 25%}.ui.animating.scale.down>.visible.ui.sidebar{transition:transform .5s ease}.ui.animating.scale.down.sidebar~.pusher,.ui.visible.scale.down.sidebar~.pusher{display:block!important;width:100%;height:100%;overflow:hidden!important}.ui.visible.scale.down.sidebar{transform:translate3d(0,0,0)}.ui.visible.scale.down.sidebar~.pusher{transform:scale(.75)} \ No newline at end of file diff --git a/sidebar.min.js b/sidebar.min.js index 3aa8535..78849ec 100755 --- a/sidebar.min.js +++ b/sidebar.min.js @@ -1 +1 @@ -!function(D,j,R,z){"use strict";j=void 0!==j&&j.Math==Math?j:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),D.fn.sidebar=function(C){var k,e=D(this),w=D(j),T=D(R),x=D("html"),S=D("head"),A=e.selector||"",F=(new Date).getTime(),O=[],P=C,E="string"==typeof P,H=[].slice.call(arguments,1),M=j.requestAnimationFrame||j.mozRequestAnimationFrame||j.webkitRequestAnimationFrame||j.msRequestAnimationFrame||function(e){setTimeout(e,0)};return e.each(function(){var s,a,e,i,l,c,d=D.isPlainObject(C)?D.extend(!0,{},D.fn.sidebar.settings,C):D.extend({},D.fn.sidebar.settings),n=d.selector,r=d.className,t=d.namespace,o=d.regExp,u=d.error,f="."+t,b="module-"+t,h=D(this),m=D(d.context),g=h.children(n.sidebar),v=(m.children(n.fixed),m.children(n.pusher)),p=this,y=h.data(b);c={initialize:function(){c.debug("Initializing sidebar",C),c.create.id(),l=c.get.transitionEvent(),d.delaySetup?M(c.setup.layout):c.setup.layout(),M(function(){c.setup.cache()}),c.instantiate()},instantiate:function(){c.verbose("Storing instance of module",c),y=c,h.data(b,c)},create:{id:function(){e=(Math.random().toString(16)+"000000000").substr(2,8),a="."+e,c.verbose("Creating unique id for element",e)}},destroy:function(){c.verbose("Destroying previous module for",h),h.off(f).removeData(b),c.is.ios()&&c.remove.ios(),m.off(a),w.off(a),T.off(a)},event:{clickaway:function(e){var i=0=p.scrollHeight&&(p.scrollTop=p.scrollHeight-p.offsetHeight-1)},scroll:function(e){0===D(e.target).closest(n.sidebar).length&&e.preventDefault()}},bind:{clickaway:function(){c.verbose("Adding clickaway events to context",m),d.closable&&m.on("click"+a,c.event.clickaway).on("touchend"+a,c.event.clickaway)},scrollLock:function(){d.scrollLock&&(c.debug("Disabling page scroll"),w.on("DOMMouseScroll"+a,c.event.scroll)),c.verbose("Adding events to contain sidebar scroll"),T.on("touchmove"+a,c.event.touch),h.on("scroll"+f,c.event.containScroll)}},unbind:{clickaway:function(){c.verbose("Removing clickaway events from context",m),m.off(a)},scrollLock:function(){c.verbose("Removing scroll lock from page"),T.off(a),w.off(a),h.off("scroll"+f)}},add:{inlineCSS:function(){var e,i=c.cache.width||h.outerWidth(),n=c.cache.height||h.outerHeight(),t=c.is.rtl(),o=c.get.direction(),r={left:i,right:-i,top:n,bottom:-n};t&&(c.verbose("RTL detected, flipping widths"),r.left=-i,r.right=i),e="").appendTo(S),c.debug("Adding sizing css to head",s)}},refresh:function(){c.verbose("Refreshing selector cache"),m=D(d.context),g=m.children(n.sidebar),v=m.children(n.pusher),m.children(n.fixed),c.clear.cache()},refreshSidebars:function(){c.verbose("Refreshing other sidebars"),g=m.children(n.sidebar)},repaint:function(){c.verbose("Forcing repaint event"),p.style.display="none";p.offsetHeight;p.scrollTop=p.scrollTop,p.style.display=""},setup:{cache:function(){c.cache={width:h.outerWidth(),height:h.outerHeight(),rtl:"rtl"==h.css("direction")}},layout:function(){0===m.children(n.pusher).length&&(c.debug("Adding wrapper element for sidebar"),c.error(u.pusher),v=D('
'),m.children().not(n.omitted).not(g).wrapAll(v),c.refresh()),0!==h.nextAll(n.pusher).length&&h.nextAll(n.pusher)[0]===v[0]||(c.debug("Moved sidebar to correct parent element"),c.error(u.movedSidebar,p),h.detach().prependTo(m),c.refresh()),c.clear.cache(),c.set.pushable(),c.set.direction()}},attachEvents:function(e,i){var n=D(e);i=D.isFunction(c[i])?c[i]:c.toggle,0=v.scrollHeight&&(v.scrollTop=v.scrollHeight-v.offsetHeight-1)},scroll:function(e){0===D(e.target).closest(n.sidebar).length&&e.preventDefault()}},bind:{clickaway:function(){y.verbose("Adding clickaway events to context",h),c.closable&&h.on("click"+a,y.event.clickaway).on("touchend"+a,y.event.clickaway)},scrollLock:function(){c.scrollLock&&(y.debug("Disabling page scroll"),w.on("DOMMouseScroll"+a,y.event.scroll)),y.verbose("Adding events to contain sidebar scroll"),T.on("touchmove"+a,y.event.touch),b.on("scroll"+u,y.event.containScroll)}},unbind:{clickaway:function(){y.verbose("Removing clickaway events from context",h),h.off(a)},scrollLock:function(){y.verbose("Removing scroll lock from page"),T.off(a),w.off(a),b.off("scroll"+u)}},add:{inlineCSS:function(){var e,i=y.cache.width||b.outerWidth(),n=y.cache.height||b.outerHeight(),t=y.is.rtl(),o=y.get.direction(),r={left:i,right:-i,top:n,bottom:-n};t&&(y.verbose("RTL detected, flipping widths"),r.left=-i,r.right=i),e="").appendTo(S),y.debug("Adding sizing css to head",s)}},refresh:function(){y.verbose("Refreshing selector cache"),h=D(c.context),m=h.children(n.sidebar),g=h.children(n.pusher),h.children(n.fixed),y.clear.cache()},refreshSidebars:function(){y.verbose("Refreshing other sidebars"),m=h.children(n.sidebar)},repaint:function(){y.verbose("Forcing repaint event"),v.style.display="none";v.offsetHeight;v.scrollTop=v.scrollTop,v.style.display=""},setup:{cache:function(){y.cache={width:b.outerWidth(),height:b.outerHeight(),rtl:"rtl"==b.css("direction")}},layout:function(){0===h.children(n.pusher).length&&(y.debug("Adding wrapper element for sidebar"),y.error(d.pusher),g=D('
'),h.children().not(n.omitted).not(m).wrapAll(g),y.refresh()),0!==b.nextAll(n.pusher).length&&b.nextAll(n.pusher)[0]===g[0]||(y.debug("Moved sidebar to correct parent element"),y.error(d.movedSidebar,v),b.detach().prependTo(h),y.refresh()),y.clear.cache(),y.set.pushable(),y.set.direction()}},attachEvents:function(e,i){var n=D(e);i=D.isFunction(y[i])?y[i]:y.toggle,0