/******************************* Semantic Module: Sidebar Author: Jack Lukic Notes: First Commit March 25, 2013 Sidebar Menu System *******************************/ /******************************* Sidebar *******************************/ body { -webkit-transition: margin 0.3s ease, -webkit-transform 0.3s ease; -moz-transition: margin 0.3s ease, -moz-transform 0.3s ease; -o-transition: margin 0.3s ease, transform 0.3s ease ; -ms-transition: margin 0.3s ease, transform 0.3s ease ; transition: margin 0.3s ease, transform 0.3s ease ; } .ui.sidebar { position: fixed; margin: 0 !important; width: 275px !important; height: 100% !important; -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important; -ms-overflow-y: auto; overflow-y: auto; top: 0px; left: 0px; z-index: 999; -webkit-transition: margin-left 0.3s ease, margin-top 0.3s ease; -moz-transition: margin-left 0.3s ease, margin-top 0.3s ease; -o-transition: margin-left 0.3s ease, margin-top 0.3s ease; -ms-transition: margin-left 0.3s ease, margin-top 0.3s ease; transition: margin-left 0.3s ease, margin-top 0.3s ease; } /******************************* Types *******************************/ .ui.sidebar { margin-left: -275px !important; } .ui.right.sidebar { left: 100%; margin: 0px !important; } .ui.top.sidebar { margin: -40px 0px 0px 0px !important; width: 100% !important; height: 40px !important; } .ui.bottom.sidebar { width: 100% !important; height: 40px !important; top: 100%; margin: 0px !important; } /******************************* States *******************************/ .ui.active.sidebar { margin-left: 0px !important; } .ui.active.right.sidebar { margin-left: -275px !important; } .ui.active.top.sidebar { margin-top: 0px !important; } .ui.active.bottom.sidebar { margin-top: -40px !important; } /******************************* Variations *******************************/ .ui.floating.sidebar { -webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); } .ui.right.floating.sidebar { -webkit-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); } .ui.top.floating.sidebar { -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); } .ui.bottom.floating.sidebar { -webkit-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); }