|
|
/* * # Semantic UI * git://github.com/Semantic-Org/Semantic-UI.git#1.0 * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/******************************* Sidebar*******************************/
/* Sidebar Menu */.ui.sidebar { position: fixed; top: 0; left: 0; visibility: hidden; height: 100% !important; border-radius: 0em !important; margin: 0 !important; -webkit-transition: none; transition: none; will-change: transform; overflow-y: auto !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #1b1c1d; width: 260px !important;}
/*-------------- Direction---------------*/
.ui.top.sidebar,.ui.bottom.sidebar { width: 100% !important; height: auto !important; overflow-y: visible !important;}.ui.top.sidebar { top: 0px !important; bottom: auto !important;}.ui.right.sidebar { right: 0px !important; left: auto !important;}.ui.bottom.sidebar { top: auto !important; bottom: 0px !important;}
/*-------------- Body---------------*/
/* Sets 3D Perspective */.pushable { background: #333333 !important; position: relative; height: 100%; overflow-x: hidden;}
/*-------------- Fixed---------------*/
.pushable > .ui.fixed { position: fixed; -webkit-transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; z-index: 903;}
/*-------------- Pusher---------------*/
.pushable > .pusher { background: #333333; height: 100%; z-index: 901; -webkit-transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease;}
/*-------------- Page---------------*/
.pushable > .pusher > .page { position: relative; min-height: 100%; background: #f7f7f7;}
/*-------------- Dimmer---------------*/
.pushable > .pusher > .page:after { position: absolute; top: 0px; right: 0px; content: ''; background-color: rgba(0, 0, 0, 0.4); width: 0px; height: 0px; overflow: hidden; opacity: 0; z-index: 902; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; will-change: opacity;}
/*-------------- Coupling---------------*/
.ui.sidebar.menu .item { border-radius: 0em !important;}
/******************************* States*******************************/
/*-------------- Pushed---------------*/
.pushable.pushed { overflow-x: hidden;}.pushable.pushed > .fixed,.pushable.pushed > .pusher { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-overflow-scrolling: touch;}.pushable.active > .visible.sidebar { -webkit-overflow-scrolling: touch; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 904;}
/*-------------- Dimmed---------------*/
.pushable > .pusher > .page.dimmed:after { width: 100% !important; height: 100% !important; opacity: 1 !important;}
/*-------------- Animation---------------*/
.pushable.show > .pusher,.pushable.hide > .pusher { -webkit-backface-visibility: hidden; backface-visibility: hidden;}.pushable.show > .visible.sidebar,.pushable.hide > .visible.sidebar { -webkit-backface-visibility: hidden; backface-visibility: hidden;}
/*-------------- Visible---------------*/
.pushable > .visible.ui.sidebar { visibility: visible;}
/******************************* Variations*******************************/
/*-------------- Styled---------------*/
.ui.styled.sidebar { background-color: #FFFFFF; padding: 1em 1.25em; border-right: 1px solid #DDDDDD;}
/******************************* Animations*******************************/
/*-------------- Overlay---------------*/
/* Set-up */.pushable.overlay > .visible.ui.sidebar { z-index: 904;}
/* Animation */.pushable.overlay.show > .visible.ui.sidebar,.pushable.overlay.hide > .visible.ui.sidebar { -webkit-transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease;}
/*--- Left ---*/
/* Set-up */.left.pushable.overlay > .visible.ui.sidebar { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
/* Pushed */.left.pushable.overlay.pushed .visible.ui.sidebar { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);}
/*--- Right ---*/
/* Set-up */.right.pushable.overlay > .visible.ui.sidebar { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}
/* Pushed */.right.pushable.overlay.pushed .visible.ui.sidebar { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);}
/*--- Top ---*/
/* Set-up */.top.pushable.overlay > .visible.ui.sidebar { -webkit-transform: translate3d(0%, -100%, 0); transform: translate3d(0%, -100%, 0);}
/* Pushed */.top.pushable.overlay.pushed .visible.ui.sidebar { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0);}
/*--- Bottom ---*/
/* Set-up */.bottom.pushable.overlay > .visible.ui.sidebar { -webkit-transform: translate3d(0%, 100%, 0); transform: translate3d(0%, 100%, 0);}
/* Pushed */.bottom.pushable.overlay.pushed .visible.ui.sidebar { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0);}
/*-------------- Push---------------*/
/* Set-Up */.pushable.push > .fixed,.pushable.push > .pusher { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0);}.pushable.push > .visible.ui.sidebar { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
/* Pushed */.pushable.push.pushed > .visible.ui.sidebar { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);}.pushable.push.pushed > .fixed,.pushable.push.pushed > .pusher { -webkit-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0);}.pushable.push.show > .visible.ui.sidebar,.pushable.push.hide > .visible.ui.sidebar { -webkit-transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease;}
/*-------------- Uncover---------------*/
/* Set-up */.pushable.uncover > .fixed,.pushable.uncover > .pusher { -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);}.pushable.uncover > .pusher { z-index: 900;}.pushable.uncover > .visible.ui.sidebar { -webkit-transition: none; transition: none;}
/* Pushed */
/*--- Left ---*/
.pushable.left.uncover.pushed > .fixed,.pushable.left.uncover.pushed > .pusher { -webkit-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0);}
/*--- Right ---*/
.pushable.right.uncover.pushed > .fixed,.pushable.right.uncover.pushed > .pusher { -webkit-transform: translate3d(-260px, 0, 0); transform: translate3d(-260px, 0, 0);}
/*-------------- Slide Along---------------*/
/* Set-up */.pushable.slide.along > .fixed,.pushable.slide.along > .pusher { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0);}.pushable.slide.along > .pusher { z-index: 900;}.pushable.slide.along > .visible.ui.sidebar { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0);}
/* Pushed */.pushable.slide.along.pushed > .fixed,.pushable.slide.along.pushed > .pusher { -webkit-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0);}.pushable.slide.along.pushed > .visible.ui.sidebar { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);}.pushable.slide.along.show > .visible.ui.sidebar,.pushable.slide.along.hide > .visible.ui.sidebar { -webkit-transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease;}
/*-------------- Slide Out---------------*/
/* Set-up */.pushable.slide.out > .fixed,.pushable.slide.out > .pusher { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0);}.pushable.slide.out > .visible.ui.sidebar { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0);}
/* Pushed */.pushable.slide.out.pushed > .fixed,.pushable.slide.out.pushed > .pusher { -webkit-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0);}.pushable.slide.out.pushed .visible.ui.sidebar { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);}.pushable.slide.out.show > .visible.ui.sidebar,.pushable.slide.out.hide > .visible.ui.sidebar { -webkit-transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease;}
/*-------------- Scale Down---------------*/
/* Set-up */.pushable.scale.down > .fixed { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0);}.pushable.scale.down > .pusher { z-index: 900; -webkit-transform-origin: 75% 50%; -ms-transform-origin: 75% 50%; transform-origin: 75% 50%; overflow: hidden;}.pushable.scale.down > .visible.ui.sidebar { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); z-index: 904;}
/* Pushed */.pushable.scale.down.pushed > .pusher { -webkit-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75);}.pushable.scale.down.pushed > .visible.ui.sidebar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}.pushable.scale.down.pushed > .fixed { -webkit-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0);}
/* 3D transition cant have duration set until animation */.pushable.scale.down.show > .visible.ui.sidebar,.pushable.scale.down.hide > .visible.ui.sidebar { -webkit-transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease;}
/*-------------- Safe Mode---------------*/
/* Set-Up */.pushable.safe > .pusher { position: relative; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; -webkit-transition: none !important; transition: none !important;}.pushable.safe > .pusher { -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; -webkit-transition: none !important; transition: none !important;}
/* Pushed */.pushable.safe.pushed { margin-left: 260px !important;}.pushable.safe.pushed > .visible.ui.sidebar { margin-left: -260px;}.pushable.safe.pushed > .fixed { margin-left: 260px !important;}.pushable.safe.show,.pushable.safe.hide,.pushable.safe.show > .fixed,.pushable.safe.hide > .fixed { -webkit-transition: margin 0.5s ease !important; transition: margin 0.5s ease !important;}
|
