|
|
/* * # 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 ---*//*------------------- Page--------------------*//*------------------- Background Colors--------------------*//* Used for differentiating neutrals *//* Used for differentiating layers *//*------------------- Grid--------------------*//*------------------- Breakpoints--------------------*//******************************* Power-User*******************************//*------------------- Icons--------------------*//* Max Width of Icon *//*------------------- Easing--------------------*//*--- Light Variations ---*//*--- 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; background: #191919; -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 100% !important; width: 260px !important; border-radius: 0em !important; margin: 0 !important; -webkit-transition: none; transition: none; will-change: transform; overflow-y: auto !important;}/*-------------- Body---------------*//* Sets 3D Perspective */.pushable { background: #333333 !important; position: relative; height: 100%; overflow-x: hidden;}/*-------------- Pusher---------------*/.pushable > .pusher { background: #333333; height: 100%; z-index: 1002; -webkit-transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease;}/*-------------- Page---------------*/.pushable > .pusher > .page { position: relative; min-height: 100%; background: #fcfcfc;}/*-------------- 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: 1003; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; will-change: opacity;}/******************************* States*******************************//*-------------- Pushed---------------*/.pushable.pushed { overflow-x: hidden;}/* Show Dimmer */.pushable.pushed > .pusher > .page:after { width: 100% !important; height: 100% !important; opacity: 1 !important;}.pushable.pushed > .visible.sidebar { -webkit-overflow-scrolling: touch;}/*.pushable.hide > .pusher > .page *,.pushable.show > .pusher > .page *,.pushable.pushed > .pusher > .page * { transition: none !important;}*//*-------------- 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 { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); z-index: 1004;}/* Pushed */.pushable.overlay.pushed .visible.ui.sidebar { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);}/* 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;}/*-------------- Push---------------*//* Set-Up */.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 > .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;}/*-------------- 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.show,.pushable.safe.hide { -webkit-transition: margin 0.5s ease !important; transition: margin 0.5s ease !important;}/*-------------- Reveal---------------*//* Set-up */.pushable.reveal > .pusher { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); z-index: 1001;}.pushable.reveal > .visible.ui.sidebar { -webkit-transition: none; transition: none;}/* Pushed */.pushable.reveal.pushed > .pusher { -webkit-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0);}/*-------------- Slide Along---------------*//* Set-up */.pushable.slide.along > .pusher { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); z-index: 1001;}.pushable.slide.along > .visible.ui.sidebar { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0);}/* Pushed */.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 > .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 > .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 > .pusher { z-index: 1001; -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: 1004;}/* 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);}/* 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;}/*-------------- Scale Up---------------*//* Set-up */.pushable.scale.up { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%;}.pushable.scale.up > .ui.sidebar { -webkit-transform: translate3d(0, 0, -260px); transform: translate3d(0, 0, -260px);}/* Pushed */.pushable.scale.up.pushed > .pusher { -webkit-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0);}.pushable.scale.up.pushed > .visible.ui.sidebar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}/* Animation */.pushable.scale.up.show > .ui.sidebar,.pushable.scale.up.hide > .ui.sidebar { -webkit-transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease;}/*-------------- Open Door---------------*//* Set-up */.pushable.open.door { -webkit-perspective: 1500px; perspective: 1500px;}.pushable.open.door > .ui.sidebar { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); z-index: 1004;}.pushable.open.door > .pusher { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}/* Pushed */.pushable.open.door.pushed > .pusher { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg);}.pushable.open.door.pushed > .visible.ui.sidebar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}/* Animation */.pushable.open.door.show > .ui.sidebar,.pushable.open.door.hide > .ui.sidebar { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s;}/*-------------- Rotate In---------------*//* Set-up */.pushable.rotate.in { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%;}.pushable.rotate.in > .pusher { -webkit-perspective: none; perspective: none;}.pushable.rotate.in > .ui.sidebar { -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg); transform: translate3d(-100%, 0, 0) rotateY(90deg); -webkit-transform-origin: 50% 100% 0; -ms-transform-origin: 50% 100% 0; transform-origin: 50% 100% 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}/* Pushed */.pushable.rotate.in.pushed > .pusher { -webkit-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0);}.pushable.rotate.in.pushed .visible.ui.sidebar { -webkit-transform: translate3d(0%, 0, 0) rotateY(0deg); transform: translate3d(0%, 0, 0) rotateY(0deg);}/* Return Animation */.pushable.rotate.in.hide > .visible.ui.sidebar { -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg); transform: translate3d(-100%, 0, 0) rotateY(0deg); -webkit-transition: -webkit-transform 0.5s ease 0s; transition: transform 0.5s ease 0s;}/* Animation */.pushable.rotate.in.show > .ui.sidebar,.pushable.rotate.in.hide > .ui.sidebar { -webkit-transition: -webkit-transform 0.5s ease-in-out 0s; transition: transform 0.5s ease-in-out 0s;}
|
