/******************************* Semantic Module: Sidebar Author: Jack Lukic Notes: First Commit March 25, 2013 Sidebar Menu System *******************************/ /******************************* Sidebar *******************************/ body { -webkit-transition: padding 0.3s ease; -moz-transition: padding 0.3s ease; -o-transition: padding 0.3s ease; -ms-transition: padding 0.3s ease; transition: padding 0.3s ease; } .ui.sidebar { position: fixed; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); 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: -webkit-transform 0.3s ease; -moz-transition: -moz-transform 0.3s ease; transition: transform 0.3s ease; } /******************************* Types *******************************/ .ui.right.sidebar { left: 100%; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .ui.top.sidebar { width: 100%; height: 40px; overflow: hidden; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .ui.bottom.sidebar { width: 100%; height: 40px; top: 100%; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } /******************************* States *******************************/ .ui.active.sidebar { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .ui.active.top.sidebar, .ui.active.bottom.sidebar { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .ui.active.right.sidebar { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } /******************************* Variations *******************************/ .ui.floating.sidebar { -webkit-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); } .ui.right.floating.sidebar { -webkit-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2); box-shadow: -5px 0px 5px 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); }