/* * # Semantic - Sidebar * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ ██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ ███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ ╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ ███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ ╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Themes *******************************/ /* To override a theme for an individual element specify theme name below Be sure to update the user folder name (see README) */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Import Directives *******************************/ /*------------------ Load Default -------------------*/ /******************************* Site Settings *******************************/ /*------------------- Paths --------------------*/ /*------------------- Fonts --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*------------------- Page --------------------*/ /* Used to match floats with text */ /*------------------- Background Colors --------------------*/ /* Used for differentiating neutrals */ /* Used for differentiating layers */ /*------------------- Grid --------------------*/ /*------------------- Breakpoints --------------------*/ /******************************* Power-User *******************************/ /*------------------- Icons --------------------*/ /* Max Width of Icon */ /*------------------- Easing --------------------*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Text ---*/ /*--- Colored Headers ---*/ /*------------------- Emotive Colors --------------------*/ /* Mood */ /* Solid Background Color */ /* Status */ /* Darkened Headers */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Grid Columns --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Sizes --------------------*/ /*------------------- Transitions --------------------*/ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Active --------------------*/ /*--- Standard ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /******************************* Sidebar *******************************/ /*------------------ Load Theme -------------------*/ /*------------------ Load Site -------------------*/ /******************************* User Global Variables *******************************/ /******************************* Overrides *******************************/ /*------------------ Override Mix-in -------------------*/ /******************************* 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; }