/*! * # Fomantic-UI 2.9.3 - Sidebar * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://opensource.org/licenses/MIT * */ /******************************* Sidebar *******************************/ /* Sidebar Menu */ .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; height: 100% !important; max-height: 100%; border-radius: 0 !important; margin: 0 !important; overflow-y: auto !important; -ms-scroll-chaining: none; overscroll-behavior: none; z-index: 102; } /* GPU Layers for Child Elements */ .ui.sidebar > * { -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* -------------- Direction --------------- */ .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.top.sidebar, .ui.bottom.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 --------------- */ .pushable.pushable.pushable { height: 100%; overflow-x: hidden; padding: 0; } .pushable.pushable.pushable.locked { overflow-y: hidden; background: inherit; } /* Whole Page */ body.pushable { background: #545454; } body.pushable.dimmed { background: inherit; } /* Page Context */ .pushable:not(body) { transform: translate3d(0, 0, 0); overflow-y: hidden; } .pushable:not(body) > .ui.sidebar, .pushable:not(body) > .fixed, .pushable:not(body) > .pusher::after { position: absolute; } /* -------------- Fixed --------------- */ .pushable > .fixed { position: fixed; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 500ms ease; will-change: transform; z-index: 101; } /* -------------- Page --------------- */ .pushable > .pusher { position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden; min-height: 100%; transition: transform 500ms ease; z-index: 2; /* Pusher should inherit background from context */ background: inherit; } .pushable > .pusher:not(.overflowing) { overflow: hidden; } body.pushable > .pusher { background: #fff; } /* -------------- Dimmer --------------- */ .pushable > .pusher::after { position: fixed; top: 0; right: 0; content: ""; background: rgba(0, 0, 0, 0.4); overflow: hidden; opacity: 0; transition: all 500ms; will-change: opacity; z-index: 1000; } /* -------------- Coupling --------------- */ .ui.sidebar.menu .item { border-radius: 0 !important; } /******************************* States *******************************/ /* -------------- Dimmed --------------- */ .pushable > .pusher.dimmed::after { width: 100% !important; height: 100% !important; opacity: 1 !important; } .pushable > .pusher.dimmed.blurring:not(.closing)::after { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(5px) grayscale(0.7); backdrop-filter: blur(5px) grayscale(0.7); } .pushable > .pusher.closing.dimmed::after { opacity: 0 !important; } /* -------------- Animating --------------- */ .ui.animating.sidebar { visibility: visible; } /* -------------- Visible --------------- */ .ui.visible.sidebar { visibility: visible; transform: translate3d(0, 0, 0); } /* Shadow Direction */ .ui.left.visible.sidebar, .ui.right.visible.sidebar { box-shadow: 0 0 20px rgba(34, 36, 38, 0.15); } .ui.top.visible.sidebar, .ui.bottom.visible.sidebar { box-shadow: 0 0 20px rgba(34, 36, 38, 0.15); } /* Visible On Load */ .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); } /* opposite sides visible forces content overlay */ .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); } /* -------------- iOS --------------- */ /******************************* Variations *******************************/ /* -------------- Width --------------- */ /* Left / Right */ .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; } /* Left Visible */ .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); } /* Right Visible */ .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); } /******************************* Animations *******************************/ /* -------------- Overlay --------------- */ /* Set-up */ .ui.overlay.sidebar { z-index: 102; } /* Initial */ .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); } /* Animation */ .animating.ui.overlay.sidebar, .ui.visible.overlay.sidebar { transition: transform 500ms ease; } /* End - Sidebar */ .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); } /* End - Pusher */ .ui.visible.overlay.sidebar ~ .fixed, .ui.visible.overlay.sidebar ~ .pusher { transform: none !important; } /* -------------- Push --------------- */ /* Initial */ .ui.push.sidebar { transition: transform 500ms ease; z-index: 102; } /* Sidebar - Initial */ .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); } /* End */ .ui.visible.push.sidebar { transform: translate3d(0, 0, 0); } /* -------------- Uncover --------------- */ /* Initial */ .ui.uncover.sidebar { transform: translate3d(0, 0, 0); z-index: 1; } /* End */ .ui.visible.uncover.sidebar { transform: translate3d(0, 0, 0); transition: transform 500ms ease; } /* -------------- Slide Along --------------- */ /* Initial */ .ui.slide.along.sidebar { z-index: 1; } /* Sidebar - Initial */ .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); } /* Animation */ .ui.animating.slide.along.sidebar { transition: transform 500ms ease; } /* End */ .ui.visible.slide.along.sidebar { transform: translate3d(0, 0, 0); } /* -------------- Slide Out --------------- */ /* Initial */ .ui.slide.out.sidebar { z-index: 1; } /* Sidebar - Initial */ .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); } /* Animation */ .ui.animating.slide.out.sidebar { transition: transform 500ms ease; } /* End */ .ui.visible.slide.out.sidebar { transform: translate3d(0, 0, 0); } /* -------------- Scale Down --------------- */ /* Initial */ .ui.scale.down.sidebar { transition: transform 500ms 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); } /* Pusher - Initial */ .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%; } /* Animation */ .ui.animating.scale.down > .visible.ui.sidebar { transition: transform 500ms ease; } .ui.visible.scale.down.sidebar ~ .pusher, .ui.animating.scale.down.sidebar ~ .pusher { display: block !important; width: 100%; height: 100%; overflow: hidden !important; } /* End */ .ui.visible.scale.down.sidebar { transform: translate3d(0, 0, 0); } .ui.visible.scale.down.sidebar ~ .pusher { transform: scale(0.75); } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/