|
|
/* * # 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--------------------*//*------------------- 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: #191919; 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;}
|
